신규 블로그를 만들었습니다!
float는 적용된 요소들을 한쪽으로 밀어주는 역할을 합니다. 예를들어서, float: left를 넣어주게 되면 왼쪽으로 요소들을 밀어줍니다.
float
float 속성을 이용해서 2단 구성 레이아웃을 만들어봅시다. 우선적으로, 기본 구조는 2단 레이아웃(왼쪽, 오른쪽)에 맨밑에 footer가 있는 구성입니다.
기본 코드는 아래와 같습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>CSS 예제3</title>
<link href="exam03.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<section class="item item-a">
<h3>Section A</h3>
<p>백종원의 푸드트럭을 개편하여 방송하는 프로그램으로,
지난 푸드트럭에서는 백종원 대표가 푸드트럭 창업 솔루션을 펼쳤다면
이번에는 범위를 확대하여 죽어가는 골목 식당을 살리자는 취지하에
골목 식당 살리기 프로젝트를 펼치게 된다. 때문에 예능 프로이자 식당 경영
및 푸드 솔루션 프로그램으로써의 역할도 한다. 또한 전작인 푸드트럭과
마찬가지로 연예인 도전자가 참여해 장사 초보자의 입장에서 볼 수 있도록 하는
창업 솔루션 프로도 겸한다.</p>
</section>
<section class="item item-b">
<h3>Section B</h3>
<p>백종원의 푸드트럭을 개편하여 방송하는 프로그램으로,
지난 푸드트럭에서는 백종원 대표가 푸드트럭 창업 솔루션을 펼쳤다면
이번에는 범위를 확대하여 죽어가는 골목 식당을 살리자는 취지하에
골목 식당 살리기 프로젝트를 펼치게 된다. 때문에 예능 프로이자 식당 경영
및 푸드 솔루션 프로그램으로써의 역할도 한다. 또한 전작인 푸드트럭과
마찬가지로 연예인 도전자가 참여해 장사 초보자의 입장에서 볼 수 있도록 하는
창업 솔루션 프로도 겸한다.</p>
</section>
</div>
<footer class="footer">
<p>footer</p>
</footer>
</body>
</html>CSS
body, h3, p {
padding: 0;
margin: 0;
}
.container {
}
.item {
padding: 5%;
}
.item-a {
width: 30%;
background-color: yellow;
}
.item-b {
width: 50%;
background-color: orange;
}
.footer {
}
이제 float를 이용해서 2단 레이아웃을 만들어봅시다.
float를 left 속성을 줍니다.
.item {
padding: 5%;
float: left;
}
하지만, 문제가 있습니다. footer가 sectionB 바로 아래에 위치한다는 점입니다. 이걸 해결하기 위해 clear:both 속성을 이용해야합니다.
clear: both
footer에 clear:both를 넣어주게 되면, 앞에 section에 의해 생긴 float 속성이 사라지게 됩니다. 그래서 container 아래에 footer가 위치하게 됩니다.
body, h3, p {
padding: 0;
margin: 0;
}
.container {
}
.item {
padding: 5%;
float: left;
}
.item-a {
width: 30%;
background-color: yellow;
}
.item-b {
width: 50%;
background-color: orange;
}
.footer {
clear: both;
background-color: gray;
}
그리고 Section B 아래에 색상이 나오도록, container에 색상을 입혀봅시다.
body, h3, p {
padding: 0;
margin: 0;
}
.container {
background-color: royalblue;
}
.item {
padding: 5%;
float: left;
}
.item-a {
width: 30%;
background-color: yellow;
}
.item-b {
width: 50%;
background-color: orange;
}
.footer {
clear: both;
background-color: gray;
}분명 색상을 입혔지만 색상이 들어가지 않습니다. 그 이유는 container의 높이가 0이기 때문입니다. float를 사용하면 요소들이 둥둥 떠있기 때문에 section 요소의 부모 요소인 container는 자식요소가 없다고 생각합니다. 그래서 footer에서 clear:both를 한것처럼 container에도 적용을 해야 합니다.
이때, 사용하는 방법으로 ::after 를 사용하는 방법입니다.
::after (가상 요소)
::after를 사용하면,(.... ::after)
container의 가장 마지막 부분에 가상의 요소가 들어가게 됩니다.
그래서, 만들어진 가상요소에 아무런 내용없이(content: '';), float속성을 없애주고(clear: both;), 가상요소가 보일 수 있게(display: block;) 해줍니다.
최종 코드는 아래와 같습니다.
body, h3, p {
padding: 0;
margin: 0;
}
.container {
background-color: royalblue;
}
.container::after {
/* container 마지막에 가상의 요소를 추가 */
content: '';
clear: both;
display: block;
}
.item {
padding: 5%;
float: left;
}
.item-a {
width: 30%;
background-color: yellow;
}
.item-b {
width: 50%;
background-color: orange;
}
.footer {
clear: both;
background-color: gray;
}
색상이 잘 들어간 것을 확인 할 수 있습니다.
참고로 ::after를 사용하지 않고, .container에 overflow:hidden;을 이용하는 방법도 있습니다.
다른글
2019/03/17 - [WEB/HTML&CSS] - HTML에서 이미지 가져오기 (img 태그)
2019/03/18 - [WEB/HTML&CSS] - HTML 오디오 태그 (Audio, iframe) 음악 자동재생
'WEB > HTML&CSS' 카테고리의 다른 글
| CSS의 기본정리. 반드시 알아야하는 CSS 내용 (0) | 2019.03.19 |
|---|---|
| HTML 오디오 태그 (Audio, iframe) 음악 자동재생 (3) | 2019.03.18 |
| HTML에서 이미지 가져오기 (img 태그) (1) | 2019.03.17 |
| HTML 테이블 사용방법 (table) (0) | 2019.03.16 |
| HTML에서 리스트 사용방법(ol, ul, li) (0) | 2019.03.15 |
최근댓글