요즘 블로그를 구경하다보면 사이드바가 고정된 형태의 스킨을 자주 보게된다. 현재 이 블로그의 스킨은 처음 배포시 사이드바가 고정되지 않는 형태여서 이 블로그에도 사이드바를 고정해 보았다.
고정하는 방법은 생각보다 아주 간단하다.
스킨 꾸미기의 CSS 에서 사이드바 부분에 Position 이하의 문구를 추가하면 된다. 아래 사진을 참조!!
사이드바의 고정은 아주 간단하지만 오른쪽이나 왼쪽 맨끝에 고정이 되므로 본문과 사이드바가 맨끝에 위치하지 않는 스킨의 경우 본문과 사이드바에 간격이 생긴다. 반응형의 경우 그 간격이 더 불편하게 보일수도 있어 사이드바의 고정이 항상 좋다고만은 할 수 없다. 사이드바에 광고를 삽입하는 경우나 많은 항목으로 한 화면에 표현하기 어려운 경우는 굳이 사이드바를 고정할 필요는 없다. 대부분의 스킨이 사이드바의 고정이 가능하지만 스킨마다 상황이 다르므로 그 간격을 조정가능한 방법은 각자 본인의 스킨에 맞게 변경하여 사용할 수 밖에 없다.
현재의 스킨도 1280 이상 해상도와 992 이상 해상도 그리고 그 이하 모바일 환경에서의 해상도를 모두 고려해서 수정하다보니 여러가지 문구를 추가를 설정해야했다.
사이드바 고정하는 방법(오른쪽에 고정) - 왼쪽에 고정하려면 중간에 right:0;을 left:0; 으로 변경하면 된다. 폰트나 사이드바의 크기는 스킨에 맞게 수정하여 사용하면 된다.
position fixed 는 익스플로러에서 스크롤 떨림 버그가 생길 수 있으므로 유의!!
#sidebar {
width: 320px;
font-size: .85em;
margin-top: 0;
position:fixed;
float: left;
top:0;
right:0;
bottom:0;
padding:0;
height: 100%;
cursor:default;
overflow-y:auto;
z-index: 100;
}
