[티스토리 스킨] 부트스트랩(bootstrap) + 티스토리(tistory) - 3. 그리드 적용하기

부트스트랩을 이용하여 반응형 레이아웃을 구성하려면 그리드 시스템을 이용하는 것이 좋습니다.

(참고 : bootstrap - 그리드 시스템 )

 

설명

 

부트스트랩의 그리드는 12칸이 기준이라 우리는 9칸/3칸으로 나누도록 하겠습니다.

왼쪽(9칸)은 콘텐츠를 넣을 거고 오른쪽(3칸)은 카테고리와 같은 사이드 메뉴로 사용할 예정입니다.

 

html에 사이드바 요소를 추가하면 바로 반영 안 되는 경우가 있습니다.

이럴 때는 '관리 > 사이드바'로 들어가서 왼쪽에 있는 모듈을 추가해 주시면 됩니다.

 

테스트 페이지 : http://danggun-test2.tistory.com/

 

 

코드

전체 코드 입니다.

 

bootstrap_tistory_003.txt

 

그리드를 설정한 코드를 살펴보겠습니다.

 

컨탠츠는 9칸에 넣었고 사이드바는 3칸에 넣었습니다.

이제 화면이 작아지면 사이드바가 밑으로 내려가는 것을 볼 수 있습니다.

동작은 마음에 안 들지만 일단 그냥 두겠습니다 ㅎㅎㅎ

 

's_sidebar' 태그가 있어야 티스토리에서 카테고리로 인식하기 때문에 카테고리로 사용할 래이아웃은 's_sidebar'로 감쌉니다.

 

<!-- 3. 사이드바 -->
<s_sidebar>
    <!-- 3-1. 블로그 이미지 + 블로그 설명 -->
    <s_sidebar_element>
        <!-- 블로그 로고 모듈 -->
        <div class="text-center"><img src="https://tistory1.daumcdn.net/tistory/693272/attach/620f72dd048645d4b55b2bd494640403" alt="블로그 이미지" /></div>
        <div class="text-center"> <span class="userID">당근천국</span></div>
    </s_sidebar_element>
    <!-- 3-1. 블로그 이미지 + 블로그 설명 -->
    <!-- 3-2. 공지사항 리스트 -->
    <s_sidebar_element>
        <!-- 공지사항 모듈 -->
        <s_rct_notice>
            <div>
                <ul class="list-unstyled">
                    <s_rct_notice_rep>
                        <li>
                            <span class="label label-info">공지</span>
                            <a href=""></a>
                        </li>
                    </s_rct_notice_rep>
                </ul>
            </div>
        </s_rct_notice>
    </s_sidebar_element>
    <!-- 여기까지 - 3-2. 공지사항 리스트 -->
    
....중략....
</s_sidebar>
<!-- /3. 사이드바 -->

 

'col-xs'는 큰 화면 'col-md'은 중간화면에 대응하는 스타일 시트입니다.