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;
}
반응형