-
2단 레이아웃프로그래밍/HTML&CSS 2022. 9. 12. 21:43728x90
사이트의 제목, 본문, 사이드바, 밑에 푸터부분으로 구분지어 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