이번 편의 결과물: 3페이지 전체의 기본 여백·목록 스타일이 사라지고, 이후 모든 크기 계산이 border-box 기준으로 통일됩니다. 다루는 개념: 브라우저 기본 스타일 제거(모던 리셋), 전역 box-sizing: border-box, 리셋을 스타일시트 맨 위에 두는 이유
브라우저는 <body>·<h1>·<ul> 같은 태그에 자체 기본 여백을 줍니다. 브라우저마다 값이 조금씩 다르고, 시안대로 간격을 맞추려면 이 기본값부터 지워야 합니다.
이 편에서 만드는 파일
web-practice/portfolio/
└── css/
└── styles.css ~ (맨 위에 리셋 + box-sizing 규칙 추가)개념 정리
브라우저가 기본으로 주는 스타일 중 실무에서 자주 지우는 항목입니다.
| 요소 | 기본 스타일 | 왜 지우는가 |
|---|---|---|
body, h1–h6, p | 바깥 여백(margin) | 시안의 간격 스케일을 처음부터 새로 설계하기 위해 |
ul, ol | 안쪽 여백(padding)과 불릿/번호 | 내비게이션·카드 리스트처럼 불릿이 필요 없는 곳이 많음 |
img | 인라인 요소 취급(하단에 빈 틈 생김) | display: block으로 바꿔 틈을 없앰 |
box-sizing은 요소의 너비·높이를 계산할 때 padding과 border를 포함할지 정합니다.
| 값 | 너비 계산 방식 |
|---|---|
content-box(기본값) | width는 내용 영역만. 실제 차지 너비는 width + padding + border |
border-box | width에 padding과 border가 이미 포함됨. 실제 차지 너비가 width 그대로 |
content-box에서는 width: 300px에 padding: 20px를 주면 실제로 340px를 차지해, 카드 여러 개를 나란히 배치할 때 계산이 매번 어긋납니다. border-box로 통일하면 width 값이 곧 실제 크기이므로 레이아웃 계산이 단순해집니다. 그래서 실무에서는 거의 항상 전역으로 border-box를 적용합니다.
리셋과 box-sizing 규칙은 스타일시트 맨 위에 둡니다. 캐스케이드는 명시도가 같으면 나중 규칙이 이기므로, 리셋을 먼저 적용해 두어야 그 아래에 오는 실제 디자인 규칙들이 브라우저 기본값과 부딪히지 않고 항상 리셋 위에 깔끔하게 얹힙니다.
실습
1. styles.css 열기
web-practice/portfolio/css/styles.css를 엽니다. 02편까지 header a·.logo 규칙이 들어 있습니다.
2. 리셋과 box-sizing 추가
파일 맨 위에 리셋 블록을 추가합니다. 지금까지 쌓인 styles.css 전체는 다음과 같습니다.
/* web-practice/portfolio/css/styles.css */
/* --- 리셋: 브라우저 기본 스타일 제거 --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
h1,
h2,
h3,
p,
figure {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
img {
display: block;
max-width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
}
/* --- 여기부터 실제 디자인 규칙 --- */
header a {
color: #1f2328;
text-decoration: none;
}
.logo {
color: #0969da;
font-weight: 700;
}*(전체 선택자)와 ::before·::after(가상 요소)까지 묶어 box-sizing: border-box를 지정하면, 앞으로 만들 모든 요소에 예외 없이 적용됩니다. button·input·select·textarea에 font: inherit을 준 것은 폼 요소가 브라우저 기본 글꼴을 따로 쓰는 관행이 있어, 05편에서 타이포그래피를 적용할 때 폼도 같은 글꼴을 쓰게 하기 위한 사전 정리입니다.
3. 실행
세 페이지를 모두 새로고침합니다.
4. 확인
index.html의 히어로 제목과 문단 사이 간격이 브라우저 기본 여백 없이 붙어 보입니다(정상입니다. 간격은 07편에서 다시 채웁니다).contact.html의 FAQ<details>목록에서 불릿이 사라졌습니다.- DevTools에서 아무
<div>나 선택해 Computed 탭을 열면box-sizing: border-box가 적용된 것이 보입니다.
직접 해보기
임시로 아무 요소에 width: 300px; padding: 40px; border: 10px solid black;을 주고, box-sizing을 content-box로 바꿨다가 border-box로 바꿔보며 DevTools의 박스 모델 다이어그램(Computed 탭 하단)에서 실제 차지 너비가 어떻게 달라지는지 비교해 보세요.
확인 방법
content-box에서는 다이어그램의 전체 너비가 300 + 40*2 + 10*2 = 400px로 표시됩니다. border-box에서는 padding과 border가 300px 안에 포함되어 전체 너비가 300px 그대로 유지됩니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 리셋을 넣었는데도 기본 여백이 남는다 | 리셋 블록을 스타일시트 아래쪽에 둠 | 리셋을 파일 맨 위로 옮겨 이후 규칙보다 먼저 캐스케이드에 들어가게 함 |
| 리스트 화살표·번호가 필요한 곳까지 사라졌다 | list-style: none을 모든 ul/ol에 일괄 적용 | 번호가 필요한 목록엔 해당 부분만 별도 클래스로 list-style: decimal 등을 다시 지정 |
| 이미지 아래 미세한 빈 틈이 안 없어진다 | img에 display: block을 빠뜨림 | 리셋의 img { display: block; } 줄 확인 |
box-sizing을 특정 요소에만 줬다 | * 전체 선택자 대신 개별 태그만 지정 | *, *::before, *::after 형태로 전역 적용 |