FastBoot 1.6.2 v의 사이드바는 기본적으로 오른쪽으로 설정되어 있습니다. 하지만 왼쪽으로 사이드바를 옮기고 싶은 분들이 계실 수도 있습니다. 그런분들을 위해 포스팅 하겠습니다. Readiz 선생님께서 '사이드바와 본문 좌우 위치 바꾸기' 글은 이미 포스팅 되어져 있습니다. 여기를 클릭하시면 해당 포스팅으로 이동합니다.
· Bootstrap 기반의 FastBoot
Bootstrap은 javascript 와 css가 합쳐져있는 UI 프레임워크라고 보시면됩니다. javascript와 css는 웹페이지를 정적 또는 동적으로 꾸며주는 언어입니다. 그것을 믹스해서 편리하게 사용할 수 있게 만든 프레임워크가 Bootstrap인 것이죠. 웹 개발을 빠르게 쉽게 해줄 수 있는 프로그램입니다. 여튼 FastBoot는 Bootstrap 방식으로 제작된 스킨입니다. Bootstrap은 기본적으로 Grid 크기를 12로 계산하고 있습니다. 이 그리드를 수정해 주시면 사이드바를 좌우 마음대로 배치할 수 있습니다. 저도 사실 Bootstrap은 접해보지 않아서 어렵습니다만 국한된 작업이기에 연구하고 알려드리겠습니다.
· 본문을 당기고 사이드바를 밀어주고, 사이드바를 당기고 본문을 밀어주고?
Bootstrap의 class중에 col-md-pull-xx와 col-md-push-xx속성이 있습니다. 둘은 각각 '당기다/밀다'라는 뜻입니다. 쉽게 말해 블로그 스킨 왼쪽 기준으로 사이드바를 당겨주면 오른쪽에 있던 사이드바가 왼쪽으로 당겨질 것이며, 본문을 밀어주면 왼쪽에 있던 본문이 오른쪽으로 밀려나가는 원리입니다.
조금 이해가셨나요? 그렇다면 이것 어떻게 옮길까요?
만약에 기본값인 col-md-9과 col-md-3을 사용하고 계신다면, 본문은 3만큼 밀고 사이드바는 9만큼 땡겨와야 할 것입니다. 이 경우 class를 "col-md-9 col-md-push-3"과 "col-md-3 col-md-pull-9" 으로 해주시면 됩니다. class는 여러개의 값을 가질 수 있으므로 col-md-push와 col-md-pull 속성을 추가한 것입니다. 여기서 여러개라고 함은 class="속성1 (공백) 속성2"라고 class값을 사용한다면 속성1과 속성2를 모두 class값으로 사용할 수 있습니다. 반면에 id값은 여러개를 쓸수 없습니다. 어려우면 패스하셔도 됩니다.
쉽게 풀어 설명드리자면, 본문에 대한 클래스값인 class="col-md-9 col-md-push-3"를 본문 크기는 bootstrap 그리드(grid) 너비의 9만큼 차치하고 이 본문을 티스토리 스킨 맨 왼쪽 그리드 기준으로 3만큼 밀어주고, 사이드바에 대한 클래스값인 class="col-md-3 col-md-pull-9"를 사이드바 크기는 bootstrap 그리드(grid) 너비의 3만큼 차지하고 이 사이드바를 티스토리 스킨 맨 왼쪽 기준으로 9만큼 당겨준다고 생각하시면 됩니다. 자 그러면 HTML 코드에 삽입해보도록 하죠.
· 실습
찾기 단축기인 [Ctrl+f]를 눌러 [class="col-md-9"]를 찾아주세요. 'col-md-9'는 본문 너비에 대한 class값입니다. 노란색배경으로 찾을 수 있습니다. 이 코드를 [class="col-md-9 col-md-push-3"]으로 'col-md-9' 다음 스페이스바로 공백을 만들어주시고 'col-md-push-3'을 삽입해주시면됩니다. (※ 모든 코딩은 공백 때문에 엉킬수 있습니다. 공백, 꼭 유의하세요.) 이렇게 변경하면 본문은 티스토리 스킨 왼쪽 그리드 기준으로 3만큼 밀려지게 됩니다.
다음 사이드바를 옮겨봅시다.
찾기 단축기로 [class="sidebar col-md-3"]를 찾아주세요. 'sidebar'를 제외한 'col-md-3'는 사이드바 너비에 대한 class값입니다. 역시 노란색배경으로 찾을 수 있습니다. 이 코드를 [class="sidebar col-md-3 col-md-pull-9"]으로 'col-md-3' 다음 스페이스바로 공백을 만들어주시고 'col-md-pull-9'을 삽입해주시면 됩니다. 이렇게 변경하면 사이드바는 티스토리 스킨 왼쪽으로 9만큼 당겨져오게 되는 것입니다. 이제 마무리 [저장]을 눌러주시면 사이드바 작업은 끝이납니다. 천천히 꼼꼼하게 살펴보면 그렇게 어렵지 않습니다. 저도 배우는 단계라 이론적으로 완벽히 해석해드릴 수 없지만 구동하는데에는 큰 문제 없는 설명이 될 것입니다. 다음은 이를 응용하여 사이드바와 본문의 너비를 변경해보겠습니다. Bootstrap 그리드 12를 잘 이해하시면 문제없이 구동할 수 있는 방법입니다. 감사합니다:)
관련글
포스터 사진 Readiz Logo
'IT > Fastboot' 카테고리의 다른 글
| [FastBoot]06.티에디션 나타나게 하기 (0) | 2017.04.15 |
|---|---|
| [FastBoot]05.사이드바와 본문 너비 조정하기 (0) | 2017.04.14 |
| [FastBoot]03.사이드바, 어디갔니? (1) | 2017.04.12 |
| [FastBoot]02.FastBoot 스킨등록 방법 (0) | 2017.04.11 |
| [FastBoot]01.제 블로그 스킨은? (6) | 2017.04.10 |
