float
레이어 배치하기
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
div {border: 2px solid deeppink; width: 100px; height: 100px;}
<style>
</head>
<body>
<div>BOX1</div>
<div>BOX2</div>
<div>BOX3</div>
<div class="box4">BOX4</div>
</body>
</html>
div 블럭요소의 세로 배치를 가로 배치로 변경
<!d=DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
div {border: 1px solid plum; width: 100px; height: 100px; float: left;}
.box {float: right;}
</style>
</head>
<body>
<div>BOX1</div>
<div>BOX2</div>
<div>BOX3</div>
<div class="box4">BOX4</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| [CSS] 부모자식요소 (0) | 2024.06.01 |
|---|---|
| [CSS] z-index (0) | 2024.06.01 |
| [CSS] sticky (0) | 2024.06.01 |
| [CSS] fixed (0) | 2024.06.01 |
| [CSS] relative (0) | 2024.05.31 |
