[square] 사이드바 크기 조절 및 그에 따른 수정법
몇몇 분들이 사이드바 크기 조절에 관해 문의를 하셨습니다.
자주 묻는 질문 게시물에 추가할까 하다가 내용이 좀 복잡할거같아 따로 작성합니다.
일단 가이드를 시작하기 전에 사이드바와 본문이 어떻게 만들어져 있는건지 대충 설명해 드리자면,
컨텐츠
사이드바는 공중에 떠서 position: fixed 라는 속성으로 고정되어 있고,
컨텐츠는 margin-left 값으로 사이드바 크기 + 30px 정도로 여백을 설정해뒀습니다.
※ 둘이 같이 바닥에 붙어있는 게 아닙니다.
따라서 사이드바 크기를 수정하면 컨텐츠의 margin-left 값도 수정해줘야 합니다.
이제 수정법을 알아볼까요?
※ 수정하기에 앞서 백업은 필수이자 의무입니다.
※ 이 가이드는 스킨 버전 1.4.4를 기준으로 합니다.
※ 2.1 에 맞게 수정되었습니다. (2015.10.28)
style.css 파일 편집
#sidebar 를 검색 또는 65번째 줄에
#sidebar { position: fixed; top: 0; left: 0; bottom: 0; padding: 0; width: 300px; height: 100%; background-color: #fff; border-right: 1px solid #ddd; cursor: default; overflow-y: auto; z-index: 100; }
이런 소스가 있습니다. width: 300px;을 원하는 값으로 변경해주세요.
이 값을 "사이드바 길이" 라고 하겠습니다.
다음으로
#content 검색 또는 105번째 줄에
#content { margin: 0 0 0 330px; padding: 0; }
margin: 0 0 0 330px; 에서 330을 (사이드바 길이)+30 으로 해주세요.
※ 여기서 잠깐, 본문 너비 조절은 #content 바로 밑줄에 #content-inner 안의 max-width: 1030px; 을 조절하면 됩니다.
쭈욱 스크롤을 내려 338번째 줄에
#sidebar { left: -300px; }
이런 소스가 있습니다.
left: -300px; 에서 -300 이라고 되있는 부분을 설정한 사이드바 길이로 수정합니다.
* 마이너스(-)는 그대로 두고 숫자만 변경해주세요.
마지막으로 93번째 줄에
html.sidebar-off #sidebar { left: -300px; }
이곳 또한 -300을 사이드바 길이로 수정하면 됩니다.
이상입니다.