반응형 사이트 - 컨텐츠 영역 레이아웃

레이아웃 연습을 할때 해봐서 알겠지만, 반응형 사이트를 만들때 주의할 점으로는 

왼쪽과 오른쪽 컨텐츠 영역은 고정을 시키고 가운데 영역이 줄어 들 수 있도록 코딩을 해줘야한다.

(3개의 영역 모두 width 값을 % 로 정할 경우에는 반응형 사이트를 만들경우 3개의 영역이 같이 줄어드게 된다.)

 

※ 예제 소스 

    <main>
        <section id="contents">
            <div class="container">
                <h2 class="ir_su">반응형 사이트 컨텐츠</h2>
                <section id="cont_left">
                    <h3 class="ir_su">반응형 사이트 왼쪽 컨텐츠</h3>
                    <article class="column col1"><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
                    <article class="column col2"><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
                    <article class="column col3"><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
                </section>
                <section id="cont_center">
                    <h3 class="ir_su">반응형 사이트 가운데 컨텐츠</h3>
                    <article class="column col4"><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
                    <article class="column col5"><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
                    <article class="column col6"><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
                </section>
                <section id="cont_right">
                    <h3 class="ir_su">반응형 사이트 오른쪽 컨텐츠</h3>
                    <article class="column col7"><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
                    <article class="column col8"><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
                    <article class="column col9"><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
                </section>
            </div>
        </section>
        <!-- //contents -->
    </main>

* 레이아웃 */
body {background: url(../img/header_bg.jpg) repeat-x center top;}
#header {}
#nav {background-color: #f6fdff;}
#title {background-color: #eaf7fd;}
#contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont_left {float: left; width: 250px;}
#cont_center {
    overflow: hidden; min-height: 1300px; margin-right: 250px;
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
}
#cont_right {position: absolute; right: 0; top: 0; width: 250px;}
#footer {border-top: 1px solid #dbdbdb;} 

/* 컨테이너 */
.container {position: relative; width: 1200px; margin: 0 auto; /* background: rgba(0,0,0,0.3); */}

/* media query*/
/* 화면 너비 0 ~ 1220px */
@media (max-width: 1220px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
    #contents .container {border: 0;}

    .title .btn {right: 5px;}
}

/* 화면 너비 0 ~ 1024px */
@media (max-width: 1024px){
    
}

/* 화면 너비 0 ~ 960px */
@media (max-width: 960px){
    #cont_right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
    #cont_center {margin-right: 0; border-right: 0;}

    .nav > div {float: none; width: 100%;}
    .nav > div:last-child {width: 100%;}
    .nav > div li {width: 33.33333%;}
    .nav > div:last-child li {width: 33.33333%;}
    .nav > div ol {margin-bottom: 10px;}
}

/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
    #cont_left {float: none; width: 100%;}
    #cont_center {border-left: 0;}
}

/* 화면 너비 0 ~ 600px */
@media (max-width: 600px){
    .header {height: auto;}
    .header .header_tit {display: none;}
    .header .header_icon {display: none;}
    .title .btn {display: none;}

    .nav > div li {width: 50%;}
    .nav > div:last-child li {width: 50%;}
}

/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
    
}

/* 화면 너비 0 ~ 320px */
@media (max-width: 320px){
    .nav > div li {width: 100%;}
    .nav > div:last-child li {width: 100%;}
}