<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="Kim Pilsu">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header id="header" class="wrap">
<img src="./images/layout/header.png" alt="naver_header">
</header>
<div id="container" class="wrap">
<div id="container_left">
<img src="./images/layout/container_left.png" alt="naver_container">
</div>
<div id="container_right">
<img src="./images/layout/container_right.png" alt="naver_container">
</div>
</div>
<footer id="footer">
<div class="wrap">
<img src="./images/layout/footer.png" alt="naver_footer">
</div>
</footer>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0;}
li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
.wrap{width: 1282px; margin: 0 auto; outline: 1px dotted red;}
#container_left{float: left; outline: 1px dotted red;}
#container_right{float: right; outline: 1px dotted red;}
#container::after{outline: 1px dotted red; display: block; clear: both; content: ''; }
#footer{background-color: #f5f6f7;}
인데...
#container::after{outline: 1px dotted red; display: block; clear: both; content: ''; }
가
이 부분이 영역 잡아주는? 그러니까 clear:both 해주는? 그런 거라고 한다..
float의 특성때문에.
float가 똑 떼다가 튀어나오게 하는거기 때문에 좀.. 자리를 잡지 않는다고 할까? 기존의 것들이랑 별개의 것들이라고 여기기 때문에.. 별개라기 보다는 그 흐름에서 뺀다.
마치 포토샾 레이어 처럼 위층의 ..
어 float는 기존의 흐름에서 벗어나게 시킨다. 그래서 float fixed 등을 이용해 어느 한 쪽에 고정도 시킬 수 있는거고,
즉 .wrap의 자식 요소에서 벗어난 느낌이랄까..? 그러니까 css에서 지정하는 용도로는 사용할 수 있지만, .wrap 입장에서 감쌀 자식들이 없기 때문에, 높이가 0이 된다. 그래서 배경색을 지정해도 아무것도 칠해지지 않는 것이다. 칠할 높이가 존재하지 않아서.
#container::after{display: block; clear: both; content: ''; }
이거는 after, 후에 블록요소, clear: both로
clear: both는 일단 말 그대로 양쪽을 clear 시키고, 대신 문서흐름 상 위쪽의 다음 요소로 이동 시키는 것이다. 즉 float를 통해 문서흐름 상 벗어나게 시켰다면, 이 clear: both로 다시 문서흐름 상에 집어넣을 수 있다.
근데 양쪽을 clear, 다 지워버리니, 딱 블럭요소가 자리를 차지하는거랑 같지 않은가?
그래서 display: block 하고, clear: both, 뭔가 자리를 인식할 컨텐츠를 집어넣기 위해 content: ""하고, display:block하면 container를 문서 흐름상의 한 공간으로 인식시킬 수 있다.
이렇게 안하면 문서흐름 상 자리를 차지하지 않기 때문에 의도한 바처럼 나타나지 않을 수 있다.
여튼 문서 흐름 상 자리를 차지 시키기 위한 삼종세트.
#container::after{display: block; clear: both; content: ''; }
float는 원래 이미지와 그림의 정렬을 위해서 있던 거임
형제요소에 clear: both; 줘도 같은 효과 나옴
clear: both는 float를 상속받지 않겠다는 거임
'프론트엔드-코드 > CSS' 카테고리의 다른 글
| 메뉴영역은 보통 높이까지 지정함. (0) | 2023.07.17 |
|---|---|
| float 해제방법 5가지 (0) | 2023.07.17 |
| 가상클래스 선택자 (0) | 2023.07.12 |
| 선택자 2 (0) | 2023.07.12 |
| 선택자 (0) | 2023.07.11 |