topic★★★★★난이도 · 약 15분

box-sizing과 단위의 세계

border-box로 크기 계산 단순화. px, rem, %, vh/vw 단위를 상황에 맞게 사용한다.

#box-sizing#border-box#rem#px#단위

왜 배우는가

width: 300px + padding: 20px + border: 1px이면 실제 너비는 342px이다. box-sizing: border-box 한 줄이 이 함정을 해결한다.

같은 width: 300px인데 실제 크기가 다르다?

구분	content-box (기본값)	border-box (권장)
width 의미	content만 포함	content + padding + border 포함
width: 300px 실제	300 + 20x2 + 1x2 = 342px	딱 300px!

border-box: width에 padding + border가 포함됨 거의 모든 프로젝트에서 전역 설정으로 사용: `*, *::before, *::after { box-sizing: border-box; }`

px만 쓰면 안 되나요? 상황에 맞는 단위가 있습니다

단위	설명
px	고정 크기 (1px = 화면 1점)
rem	루트(html) font-size 기준 배수 (반응형 권장)
%	부모 요소 기준 비율
vh / vw	뷰포트 높이/너비의 1% (전체 화면 기준)

실무 팁: 글꼴 크기 -> rem, 간격 -> rem 또는 px, 레이아웃 너비 -> %, 전체 화면 -> vh/vw

홈페이지 콘텐츠를 가운데 정렬해봅시다

css

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #FFF8F0;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

box-sizing: border-box 전역 설정 + margin: 0 auto로 수평 가운데 정렬.

속성	설명
content-box	기본값 — width가 content만 포함 (padding/border 별도)
border-box	권장 — width에 padding과 border 포함 계산

단위	설명
px	고정 단위 — 화면 크기와 무관하게 일정
rem	루트 글꼴 기준 — 반응형에 적합 (1rem = 16px 기본)
%	부모 요소 기준 비율로 크기 지정
vw/vh	뷰포트 기준 — 화면 전체 너비/높이의 비율

* { box-sizing: border-box; }를 CSS 첫 줄에 넣으면 레이아웃이 훨씬 편합니다.

실기 드릴 3문항

edit실기 드릴 · 단답형

box-sizing: border-box를 적용하면 width에 무엇이 포함되는가?

space_bar실기 드릴 · 빈칸 채우기

블록 요소를 수평 가운데 정렬하려면 margin: 0 ___ 를 사용한다.

edit실기 드릴 · 단답형

display: none과 visibility: hidden의 차이는?