이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠습니다. 구성과 사이즈는 아래의 그림과 같이 구성하려고 합니다.
우선 기본적인 코드는 다음과 같이 준비합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 레이아웃 - 2단 레이아웃</title>
<link rel="stylesheet" href="css/css_example.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>타이틀(header)</h1>
</header>
<aside id="sidebar">
<h2>사이드바(aside)</h2>
</aside>
<section id="contents">
<h2>본문(section)</h2>
</section>
<footer id="footer">
<h2>푸터(footer)</h2>
<footer>
</div>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
위와 같이 간단한 텍스트와 div로 영역만을 구분했습니다. 스타일 상에서도 box-sizing 속성을 border-box로 지정한 것과 이외에는 마진과 패딩을 0으로 설정해 둔 것뿐입니다. 현재 상태에서 화면은 다음과 같이 출력됩니다.
이제 이 상태에서, 맨 위의 설계와 크기를 참고하여 구현하기 위해 CSS파일을 업데이트 해보도록 하겠습니다. 우선은 여기서 우리가 배운 float 요소를 하나도 사용하지 않고, 각각의 크기만 설계에 따라 지정하고 색상 구분을 했습니다.
* {
margin:0;
padding:0;
box-sizing: border-box;
}
#container {
width: 1200px; /* 전체 너비 */
margin: 20px auto; /* 가운데 배치 고정을 위한 auto */
}
#header {
width: 100%; /* 부모 요소와 똑같이 */
height: 120px;
background-color: bisque;
}
#sidebar {
width: 300px;
height: 600px;
background-color: yellow;
}
#contents {
width: 900px;
height: 600px;
background-color: wheat;
}
#footer {
width: 100%;
height: 100px;
background-color: bisque;
}
이렇게 스타일을 지정하면, 어떻게 출력될까요? 아래의 그림을 보겠습니다.
얼추 비슷한 구성이 나오는가 했지만, 블록 레벨의 요소로서 한 줄씩 배치된 것을 확인할 수 있습니다. 자, 그럼 사이드바(aside) 영역에 다음과 같이 float 속성 값 left를 추가해 보겠습니다. 그럼 어떻게 변할까요?
#sidebar {
width: 300px;
height: 600px;
background-color: yellow;
float: left;
}
본문(section) 영역이 사이드바 옆으로 올라왔습니다! 하지만 뭔가 크기가 이상합니다. 이미 본문(section) 영역의 width는 900px로 지정해 두었는데, 오른쪽에 남는 공간이 생겼습니다. 이유는 무엇일까요?
우리는 사이드바(aside)에 left로 플로팅 속성을 부여했습니다. 이 경우, 해당 요소는 공중에 떠있는 것이나 마찬가지이므로 해당 요소가 차지하는 공간은 없는 것이나 마찬가지입니다. 그래서 본문 section 영역은 사이드바의 영역부터 들어가 있는 꼴이 됩니다. 다만, 본문(section)이라는 텍스트는 플로팅 영역을 침범하지 않습니다.
그럼 일단 본문(section), 즉 contents 영역도 플로팅 속성을 적용해 보겠습니다. 플로팅되는 요소끼리는 당연히 자리를 계산하여 위치하게 됩니다(남는 부분에 들어간다는 의미).
#contents {
width: 900px;
height: 600px;
background-color: wheat;
float: left;
}
자, 이제 id contents 영역까지 플로팅을 적용했더니 사이드바와 본문이 제대로 배치된 것 같습니다. 그런데, 못 보던 문제가 하나 발생했습니다. 바로 '푸터' 영역의 텍스트만 남고 컬러가 사라져 버린 것이죠. 왜 이런 현상이 벌어졌는지 추리해 보겠습니다.
우선 사이드바와 본문 모두가 float 속성을 갖게 되었습니다. 그럼 두 요소는 모두 공중에 떴기 때문에 푸터가 무시하게 되는 것입니다. 실제로 푸터는 타이틀 바로 밑에 위치하는 모양이 되었습니다. 다만, 내부 콘텐츠(텍스트)는 이를 무시하지 못하기 때문에 맨 하단에 자리 잡히게 된 것이죠.
우리는 이럴 때 clear 속성을 사용하게 됩니다. 푸터에게 '플로팅되는 애들 무시하지 말고, 자리를 인정해 줘'라고 명령을 하는 것이죠. 적용하고 결과를 봅시다.
#footer {
width: 100%;
height: 100px;
background-color: bisque;
clear: left;
}
자, 이렇게 우리가 의도한 레이아웃이 완성되었습니다. 사실 float와 clear 요소가 쉽게 이해되는 개념은 아니겠지만 이렇게 하나씩 짚어나가 보면 쉽게 이해할 수 있는 요소입니다. 그럼 다음 아티클에서 좀 더 발전된 3열 레이아웃을 만들어 보겠습니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 1 : static (0) | 2023.04.24 |
|---|---|
| [CSS] 4. 레이아웃 설계(2) - float 3 : 3단 레이아웃 (0) | 2023.04.20 |
| [CSS] 4. 레이아웃 설계(2) - float 1 (0) | 2023.04.17 |
| [CSS] 4. 레이아웃 설계(1) - display (0) | 2023.04.14 |
| [CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 2 (0) | 2023.04.13 |
