PURE CSS 썸네일형 리스트형 순수 CSS만으로 모달 윈도우(팝업 레이어) 만들기 CSS만으로 팝업 레이어(Modal WIndow)를 만드는 방법입니다. See the Pen Pure CSS, Simple Modal Window by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. 원리 간단설명1. checkbox input 을 하나 만들고 그 바로 뒤에 모달 레이어로 사용할 div를 디자인합니다. 체크박스 input은 사용자에게 보이질 부분이 아니라, 브라우저가 modal 레이어를 선택하는 기능적 역할만 수행할 것이기 때문에 display:none; 등 으로 안보이도록 가립니다. 2. 모달 div는 기본 상태가 보이지 않는 상태로 설정해놓습니다. display:none; 이라든지 visibility: hidd.. 더보기 순수 CSS만으로 리스트/웹진 보기 방식 전환 스위치 만들기 See the Pen Pure CSS, "List/Grid" view mode switch by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. CSS만으로 목록의 뷰타입을 바꾸는 예제입니다. 세부적으로 디자인하면 더 구체적인 부분까지 디테일하게 바꿀 수 있습니다.며칠전에 올린 순수 CSS만으로 아코디언 탭 메뉴 구현하기와 같은 원리로 작동합니다. Input 라디오를 이용해 그 뒤에오는 요소들을 컨트롤 하는 것이죠. 형제 선택자 ~ 를 사용했습니다. 작성하다가 괜히 욕심히 내서 애니메이션 효과 등을 넣느라고 괜히 CSS가 길고 복잡해보이는데, 사실 애니메이션 부분만 제외하면 아주 간단한 코드입니다. CSS에 주석을 달아놨으니 공부.. 더보기 순수 CSS만으로 아코디언 탭 메뉴 구현하기 See the Pen Pure CSS, Horizontal Arccodion by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. 순수 CSS만을 활용하여 아코디언 메뉴(펼침 텝메뉴) 만들기. * 원리 설명 1. 같은 name으로 묶인 radio 타입의 input은 그 인풋들 중 단 하나만 체크되는 원리를 이용합니다. 2. input 이 체크 되었는지 여부를 확인하여 선택할 수 있는 CSS 가상선택자 :checked 를 사용해 어떤 input이 체크 되었는지 확인합니다. 3. 만약 어떤 input에 체크되었다면 동등한 깊이(depth)의 엘리먼트. 즉, 형제격이면서 인접한 엘리먼트를 선택할 수 있는 선택자 + 를 사용하여 형제이면.. 더보기 이전 1 다음
