CSS 속성을 활용하면 HTML에서 세 개의 <div> 요소를 아주 쉽게 나란히 배치할 수 있습니다. 가장 기본적인 방법은 CSS의 float 속성을 사용하는 것입니다.
각 div에 float:left;를 적용하면 요소들이 왼쪽부터 차례대로 배치됩니다. 여기에 height:100px;로 높이를 지정하고, margin으로 요소 사이의 간격을 설정하면 깔끔한 레이아웃을 완성할 수 있습니다.
예제
아래 코드를 실행해 보면 세 개의 <div>가 나란히 배치된 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML div</title> </head> <body> <div style="width: 100px; float:left; height:100px; background:gray; margin:10px"> First DIV </div> <div style="width: 100px; float:left; height:100px; background:yellow; margin:10px"> Second DIV </div> <div style="width: 100px; float:left; height:100px; background:red; margin:10px"> Third DIV </div> </body> </html>
더 나은 방법: Flexbox 활용하기
float는 전통적으로 널리 사용되던 방식이지만, 최신 웹 개발에서는 Flexbox(display:flex)를 사용하는 것이 권장됩니다. 부모 컨테이너에 display:flex만 선언하면 자식 요소들이 자동으로 가로 방향으로 정렬되고, gap 속성으로 요소 간 간격도 훨씬 직관적으로 조절할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML div Flexbox</title>
<style>
.container { display:flex; gap:10px; }
.box { width:100px; height:100px; }
</style>
</head>
<body>
<div class="container">
<div class="box" style="background:gray">First DIV</div>
<div class="box" style="background:yellow">Second DIV</div>
<div class="box" style="background:red">Third DIV</div>
</div>
</body>
</html>