고정 그리드 레이아웃 — px 기반 wrapper · float 2단 완전 정리

 

 

Web Development · Layout

고정 그리드 레이아웃 — px로 짠 2단 구조의 한계

wrapper 960px · float 본문/사이드바 · clear:both · 모바일에서 옆이 잘림

시작 오늘 분석할 코드

2010년대 초반 웹 표준 학습의 출발점이었던 고정폭 레이아웃이다. #wrapper를 960px 고정폭으로 잡고, 그 안에 헤더(120px) → 본문(600px float-left) + 사이드바(300px float-right) → 푸터를 배치한다. 창 너비가 960px보다 좁아지면 가로 스크롤이 생긴다 — 즉 모바일·작은 노트북에선 깨진다.

#wrapper { width:960px; margin:0 auto; } header { width:960px; height:120px; background:#066cfa; } .content { float:left; width:600px; height:400px; padding:15px; background:#ffd800; } .right-side{ float:right; width:300px; height:400px; padding:15px; background:#00ff90; } footer { clear:both; height:120px; background:#c3590a; }

실제 출력 미리보기

고정 그리드 레이아웃 (960px)

본문 · 600px 고정

사이드바 · 300px 고정

푸터

이 미니 미리보기를 1/2 축소했지만, 실제 코드는 화면이 좁으면 옆이 잘리고 가로 스크롤 발생

용어 용어 정리

고정 레이아웃px 등 절대 단위로 너비 지정

가변 레이아웃% / em / vw 등 상대 단위로 지정

wrapper전체 콘텐츠를 감싸는 컨테이너

margin: 0 auto상하 0, 좌우 자동 → 가운데 정렬

float왼쪽/오른쪽으로 띄움 — 옛 정렬 도구

clear:bothfloat 해제 — 다음 요소를 아래로

px 단위고정 픽셀 — 화면 크기와 무관

반응형 ✗이 코드는 모바일에서 깨짐

---

1 왜 wrapper가 필요한가?

#wrapper는 전체 페이지 폭을 통제하는 단 하나의 박스다. margin: 0 auto를 줘서 화면이 넓을 때(예: 1920px 모니터) 가운데 960px만 콘텐츠로 쓰고 양옆은 빈 공간으로 비워둔다. 만약 wrapper가 없다면 콘텐츠가 화면 끝까지 늘어나서 줄바꿈이 너무 길어지고 가독성이 떨어진다.

[wrapper 없음] [wrapper 960px] ┌──────────────────────────────┐ ┌─────┬──────────┬─────┐ │ 콘텐츠가 화면 끝까지 │ │ 빈 │ 콘텐츠 │ 빈 │ │ 가독성 ↓ │ │공간 │ 960px │공간 │ └──────────────────────────────┘ └─────┴──────────┴─────┘

---

2 margin: 0 auto의 작동 원리

"위·아래 0, 좌·우 자동"이다. 좌·우 auto는 "남은 공간을 양쪽으로 균등 분배"하므로 결과적으로 박스가 가운데로 온다. 이 트릭이 작동하려면 두 가지 조건이 필요하다.

※ margin auto 작동 조건

• 너비(width)가 명시되어 있을 것 — 그래야 "남은 공간"이 계산됨
• display가 block이거나 그에 준할 것 — inline은 너비 자체가 없음
• 이번 코드: #wrapper { width:960px }라 두 조건 만족

---

3 float left + right로 2단 만들기

옛날 CSS는 좌우 2단 레이아웃을 만들 직접적인 도구가 없었다. float를 활용해 "본문은 왼쪽으로 띄우고, 사이드바는 오른쪽으로 띄우기"로 같은 가로 줄에 두 박스를 놓았다.

.content { float:left; width:600px; } ← 왼쪽으로 .right-side { float:right; width:300px; } ← 오른쪽으로 합 900px (+padding 30+30) wrapper 960px 안에 모두 들어감 footer { clear:both; } ← float 해제 → 아래로 떨어짐

※ float 사용 시 부모 높이가 사라지는 함정이 있다(자식이 모두 float이면). 이번 코드는 footer의 clear:both가 footer를 아래로 밀어내 다음 영역과 겹치는 것을 막는다.

---

 

반응형

 

4 너비 합산 — padding 포함 여부

이번 코드의 .content는 width:600px + padding:15px다. 기본 box-sizing(content-box)에서는 width가 콘텐츠 영역만의 너비라, 실제 박스가 차지하는 가로 = width + 좌우 padding + 좌우 border다.

요소	width	padding	실제 차지 폭
.content	600px	좌우 15px+15px	630px
.right-side	300px	좌우 15px+15px	330px
합	—	—	960px ✓

※ box-sizing: border-box로 단순화

• 현대식: * { box-sizing: border-box; } 한 줄
• 이러면 width:600px에 padding이 포함되어 항상 600px 박스
• 너비 계산이 직관적이라 실무 표준

---

5 고정 레이아웃의 한계

이 구조의 가장 큰 약점은 화면이 960px보다 좁을 때 콘텐츠가 잘린다는 점이다. 모바일은 보통 360~430px이라, 폭의 1/3만 보이고 옆은 가로 스크롤로 봐야 한다.

고정 (이번 코드)

• 모바일에서 가로 스크롤 발생
• 큰 모니터에선 양옆이 비어 빈 공간
• 2010년대 초까진 이게 표준이었음

가변 (다음 단계)

• %·em·vw 단위로 화면 크기에 따라 비율 조정
• 모바일·태블릿·PC 모두 자연스러움
• 현대 웹의 기본 — 곧 이어 fluid 패턴 학습

---

6 자주 하는 실수

실수	증상	해결
wrapper width 빠뜨림	margin:auto 가운데 정렬 안 됨	width 명시
content + sidebar 합 > wrapper	사이드바가 아래로 떨어짐	너비 합 + padding + border 검산
footer에 clear 누락	footer가 본문·사이드바 옆으로 들어감	clear:both
viewport meta 누락	모바일에서 PC 보기로 축소 표시	<meta name="viewport" ...>
고정 레이아웃 + 모바일	가로 스크롤·잘림	가변 단위(%·em) 또는 미디어쿼리
box-sizing 안 정함	너비 계산 헷갈림	* { box-sizing: border-box }

---

핵심 한 줄 요약

고정 레이아웃px 단위 — 화면이 좁으면 잘림

wrapper 960콘텐츠 폭 통제 + margin auto 가운데

float left/right옛 2단 레이아웃 패턴

clear:bothfloat 해제 — footer 분리

padding 합산content-box 기본 — 너비+padding 별개

box-sizingborder-box로 통일하면 직관적

한계모바일 부적합 — 가변/반응형으로 진화

Tags

#고정레이아웃 #fixed-layout #wrapper #px단위 #float #clear #2단레이아웃 #box-sizing #border-box #반응형 #CSS #HTML #웹개발 #티스토리

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

고정레이아웃, fixed-layout, wrapper, px단위, float, clear, 2단레이아웃, box-sizing, content-box, border-box, 반응형, CSS, HTML, 웹개발, 티스토리