스킨에서 사이드바 반응형으로

블로그 스킨을 만들 때 사이드바가 문제다. 요즘 스킨은 대부분 1단으로 만든다, 하지만 이 블로그처럼 글갈래가 많은 블로그는 아무래도 사이드바가 있으면 좋다. 이제까지 감추어 두고 메뉴를 누르면 나타나는 방식으로 처리했는데 어제부터 사이드바가 있는 스킨을 새로 만들어 보았다.

요즘 모바일로 접속하는 사람이 많은 터라 반응형으로 만들 때 사이드바를 어떻게 처리할까가 고민이다. 완벽하지는 않지만 해결책을 찾았다. 큰 화면에선 옆에 보이도록 했다가 모바일처럼 작은 화면에선 아래 쪽으로 가져가는 것이다. 이때 행을 둘로 만들면 좋다. 새로운 시에스에스에선 아주 쉽게 행을 둘로 만들 수 있다.

이렇게 만들면 광고를 넣기도 아주 편해진다. 아직까지 모든 브라우저가 지원하지는 않는 것으로 보이지만 그래도 오래 기다려온 기능이라 먼저 적용해 보았다. 아래는 2단으로 나누는 스타일이다.

.col{
-moz-column-count: 2;       
-webkit-column-count: 2;           
column-count: 2; 
column-gap: 5em; <1--행 사이 거리-->
}