CODELAB

코드랩은 디자인과 코드 뿐만 아니라 다양한 생각을 공유하며 소통하고, 여러가지 기회도 만들어보고, 공부도 하려는 목적으로 시작된 '2인 아이디어 동아리'입니다.

See the Pen Pure CSS, "List/Grid" view mode switch by moksunung (@moksunung) on CodePen.


위 예제는 http://codepen.io 에 작성했습니다.


CSS만으로 목록의 뷰타입을 바꾸는 예제입니다. 세부적으로 디자인하면 더 구체적인 부분까지 디테일하게 바꿀 수 있습니다.

며칠전에 올린 순수 CSS만으로 아코디언 탭 메뉴 구현하기와 같은 원리로 작동합니다. Input 라디오를 이용해 그 뒤에오는 요소들을 컨트롤 하는 것이죠. 형제 선택자 ~ 를 사용했습니다. 작성하다가 괜히 욕심히 내서 애니메이션 효과 등을 넣느라고 괜히 CSS가 길고 복잡해보이는데, 사실 애니메이션 부분만 제외하면 아주 간단한 코드입니다. 

CSS에 주석을 달아놨으니 공부하시는 분 계시면 참고해서 보시고, 문는 댓글에 남겨주세요. ^^


작성완료