FastBoot 스킨 사이드바 폭, 위치 조정

현재 사용 중인 FastBoot v1.6.2 반응형 스킨은 기본적으로 사이드바가 본문의 오른쪽에 위치한 형태의 스킨입니다. 참고로 본문과 사이드바의 너비는 기본적으로 9:3의 비율로 설정되어있습니다.

 

이렇게 사이드바가 있는 블로그 스킨을 사용하다 보면 각종 고민에 빠지곤 합니다.

 

사이드바의 너비 또는 폭을 늘리거나 줄이거나, 또는 본문과 사이드바의 폭의 비율을 조정할 수 없을까? 사이드바의 위치를 본문의 왼쪽 또는 오른쪽으로 이동시킬 수는 없을까?

 

FastBoot v1.6.2 반응형 스킨의 경우에는 현재 시점 기준으로 스킨 제작자가 직접 이것에 대한 명확한 해답을 이미 모두 밝힌 상태입니다.

 

현재 이 스킨이 배포되고 있는 Readiz 블로그에는 FastBoot 스킨과 관련한 각종 문답식 정보성 글들이 게시되어있습니다. 그리고 FastBoot v1.6.2 반응형 스킨 설치 안내 가이드 페이지의 댓글 창에도 스킨과 관련된 각종 유용한 정보가 댓글과 답글 식 문답 형태로 정리 아닌 정리가 되어있습니다. 보고 있자면 마치 제품 사용설명서의 FAQ 또는 QnA를 보는 듯합니다. 이 중 스킨의 사이드바와 관련된 내용은 게시글 형태로 따로 정리되어있는 글이 있습니다.

 

이 글에서는 해당 게시글의 내용을 참고하여 직접 FastBoot v1.6.2 반응형 스킨의 사이드바를 수정해본 상세한 과정을 기록해보도록 하겠습니다.

 

 

사이드바 폭 조정 : 본문 폭과 비율

 

앞서 말했듯이 FastBoot v1.6.2 스킨에서 본문과 사이드바의 폭의 비율은 기본적으로 9:3으로 설정되어있습니다. 이것을 본문 폭과 사이드바 폭의 합이 12가 되는 데 한에서 정수로 각각의 비율을 설정할 수 있습니다. 즉 예를 들어 8:4 또는 7:5 등으로 설정이 가능합니다.

 

우선 티스토리 관리 메뉴의 꾸미기 > HTML/CSS 편집으로 들어갑니다.

 

기본 탭인 HTML에서 이제 수정해 줄 부분을 찾아야 합니다.

 

본문 및 사이드바의 폭 조정을 위해서는 일단 두 부분을 찾아야 합니다.

 

이 부분과

 

이 부분입니다.

 

위의 두 이미지는 붉은 원으로 표시된 숫자 부분이 위가 9, 아래가 3이었던 초기값 상태에서 8, 4로 수정된 상태입니다. 위의 숫자 8은 본문의 너비, 아래의 숫자 4는 사이드바의 너비에 해당됩니다. 좀 더 정확히는 각각의 폭의 비율에 해당되는 수입니다. 이렇게 두 수를 각각 8, 4로 수정한 것처럼 두 개를 합한 수가 12가 되도록 두 숫자를 정하여 수정해주면 됩니다. 

 

8:4 비율이 적용되면 9:3이었던 기존 비율일 때에 비해 본문 폭은 줄어들고 사이드 바 폭이 늘어나게 됩니다.

 

 

사이드바 위치 조정 : 왼쪽 이동

 

수정해야 할 곳은 위에서 말한 부분과 동일합니다.

 

본문 부분에서는 본문 폭에 해당되는 숫자 바로 뒤에 한 칸을 띄우고 'col-md-push-숫자'를 입력합니다. 여기서 '숫자'는 사이드바의 폭에 해당되는 숫자입니다.

이것의 의미는 본문 영역을 오른쪽으로 '숫자' 거리만큼 밀어낸다는 의미입니다. 지금의 경우는 사이드바에 해당되는 숫자인 4만큼 오른쪽으로 밀어내어서 결과적으로 본래 사이드바가 위치한 오른쪽 끝에 본문 영역을 붙이는 효과를 가져오게 됩니다.

 

사이드바 부분에서는 사이드바 폭에 해당되는 숫자 바로 뒤에 한 칸을 띄우고 'col-md-pull-숫자'를 입력합니다. 여기서 '숫자'는 본문의 폭에 해당되는 숫자입니다.

이것의 의미는 사이드바 영역을 왼쪽으로 '숫자' 거리만큼 당겨온다는 의미입니다. 지금의 경우는 본문 폭에 해당되는 숫자인 8만큼 왼쪽으로 당겨와서 결과적으로 본래 본문 영역이 위치한 왼쪽 끝에 사이드바 영역을 붙이는 효과를 가져오게 됩니다.

 

수정 사항을 저장한 후 확인을 해 보면 사이드바가 본문 영역의 왼쪽으로 이동한 것을 알 수 있습니다.

 

현재 이 블로그는 본문:사이드바 폭 8:4 비율을 적용 중입니다. 사이드바를 왼쪽으로 이동시키는 것도 진지하게 고려해 보았으나 실제 위 과정을 거쳐 사이드바를 옮겨보니 상당히 난해한 상태가 되어버리기에 바로 원상복구시켰습니다. 당분간 기본적인 틀은 지금 상태를 유지해야겠습니다.

 

FastBoot 스킨 관련 그 밖의 포스트는 아래에 있는 '카테고리의 다른 글'을 참고 바랍니다.