CSS 3단 레이아웃 — 좌측 사이드 · 본문 · 우측 사이드 완전 정리

 

 

Web Development · CSS Layout

CSS 3단 레이아웃 —
좌측 사이드 · 본문 · 우측 사이드

float: left · left · right 조합으로 한 줄에 3개의 박스를 배치하는 패턴

시작 오늘 분석할 코드

2단 레이아웃에 사이드바를 하나 더 붙인 형태다. 핵심은 왼쪽 사이드 + 본문은 float:left로 묶고, 오른쪽 사이드는 float:right로 따로 빼는 것.

<style> div { padding: 20px; border: 1px solid #ccc; } #container { width: 960px; margin: 0 auto; } #header { padding: 20px; margin-bottom: 20px; } #left-sidebar { width: 150px; float: left; margin-right: 20px; /* 본문과의 간격 */ margin-bottom: 20px; } #contents { width: 490px; float: left; /* 좌측 사이드 옆에 붙음 */ margin-bottom: 20px; } #right-sidebar { width: 150px; float: right; /* 오른쪽 끝 */ margin-bottom: 20px; } #footer { clear: both; } </style>

실제 출력 미리보기

#header · 사이트 제목

#left-sidebar
(float:left)

#contents (float:left)
본문 영역. 좌측 사이드 옆에 붙는다.

#right-sidebar
(float:right)

#footer (clear:both)

용어 용어 정리

3단한 줄에 박스 3개를 좌·중·우로 배치

float: left왼쪽으로 띄움 — 여러 개면 차례로 옆에 붙음

float: right오른쪽으로 띄움 — HTML에 늦게 와도 오른쪽 끝

margin-right박스 사이 가로 간격

clear: both3개의 float 모두 끝난 뒤 다음 줄로

너비 합산사이드 + 본문 + 사이드 + 마진 = 컨테이너 가용폭

---

1 float을 두 번 left 쓰면 어떻게 되는가?

이 코드의 핵심이다. float: left를 두 번 쓰면 먼저 등장한 박스가 더 왼쪽에 붙고, 다음 박스는 그 옆에 차곡차곡 쌓인다.

HTML 순서: left-sidebar → contents → right-sidebar float: left left right 화면 결과: [left-sidebar][contents] [right-sidebar] ↑ ↑ ↑ 왼쪽으로 그 다음 left라 오른쪽 끝으로 띄움 바로 옆에 따로 떨어져 붙음

※ 왜 왼쪽 둘은 left, 오른쪽은 right인가?

• 둘 다 float: left로 묶으면 좌측에 모여 붙는다
• 오른쪽만 float: right로 빼면 가운데 여유 공간을 신경 쓰지 않고 알아서 끝으로 간다
• 전부 left로 하려면 너비 합 + margin이 컨테이너 가용폭과 정확히 같아야 한다 (어렵고 깨지기 쉬움)

---

2 너비 계산이 핵심이다

한 줄에 들어가려면 모든 너비의 합이 정확해야 한다

3단 레이아웃은 한 픽셀이라도 어긋나면 한 박스가 아래로 떨어진다. 이 코드의 너비 계산을 보자.

container 너비: 960px container 좌우 padding: 20 + 20 = 40px ───────────────────────────────────────── 실제 사용 가능 가로: 920px left-sidebar 박스폭: 150 + (padding 좌우 40) = 190px left-sidebar margin-right: 20px contents 박스폭: 490 + (padding 좌우 40) = 530px right-sidebar 박스폭: 150 + (padding 좌우 40) = 190px ───────────────────────────────────────── 합계: 190 + 20 + 530 + 190 = 930px ❗ 920px를 넘침!

※ 원본 코드는 사실 10px 오버다. 실제로 그려보면 right-sidebar가 다음 줄로 떨어진다. 실무에서 이런 코드를 보면 box-sizing: border-box를 추가하거나, 너비를 다시 계산해야 한다.

box-sizing: border-box로 해결하기

기본 박스 모델은 width = 내용 영역이라 padding을 더하면 박스가 커진다. box-sizing: border-box를 쓰면 width = 박스 전체가 되어 padding이 안쪽으로 들어간다 — 계산이 훨씬 단순해진다.

기본 (content-box)

width 150 + padding 20+20 = 실제 190px
너비 계산 머릿속에서 계속 더해야 함

border-box

width 150 = 실제 150px (padding 포함)
너비 = 보이는 그대로

---

반응형

3 HTML 순서 vs 시각적 순서

이 레이아웃의 흥미로운 점은 HTML 순서와 화면 순서가 다르다는 것이다. 코드는 left → contents → right 순으로 적혀 있지만, 화면에서는 left → contents → right로 보인다 (이건 우연히 일치).

HTML: <left-sidebar> <contents> <right-sidebar> CSS float 적용 후 화면: [ left ][ contents ] [ right ]

※ 실무 — SEO와 접근성

• 스크린 리더는 HTML 순서대로 읽는다
• 중요한 콘텐츠(본문)를 HTML 위쪽에 두는 게 좋다
• 사이드바를 HTML 뒤로 빼고, CSS로 왼쪽에 붙이는 패턴을 많이 씀

---

4 박스가 만들어지는 흐름

1

#container 시작가운데 정렬, 너비 960px

2

#header 그리기한 줄 전체

3

#left-sidebar (float:left)왼쪽 끝, margin-right로 본문과 간격 확보

4

#contents (float:left)이미 left가 차지한 자리 옆에 붙음

5

#right-sidebar (float:right)오른쪽 끝에 따로 배치

6

#footer (clear:both)3개 float이 모두 끝난 시점 아래로

---

5 자주 하는 실수

실수	증상	해결
너비 합이 컨테이너 초과	한 박스가 아래로 떨어짐	너비 다시 계산 또는 box-sizing: border-box
padding 빼고 width만 계산	너비 합산 오류	padding·border까지 포함해서 합산
가운데 박스에 margin-right 누락	오른쪽 사이드와 딱 붙음	margin-right 또는 오른쪽 사이드에 margin-left
footer에 clear 누락	footer가 위로 끼어듦	clear: both
모든 div에 border 적용	사이드바마다 테두리	실제 디자인에 맞춰 선택적으로

---

6 같은 결과를 flex로

요즘 코드에서는 같은 레이아웃을 훨씬 간단하게 만든다.

#container { display: flex; gap: 20px; } #left-sidebar { width: 150px; } #contents { flex: 1; } #right-sidebar { width: 150px; }

※ float:없음 / clear:없음 / 너비 계산 거의 없음. 본문은 flex: 1로 남는 공간을 자동으로 채운다. 반응형도 flex-wrap 한 줄로 끝.

---

핵심 한 줄 요약

3단 구조left:float:left + center:float:left + right:float:right

연속 float:left먼저 적힌 박스가 더 왼쪽 — 옆으로 차곡차곡

너비 공식사이드 + 본문 + 사이드 + 마진 ≤ 컨테이너 가용폭

box-sizingborder-box 권장 — width = 보이는 그대로

margin-right사이드와 본문 사이 간격 확보

clear: bothfooter가 3개 float 아래로 가도록

현대식display: flex + flex: 1로 같은 결과

Tags

#3단레이아웃 #float #float-left #float-right #clear #box-sizing #border-box #margin-right #flex #CSS레이아웃 #사이드바 #박스모델 #HTML5시맨틱 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

3단레이아웃, float, float-left, float-right, clear, box-sizing, border-box, margin-right, flex, CSS레이아웃, 사이드바, 박스모델, HTML5시맨틱, 웹개발, 티스토리