HTML DIV 및 블록 요소를 옆으로 배치하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발 초보자 및 CSS 배우는 사람들
• 난이도 관점: 기초~중급 수준

핵심 요약

• CSS float, flexbox, table 속성을 사용해 두 DIV를 옆으로 배치할 수 있음
• flexbox는 반응형 웹 설계(RWD)에 최적화된 추천 방법
• float은 레이아웃 조정 시 추가 처리가 필요하며 table 속성은 사용 빈도가 낮음

섹션별 세부 요약

1. CSS float 속성 사용

• .div-1, .div-2 { float: left }로 두 DIV를 왼쪽으로 플로트
• .div-1 { width: 40% }와 .div-2 { width: 60% }로 너비 지정
• 전체 뷰포트 너비는 100%로 유지되며, 플로트 요소의 정렬과 레이아웃 조정이 복잡
• 단점: 레이아웃 브레이킹, 추가 클리어링 필요

2. CSS flexbox 사용

• 부모 DIV를 .parent-div { display: flex; flex-direction: row }로 설정
• .div-1 { flex-basis: 40% }와 .div-2 { flex-basis: 60% }로 비율 조정
• 반응형 설계(RWD)에 최적화되어 있으며, 자식 요소의 기본 정렬 방식이 단일 행
• 장점: 간단한 구현, 레이아웃 관리 용이

3. CSS table 속성 사용

• .table-section { display: table }로 테이블 구조 생성
• .table-row { display: table-row }와 .table-cell { display: table-cell }로 셀 정의
• .cell-1 { width: 40% }와 .cell-2 { width: 60% }로 너비 조정
• 사용 빈도 낮음: 테이블과 유사한 구조로 인해 모던 웹 개발에서 거의 사용되지 않음

결론

• flexbox를 사용해 반응형 레이아웃을 구현하는 것이 실무에서 가장 권장되는 방법
• display: flex와 flex-basis 속성을 활용해 간단한 구조와 유연한 레이아웃 관리 가능
• float이나 table 속성은 구식 접근법으로, 새 프로젝트에서는 피하는 것이 좋음