[Step 2] Layout 구성및 Library 선언

반응형 스킨을 위해 bootstrap library을 사용할 생각이다. screen size을 직접 핸들링 할 수 있지만 그얼마나 귀찮은가...

https://getbootstrap.com에서 기호에 맞는 버전을 다운받아 css, js파일들을 업로드한다. 이렇게

관리자페이지 -> 스킨편집 -> HTML편집 -> 파일첨부 -> [이곳에 파일을 업로드]

Bootstrap의 layout을 사용하기 위해서 꼭! 알고 있어야될 정보가 있다.

block을 나누기 위해서는 row 클래스를 이용하고 row클래스 안에 있는 element중에 아래의 표처럼 col-[prefix]을 사용하게된다.

auto width을 사용하지 않는다면 row의 기본값인 12를 이용해서 영역을 할당한다.

col-[sm, md, lg, xl]와 같은 class는 최대 container을 구분하기위해 사용한다.

"row는 여러개의 col을 갖을 wrapper이고 이row는 기본적으로 12값을 갖는다" 이것만 기억하라!

자세한 내용은 https://getbootstrap.com/docs/에서 참고할것.. Bootstrap의 설명이 목적이 아니니 패스!

Layout HTML 구조

<div id="wrap">
    <!-- TOP 메뉴 영역 -->
    <header>
        header
    </header>

    <!-- Contents 영역 -->
    <div id="contentsWrapper" class="container-fluid">
        <div class="row">

            <!-- left 2/12 영역-->
            <div class="col-2">
                left
            </div>

            <!-- center 8/12-->
            <div class="col-8">
                center
            </div>

            <!-- right  2/12-->
            <div class="col-2">
                right
            </div>
        </div>
    </div>
    <!-- footer -->
    <footer id="footer">
        footer
    </footer>
</div>