CSS day13

2단 레이아웃

2단 레이아웃

2단 레이아웃의 모양을 떠올려보면 사이트의 제목, 본문, 사이드바, 밑에 푸터부분으로 구분지을 수 있다.

예시와 같이 이런 식으로 구현하면 제법 웹 사이트의 모양으로 만들 수 있다.

먼저 HTML 부문을 작성해보자

<!--생략-->
...
<div id="container">
    <div id="header">
        <h1>사이트 제목</h1>
    </div>
    <div id="contents">
        <h2>본문</h2>
        <p>Lorem ipsum dolor sit amet consectetur ... </p>
    </div>
    <div id="sidebar">
        <h2>사이드바</h2>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur ... </li>
        </ul>
    </div>
    <div id="footer">
        <h2>푸터</h2>
        <p>Lorem, ipsum dolor sit amet consectetur ... </p>
    </div>
</div> 
...
<!--생략-->

그다음 CSS 부분을 생각하보면 contents와 sidebar에 float를 각각 좌, 우를 주면 양옆으로 붙을 것이고 두 박스의 크기로 인해 겹치는 것을 방지하고자 전체 박스인 container의 width 값을 생각하여 contents와 sidebar의 width값을 정해줘야한다. 그리고 float로 인해 footer가 위로 딸려 올라오는 것을 방지하기 위해 clear: both를 지정해 준다.

#container{
    width: 1000px;
    margin: 0 auto;
}
div{
    padding: 20px;
    border: 1px solid gray;
}
#header{
    margin-bottom: 20px;
}
#contents{
    width: 700px;
    float: left;
}
#sidebar{
    width: 200px;
    float: right;
    margin-bottom: 20px;
    background-color: gold;
}
#footer{
    clear: both;
}

이제 결과를 보면,

이런 2단 레이아웃을 구현할 수 있다. 이러한 방법으로 2단 레이아웃을 조금 변형하면 3단 레이아웃도 구현 가능하다.