앞서 우리는 float 속성을 응용해 2단(칼럼) 레이아웃을 만들어 보았습니다. 하나씩 요소에 float를 적용하면서 float의 속성이 적용되는 방식에 대해서 어느 정도 이해도가 생겼을 것입니다.
[CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃
이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠
nozeroslope.tistory.com
이번에는 해당 방식을 응용하여 3단(칼럼) 레이아웃을 만들어 보도록 하겠습니다. 만들고자 하는 레이아웃의 사이즈는 아래 그림과 같습니다.
이번에도 역시 기본적인 HTML 코드와 CSS 스타일을 준비해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS 레이아웃 - 3단 레이아웃</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css_example.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<aside id="left-sidebar">
<h2>사이드바</h2>
</aside>
<section id="contents">
<h2>본문</h2>
</section>
<aside id="right-sidebar">
<h2>사이드바</h2>
</aside>
<footer id="footer">
<h2>푸터</h2>
</footer>
</div>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
위의 HTML 문서를 실행하면, 기본적인 텍스트 구성은 아래와 같이 이루어집니다. container가 전체를 감싸고 있고, aside 두 개가 각각 left-sidebar와 right-sidebar를 통해 구성됩니다. 그리고 그 중간에 section(본문) 공간이 존재하고 footer 영역을 배치하게 됩니다.
이제 CSS를 수정해 보겠습니다. 우선 이번에도 float를 지정하지 않고 진행해 보겠습니다.
* {
margin:0;
padding:0;
box-sizing: border-box;
}
#container {
width: 1200px;
margin: 20px auto;
}
#header {
width:100%; /* 부모 요소와 너비 동일하게 */
height: 120px;
background-color: antiquewhite;
}
#left-sidebar {
width:250px;
height: 600px;
background-color: aqua;
}
#contents {
width: 800px;
height: 600px;
background-color: aliceblue;
}
#right-sidebar {
width: 150px;
height: 600px;
background-color: aqua;
}
#footer {
width: 100%;
height: 100px;
background-color: gray;
}
플로팅 미적용 상태에서는 다음과 같은 구성으로 레이아웃이 출력됩니다.
이제 각 요소에 float 속성을 부여해 출력해 보겠습니다. 순차적으로 float을 적용하던 원리에 대해서 살펴보려면 이전 아티클을 참조하시기 바랍니다.
[CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃
이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠
nozeroslope.tistory.com
* {
margin:0;
padding:0;
box-sizing: border-box;
}
#container {
width: 1200px;
margin: 20px auto;
}
#header {
width:100%; /* 부모 요소와 너비 동일하게 */
height: 120px;
background-color: antiquewhite;
}
#left-sidebar {
width:250px;
height: 600px;
background-color: aqua;
float: left;
}
#contents {
width: 800px;
height: 600px;
background-color: aliceblue;
float: left;
}
#right-sidebar {
width: 150px;
height: 600px;
background-color: aqua;
float: right;
}
#footer {
width: 100%;
height: 100px;
background-color: gray;
clear: left;
}
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 2 : relative (0) | 2023.04.24 |
|---|---|
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 1 : static (0) | 2023.04.24 |
| [CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 (0) | 2023.04.18 |
| [CSS] 4. 레이아웃 설계(2) - float 1 (0) | 2023.04.17 |
| [CSS] 4. 레이아웃 설계(1) - display (0) | 2023.04.14 |
