영벨롭 개발 일지

[CSS] float속성과 overflow hidden속성 : 블록 요소 한 줄에 정렬하기 본문

Front-end/HTML & CSS

[CSS] float속성과 overflow hidden속성 : 블록 요소 한 줄에 정렬하기

영벨롭 2022. 3. 31. 13:46

 우선 다음과 같이 코드를 작성해보겠습니다. 

 

<!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>Document</title>
  <link rel="stylesheet" href="main.css">
  <script defer src="./main.js"></script>
</head>

<body>
  <div class="hello">Hello</div>
  <div class="world">World</div>
</body>

</html>

 

 <div> 태그는 블록 요소로, 요소가 수직으로 쌓이는 것을 확인할 수 있습니다. 

 

 이 두 개의 <div> 태그를 각각 왼쪽, 오른쪽에 같은 줄에 위치시키기 위해선 어떤 속성을 부여해야할까요?

 

 먼저 text-align 속성을 사용해보겠습니다. 

 

.hello {
  font-size: 30px;
  font-weight: bold;

  text-align: left;
}

.world {
  font-size: 30px;
  font-weight: bold;

  text-align: right;
}

 

 

 각 요소들이 왼쪽, 오른쪽 정렬은 되었지만 여전히 다른 줄에 위치해있죠?

 

 블록 요소를 같은줄에 왼쪽, 오른쪽 정렬하기 위해선 float 속성을 사용합니다. 

 

 float 말 그대로 요소를 '둥둥 띄우는 것'입니다.

값 설명
none 띄우지 않음(default)
left 왼쪽으로 띄움
right 오른쪽으로 띄움
initial 기본값으로 설정
inherit 부모 요소로부터 상속

 

코드를 고쳐보겠습니다. 

 

.hello {
  font-size: 30px;
  font-weight: bold;

  float: left;
}

.world {
  font-size: 30px;
  font-weight: bold;

  float: right;
}

 한 줄에 잘 정렬이 된 것을 확인할 수 있습니다. 

 

 근데 이때 float의 문제점이 있습니다. 

 

 float 속성을 사용한 요소들은 '둥둥 띄어져있기' 때문에 다른 요소들과 겹칠 수 있습니다. 

 

<body>
  <div class="box">
    <div class="hello">Hello</div>
    <div class="world">World</div>
    <div class="name">My name is 홍길동</div>
  </div>
</body>

 

.box {
  border: 3px solid black;
  width: 400px;
  height: 200px;
}

.hello {
  font-size: 30px;
  font-weight: bold;

  float: left;
}

.world {
  font-size: 30px;
  font-weight: bold;

  float: right;
}

.name {
  font-size: 30px;
  color: blue;
}

 

 name 클래스 요소가 다음 줄에 작성되지 않고 hello와 world 요소와 겹쳐져 나오는 것을 확인할 수 있습니다. 

 

 이것을 막기 위해 float 속성을 사용한 요소에 overflow: hidden; 속성을 추가해줘야 합니다. 

 

 

<body>
  <div class="box">
    <div class="float-wrap">
      <div class="hello">Hello</div>
      <div class="world">World</div>
    </div>
    <div class="name">My name is 홍길동</div>
  </div>
</body>

 

.box {
  border: 3px solid black;
  width: 400px;
  height: 200px;
}

.float-wrap {
  overflow: hidden;
}

.hello {
  font-size: 30px;
  font-weight: bold;

  float: left;
}

.world {
  font-size: 30px;
  font-weight: bold;

  float: right;
}

.name {
  font-size: 30px;
  color: blue;
}

 

반응형
저작자표시 비영리 변경금지

'Front-end > HTML & CSS' 카테고리의 다른 글

[CSS]박스 모델 Box Model: width, height, box-sizing, display 속성  (0) 2022.04.06
[CSS]margin과 padding: 박스 외부, 내부 여백  (0) 2022.04.05
[CSS]박스 갖고 놀기: 박스 테두리, 박스 크기, 박스 가운데 정렬, 박스 그림자  (0) 2022.03.30
[CSS]선택자 우선순위: 점수 매기기  (0) 2022.03.29
[CSS] 선택자 종류 살펴보기: 기본, 복합, 가상클래스, 가상요소, 속성  (0) 2022.03.24
'Front-end/HTML & CSS' Related Articles more