css를 작성할 때 중요한 것 중에 하나는 요소들을 가로배치 하는 일이다. 방법 중에 하나인 float에 대해서 정리하고 간단한 실습 코드를 작성해보려고 한다.
Float
(red에 float를 사용할 때 생기는 모습 _김버그의 css는 재밌다)
1. float 레이아웃
.red{
float:left;
}class="red"에 float:left를 주게 되면 위의 그림처럼 요소가 부유하게 되고 왼쪽에 정렬된다.
.red{
float:left;
}
.yellow{
float:left;
}class="yellow"에도 float:left를 주게 되면 위의 그림에서 아래처럼 바뀌게 된다.
(직접 css를 작성했을 때의 사진이다. class="blue"의 경우 class="red"에 가려져 있다.)
2. clearfix
float를 사용하여 레이아웃을 할 때 문제점
1. 부모 요소나 다른 요소가 float 된 요소의 위치를 인식하지 못한다.
2. block 요소와 다르게 inline 요소는 float 된 요소를 인식하면서 레이아웃이 어긋나게 된다.
3. 부모 요소는 자식 요소 height의 합을 자신의 height로 하는데 float 된 요소는 이를 계산하지 못한다.
이를 해결하기 위해서 사용하는 것 중에 하나가 바로 clear property이다. float를 사용하면서 생기는 레이아웃의 망가짐을 고쳐주는 속성이다. 적용하는 방법은 다음과 같다.
.parent::after{
content: "";
display: block;
clear: left;
}float가 된 자식요소를 감싸고 있는 부모 요소에게 가상 요소를 만들어 주고 여기에 clear property를 주면 된다. 따로 html에 빈 요소를 만들어서 사용할 수도 있지만 정보를 담지 않는 요소를 만드는 것은 좋지 않으므로 가상요소를 적극적으로 사용하는 것이 바람직하다.
3. 간단한 실습예제
아래의 실습예제는 김버그의 HTML&CSS는 재밌다 에서 제공된 내용이다. figma를 통해서 시안을 받아 코드를 작성해 볼 수 있어서 매우 도움이 되었다.
1)
<!-- html -->
<body>
<ul class="menu">
<li class="menu-item">
<a href="#">Summary</a>
</li>
<li class="menu-item">
<a href="#">Emails</a>
</li>
<li class="menu-item">
<a href="#">Files</a>
</li>
<li class="menu-item">
<a href="#">Mentions</a>
</li>
</ul>
</body>/*css*/
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
letter-spacing: -0.02em;
background-color: black;
max-width: 540px;
}
a {
font-size: 18px;
line-height: 20px;
color: #8492a6;
text-decoration: none;
}
.menu {
list-style-type: none;
padding-left: 0;
background-color: #fff;
border-bottom: 1px solid #e5eaef;
}
.menu::after {
content: "";
display: block;
clear: left;
}
.menu-item {
float: left;
margin-right: 16px;
}
.menu-item a {
padding: 16px 20px;
display: block;
}
.menu-item:hover {
border-bottom: 2px solid #2860e1;
}
.menu-item:hover a {
color: #2860e1;
font-size: 18px;
font-weight: 500;
}menu-item class를 가진 요소들을 float:left 를 통해서 가로배치 했다. 이를 감싸고 있는 부모 요소 menu에 clear:left를 적용해서 레이아웃이 깨지지 않도록 조치했다.
2)
<!-- html -->
<body>
<div class="card">
<img src="./assets/user.jpeg" alt="고객지원팀" class="card-user" />
<div class="card-content">
<h1>RE: 안녕하세요 배송 관련 문의드립니다</h1>
<strong>
고객지원팀
</strong>
<p>
안녕하세요 준님. 문의 드린 사항에 대한 답변드립니다. 지난 12...
</p>
</div>
</div>
</body>/*css*/
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Noto Sans KR", sans-serif;
letter-spacing: -0.02em;
background-color: black;
}
h1 {
font-size: 16px;
font-weight: 400;
color: #1f2d3d;
line-height: 1.25;
}
strong {
font-size: 14px;
font-weight: 400;
color: #afb3b9;
line-height: 1.4285714286;
}
p {
font-size: 16px;
color: #79818b;
line-height: 1.5;
}
.card {
max-width: 540px;
padding: 20px 20px;
background-color: #fff;
}
.card::after {
content: "";
display: block;
clear: left;
}
.card-user {
width: 44px;
height: 44px;
border-radius: 50%;
float: left;
margin-right: 20px;
}
.card-content {
float: left;
}
.card-content h1 {
margin-bottom: 4px;
}
.card-content strong {
display: block;
margin-bottom: 12px;
}
float:left를 통해서 유저 이미지와 컨텐츠를 가로 배치하였다. 레이아웃을 깨지지 않게 하기 위해서 card class에 가상요소를 추가하고 clear:left를 적용하였다.
기억하고 싶은 코드
clearfix::after{
content: "";
display: block;
clear: both;
} 위의 실습 코드에는 나오지 않지만 기억하고 싶은 코드는 clearfix::after라는 가상요소이다. float를 사용할 때마다 추가적으로 가상요소를 만드는 일은 효율적이지 못하다. 그렇기 때문에 clearfix::after라는 가상요소를 만들어두고 필요한 요소에 class="clearfix"만 추가해주면 된다. 나는 재사용성을 중요하게 생각하기 때문에 이 코드가 매우 마음에 들었다.
