가변 그리드 + 가변 폰트 — % 너비와 em 글자 크기 완전 정리

 

 

Web Development · Fluid Layout

가변 그리드 레이아웃 + 가변 폰트

% 너비 · em 글자 크기 · padding도 % · 화면 따라 자연스럽게 조정

시작 오늘 분석할 코드

고정 레이아웃의 px 값을 전부 % 또는 em으로 바꾼 버전이다. 화면이 넓어지면 본문도 비례해 넓어지고, 좁아지면 같이 좁아진다. 1.5em 같은 글자 크기 단위 덕분에 폰트도 부모 크기에 맞춰 따라온다.

#wrapper { width:96%; margin:0 auto; } header { width:100%; height:120px; background:#066cfa; } .header-text { font-size:2em; color:white; text-align:center; line-height:120px; } .content { float:left; width:62.5%; padding:1.5625%; font-size:1.5em; } .right-side { float:right; width:31.25%; padding:1.5625%; font-size:1.5em; } footer { clear:both; width:100%; font-size:1.5em; }

실제 출력 미리보기 — 창 크기를 늘렸다 줄여 보세요

가변 그리드 레이아웃

본문 · 62.5%

사이드바 · 31.25%

푸터

너비가 % 비율로 잡혀 있어 화면이 좁아져도 비율 유지

용어 용어 정리

% 단위부모 너비의 비율

em 단위현재(부모) font-size 배수

62.5%600/960 = 가변 본문 폭

31.25%300/960 = 가변 사이드바 폭

1.5625%15/960 = 가변 padding

2em기본 16px → 32px (h1)

1.5em본문 글자 1.5배 (24px)

목표 ÷ 기준% 환산 공식: 원하는px / 부모px ×100

---

1 가변 환산 공식 — "목표 ÷ 기준 × 100"

고정 레이아웃의 px 값들이 어떻게 % 값으로 바뀌었는지 보면 패턴이 보인다. "내가 원하는 px ÷ 부모의 px × 100"이다.

요소	고정값	부모	계산	가변값
.content width	600px	wrapper 960	600/960	62.5%
.right-side width	300px	wrapper 960	300/960	31.25%
padding	15px	wrapper 960	15/960	1.5625%

※ 합계 검산: 본문 62.5% + 사이드바 31.25% + 양쪽 패딩 1.5625%×4 = 100% 정확히 맞아떨어진다.

---

2 em 단위 — 글자 크기로 환산

고정 레이아웃의 font-size:40px이 가변에서 font-size:2em으로 바뀌었다. 1em = 부모의 font-size이고 기본 16px이 보통이라 2em = 32px이다.

[고정 코드] [가변 코드] font-size: 40px font-size: 2em (= 부모 16px×2 = 32px) font-size: 30px ≈ 1.875em font-size: 14px ≈ 0.875em

※ em이 가변인 이유

• 사용자가 브라우저 글자 크기를 키우면 → 부모 폰트가 커짐 → em도 따라 커짐 (접근성)
• 부모 컨테이너의 글자 크기를 한 번에 바꾸면 자식 글자도 비례해서 바뀜
• 주의: 중첩 시 누적 — 부모 1.2em + 자식 1.2em = 1.44em(부모의 1.44배)

---

3 wrapper width: 96% — 왜 100%가 아닌가?

화면 끝까지 콘텐츠가 닿으면 좌우 여백이 없어 답답하다. 96%로 잡으면 좌우 각 2%씩의 숨통이 생긴다. 작은 화면에서도 콘텐츠가 화면 가장자리에 붙지 않고 적당히 떨어져 있다.

[width: 100%] [width: 96%] █콘텐츠가 끝까지█ ░ ▓콘텐츠는 가운데 96%▓ ░ (양옆 2%씩 빈 여백)

---

 

반응형

 

4 가변 레이아웃의 강점

고정 (px)

• 모니터 크기 무관 같은 px
• 모바일에서 잘림
• 큰 모니터에선 빈 공간만

가변 (% / em)

• 화면 너비 따라 비례 조정
• 모바일·태블릿·PC 자연스러움
• 같은 코드 한 벌로 다 대응

---

5 가변의 한계 — 너무 작아지면 답답함

가변만으로는 모바일에서 본문 62.5%가 너무 좁아 글자 줄이 너무 짧아지는 문제가 생긴다. 이때 미디어 쿼리로 "특정 폭 이하에서는 1단으로 바꿔라"라고 추가 규칙을 줘야 진짜 반응형이 된다.

/* 가변만으론 부족 → 미디어 쿼리로 보완 */ @media (max-width: 600px) { .content, .right-side { float: none; width: 100%; ← 둘 다 한 줄에 1단으로 } }

---

6 자주 하는 실수

실수	증상	해결
%·em 환산 계산 잘못	합이 100%를 넘어 사이드바 떨어짐	"목표/기준×100" 공식, 합계 검산
line-height를 px 고정	글자 크기와 맞지 않음	line-height: 1.6 같은 배수 단위
모든 단위를 em	중첩 누적으로 예측 어려움	최상위는 rem, 자식만 em
가변 + box-sizing 안 정함	padding 포함 여부 헷갈림	* { box-sizing: border-box }
가변만 쓰고 미디어 쿼리 없음	모바일에서 너무 좁아 답답	특정 폭 이하 1단 변환
height만 px 고정	글자가 키워졌는데 박스는 그대로 → 잘림	height 대신 min-height 또는 auto

---

핵심 한 줄 요약

가변 환산 공식목표px / 부모px × 100 = %

62.5% / 31.25%600/960 / 300/960 — 본문·사이드바

em부모 font-size 배수 — 글자 가변

wrapper 96%좌우 2%씩 숨통

% 단위 장점화면 따라 비례 조정

한계모바일에선 너무 좁음 → 미디어 쿼리 보완

진짜 반응형가변 + 미디어 쿼리 + 가변 이미지

Tags

#가변레이아웃 #fluid-layout #가변폰트 #em단위 #percent단위 #가변그리드 #wrapper #반응형 #미디어쿼리 #font-size #CSS #HTML #웹개발 #티스토리

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

가변레이아웃, fluid-layout, 가변폰트, em단위, percent단위, 가변그리드, wrapper, 반응형, 미디어쿼리, em환산, font-size, CSS, HTML, 웹개발, 티스토리