TIL 007 | CSS Float

23518 단어 webCSSfrontendCSS

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"만 추가해주면 된다. 나는 재사용성을 중요하게 생각하기 때문에 이 코드가 매우 마음에 들었다.

¿ Windows에 Neovim을 설치하시겠습니까?
UVA 1025_A Spy in the Metro

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage