CSS의 float은 1) 본문에 이미지를 자연스럽게 삽입할 때 2) 레이아웃을 잡을 때 주로 사용하는 속성으로 block이 길막하는 특징을 해결하고 가로배치 해준다. 최근에는 float을 잘 사용하지 않기 때문에 이전 코드를 유지보수할 때 필요하다. 즉, "How to fix?"를 알아두자.
float, How to fix?
overflow: hidden;- 부모가 자식요소를 찾는다.clearfix- CSS의 'clear' 속성을 사용. 망가진 레이아웃을 잡는다. (left, right, both)Psuedo Element- HTML에는 존재하지 않는 가상 요소를 만들어준다. 자식 요소가 float 되면 부모 공간(height)이 줄어드니 이 공간을 확보하기 위해 가상 요소를 넣어주면 공간을 다시 차지한다. => 레이아웃이 깨지지 않는다. (::before, ::after 각 요소당 2개씩 사용 가능)
CSS 작업 순서
- HTML을 의미와 구조에 맞게 마크업 한다
- CSS 작업 처리해야 할 요소를 파악한다 (체크리스트로 확인)
- HTML에 Class를 준다 (마크업하면서 넣기)
- 요소를 나누어 하나하나 처리한다 (개발자 도구 보며 확인)
예제
CSS source code
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
letter-spacing: -0.02em;
}
a {
font-size: 18px;
line-height: 20px;
color: #8492a6;
text-decoration: none;
}
ul {
max-width: 540px;
list-style-type: none;
padding-left: 0;
}
.tab-menu {
border-bottom: 1px solid #E5EAEF;
}
.tab-menu::after {
content:'';
display: block;
clear: left;
}
.tab-menu-item {
float: left;
margin-right: 20px;
}
.tab-menu-item {
display: block;
padding: 16px 20px;
}
.tab-menu-item.selected {
border-bottom: 2px solid #2860E1;
}
.tab-menu-item.selected a {
color: #2860E1;
weight: 500px;
}
.tab-menu에 float 적용
1)
.tab-menu {
overflow: hidden;
}
2)
.tab-menu {
content:"";
display: block;
clear: left;
}- 가상요소에서 'content:'';' 반드시 작성한다!
범용적으로 사용하는 clearfix
- 코드가 많아질 경우 미리 만들어 놓고 쓰면 편하다
clearfix::after {
content:'';
display: block;
clear: both;
}HTML source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="tab-menu">
<li class="tab-menu-item">
<a href="#">
Summary
</a>
</li>
<li class="tab-menu-item selected">
<a href="#">
Emails
</a>
</li>
<li class="tab-menu-item">
<a href="#">
Files
</a>
</li>
<li class="tab-menu-item">
<a href="#">
Mentions
</a>
</li>
</ul>
</body>
</html>
기타
- 콘텐츠 간 border 간격은 'margin', 콘텐츠 자체 border는 'padding'
- 요소가 적용되지 않을 때는 display 값을 확인하자. property type에 따라 스타일이 적용되지 않을 수 있다. (예:
<a>는 inline)
출처: '김버그의 HTML&CSS는 재밌다'를 학습하고 정리한 내용입니다.
