See the Pen Pure CSS, "List/Grid" view mode switch by moksunung (@moksunung) on CodePen.
위 예제는 http://codepen.io 에 작성했습니다.
CSS만으로 목록의 뷰타입을 바꾸는 예제입니다. 세부적으로 디자인하면 더 구체적인 부분까지 디테일하게 바꿀 수 있습니다.
며칠전에 올린 순수 CSS만으로 아코디언 탭 메뉴 구현하기와 같은 원리로 작동합니다. Input 라디오를 이용해 그 뒤에오는 요소들을 컨트롤 하는 것이죠. 형제 선택자 ~ 를 사용했습니다. 작성하다가 괜히 욕심히 내서 애니메이션 효과 등을 넣느라고 괜히 CSS가 길고 복잡해보이는데, 사실 애니메이션 부분만 제외하면 아주 간단한 코드입니다.
CSS에 주석을 달아놨으니 공부하시는 분 계시면 참고해서 보시고, 문는 댓글에 남겨주세요. ^^
