CSS 2단 레이아웃 — float · width · margin auto 완전 정리

 

 

Web Development · CSS Layout

CSS 2단 레이아웃 —
float · width · margin auto 완전 정리

본문 + 사이드바를 한 줄에 배치하는 가장 기본적인 레이아웃 패턴

시작 오늘 분석할 코드

화면 가운데에 컨테이너를 두고, 그 안에서 본문(#contents)과 사이드바(#sidebar)를 좌우로 나란히 배치하는 코드다. 핵심은 float로 좌우 정렬 + clear로 다음 줄 복귀 두 가지다.

<style> div { border: 1px solid #ccc; /* 모든 영역에 테두리 */ } #container { width: 960px; /* 컨테이너 너비 */ padding: 20px; margin: 0 auto; /* 화면 중앙 */ } #header { padding: 20px; margin-bottom: 20px; } #contents { width: 620px; padding: 20px; float: left; /* 왼쪽으로 띄움 */ margin-bottom: 20px; } #sidebar { width: 220px; padding: 20px; float: right; /* 오른쪽으로 띄움 */ margin-bottom: 20px; background: #eee; } #footer { clear: both; /* 양쪽 플로팅 해제 */ padding: 20px; } </style>

실제 출력 미리보기

#header · 사이트 제목

#contents (float:left, 620px)
본문 영역. 너비를 정확히 맞춰야 사이드바와 한 줄에 배치된다.

#sidebar (float:right, 220px)
회색 배경의 사이드바.

#footer (clear:both) · 다시 한 줄 전체

용어 용어 정리

container전체 콘텐츠를 감싸는 가장 바깥 박스

id (#)페이지에 한 번만 쓰는 고유 이름

float요소를 왼쪽/오른쪽으로 띄워 옆에 배치 가능하게

clear앞선 float의 영향을 끊고 다음 줄로 내림

margin: 0 auto위·아래 0, 좌·우 자동 → 가로 중앙 정렬

width박스의 가로 너비

padding박스 안쪽 여백 (테두리 ↔ 내용)

margin-bottom박스 아래 바깥 여백

---

1 #container — 가운데 정렬의 핵심

왜 width와 margin을 함께 써야 하는가?

가로 가운데 정렬의 공식은 "고정 너비 + 좌우 margin auto"이다. 둘 중 하나만 있으면 작동하지 않는다.

width: 960px → 화면이 1920px이라도 박스는 960px만 차지 margin: 0 auto → 남는 좌우 공간 (1920 - 960 = 960px)을 똑같이 480px씩 분배 → 결과: 가운데 정렬

width 없을 때

div는 기본 100% → margin auto가 분배할 빈 공간이 0 → 중앙정렬 안 됨

width + margin auto

남는 공간이 생김 → 좌우 균등 분배 → 가운데 정렬 완성

---

2 float — 좌우로 띄우기

float이 정확히 무엇을 하는가?

원래 div는 블록 요소라서 한 줄을 통째로 차지한다. 그래서 두 div를 나란히 두려고 해도 위·아래로 쌓인다. float은 박스를 일반 흐름에서 빼내 왼쪽이나 오른쪽 끝으로 보내고, 뒤따라 오는 콘텐츠가 옆 빈 공간으로 흘러들어가게 만든다.

기본 (float 없음) ┌────────────────┐ │ #contents │ └────────────────┘ ┌────────────────┐ │ #sidebar │ └────────────────┘ float:left + float:right ┌──────────┐ ┌────┐ │#contents │ │side│ └──────────┘ └────┘

※ 왜 width를 정확히 맞춰야 하는가

• contents 620 + sidebar 220 = 840 (좌우 padding 20 + 20 = 40 포함하면 합쳐서 920)
• container 960 - padding 40 = 사용 가능 920px → 정확히 들어맞음
• 한 픽셀이라도 넘치면 사이드바가 아래로 떨어진다

반응형

---

3 clear — float 끝내고 다음 줄로

clear:both이 없으면 어떻게 되는가?

float된 요소는 일반 흐름에서 빠져있기 때문에, 그 아래에 오는 footer가 float된 영역 위로 올라타거나 옆에 끼어든다. clear:both는 "왼쪽/오른쪽 float이 끝날 때까지 기다렸다가 그 아래로 가라"는 명령이다.

clear 없음: [contents][sidebar] [footer] ← 옆이나 위로 끼어듦 ✗ clear: both: [contents][sidebar] ─── footer는 둘 다 끝난 후 ─── [ footer ] ✓

값	의미
clear: left	왼쪽 float 끝날 때까지 기다림
clear: right	오른쪽 float 끝날 때까지 기다림
clear: both	양쪽 모두 끝날 때까지 기다림 (가장 많이 씀)

---

4 박스가 만들어지는 흐름

1

#container 시작화면 폭 - 960px의 차이를 좌우로 자동 분배 → 가운데 정렬

2

#header 그리기한 줄 전체 차지, 아래 20px 여백

3

#sidebar (float:right)오른쪽 끝에 220px 너비로 띄움

4

#contents (float:left)왼쪽 끝에 620px 너비로 띄움 → sidebar 옆으로 자연스럽게 배치

5

#footer (clear:both)두 float이 끝난 시점의 아래로 이동 → 다시 한 줄 전체

※ HTML 순서는 sidebar가 먼저 등장하지만 float:right 덕분에 시각적으로 오른쪽에 배치된다. HTML 순서와 화면 순서가 달라도 된다는 점이 float의 강점이자 함정.

---

5 자주 하는 실수

실수	증상	해결
너비 합계가 컨테이너보다 큼	사이드바가 아래로 떨어짐	contents + sidebar + 좌우 padding ≤ container 가용폭
footer에 clear 누락	footer가 위로 끼어듦	clear: both 추가
container에 width 없음	가운데 정렬 안 됨	고정 width + margin: 0 auto
모든 div에 border 적용	이중 테두리·디버깅용 그대로 배포	완성 후 div { border: ... } 제거
box-sizing 미설정	padding 추가하면 너비 계산 어긋남	* { box-sizing: border-box } 권장

---

6 요즘은 어떻게 만드나?

이 코드는 전통적인 float 레이아웃이다. 개념을 익히는 데 좋지만, 현업에서는 더 간단한 방법이 표준이다.

옛날 (float)

너비를 픽셀로 맞춰야 하고, clear 까먹으면 무너짐. 반응형 별도 처리.

지금 (flex / grid)

display: flex 또는 grid 한 줄로 끝. clear 불필요. 반응형도 쉬움.

※ 기초는 float로 이해하고, 실제 작성은 flex / grid로 하는 게 정석.

---

핵심 한 줄 요약

#container고정 width + margin: 0 auto = 가운데 정렬

float: left박스를 왼쪽으로 띄워 옆에 배치 가능

float: right박스를 오른쪽으로 띄움 (HTML 순서 무관)

clear: both앞선 float을 끊고 다음 줄로 복귀

너비 공식contents + sidebar + 패딩 ≤ container

id 셀렉터# 사용, 페이지당 1번만

실무개념은 float, 작성은 flex/grid

Tags

#2단레이아웃 #float #float-left #float-right #clear #margin-auto #가운데정렬 #컨테이너 #사이드바 #id셀렉터 #flex #grid #CSS레이아웃 #박스모델 #웹개발 #티스토리

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

2단레이아웃, float, float-left, float-right, clear, margin-auto, 가운데정렬, 컨테이너, 사이드바, id셀렉터, flex, grid, CSS레이아웃, 박스모델, 웹개발, 티스토리