ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2단 레이아웃
    프로그래밍/HTML&CSS 2022. 9. 12. 21:43
    728x90

    사이트의 제목, 본문, 사이드바, 밑에 푸터부분으로 구분지어 2단 레이아웃을 구성한다.

    2단 레이아웃

     

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

     

     

    먼저 HTML 부문을 작성해보자

    <body>
        <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> 
    </body>

    그다음 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단 레이아웃을 구현할 수 있다.

    728x90

    '프로그래밍 > HTML&CSS' 카테고리의 다른 글

    플렉스 박스 레이아웃(flex box layout)  (0) 2022.09.15
    다단 레이아웃  (0) 2022.09.14
    z-index  (0) 2022.09.11
    position  (0) 2022.09.10
    float  (0) 2022.09.09

    댓글

Designed by Tistory.