두 개의 div를 나란히 배치하기
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"> 첫 번째 DIV </div> <div style="width: 100px; float:left; height:100px; background:yellow; margin:10px"> 두 번째 DIV </div> </body> </html>
참고: 더 현대적인 방법, Flexbox
float는 오랫동안 사용되어 온 방식이지만, 부모 요소의 높이 무너짐(collapse) 문제 등 관리해야 할 사항이 있습니다. 최근에는 Flexbox를 사용하는 것이 권장됩니다. 부모 컨테이너에 display: flex;만 지정하면 자식 요소들이 자동으로 나란히 배치되며, 정렬과 간격 조절도 훨씬 유연합니다.
<div style="display:flex;"> <div style="width:100px; height:100px; background:gray; margin:10px">첫 번째 DIV</div> <div style="width:100px; height:100px; background:yellow; margin:10px">두 번째 DIV</div> </div>
간단한 레이아웃이라면 float로도 충분하지만, 복잡한 반응형 레이아웃을 구성할 때는 Flexbox나 Grid를 활용하는 것이 좋습니다.