CSS 박스의 실제 크기와 최종 적용 스타일은 어떻게 확인하나요?
CSS의 실제 크기는 내용·padding·border·margin과 box-sizing으로 결정됩니다. 스타일이 예상과 다르면 개발자 도구에서 선택자 우선순위와 최종 적용 규칙을 함께 확인합니다.
적용 조건·범위: index.html과 style.css가 연결된 상태를 기준으로 설명합니다.
공식 문서 참고: MDN: 박스 모델과 content-box·border-box 계산 · MDN: CSS 캐스케이드가 최종 스타일을 결정하는 순서
독립 실습: 박스 너비와 선택자 우선순위 확인
CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기 · 독립 실습
한 카드의 실제 너비와 문단 글자색을 CSS의 box-sizing·선택자와 비교하세요.
예제 크게 보기 (새 탭)TaskFlow 파일이 없어도 됩니다. 같은 폴더에 index.html과 style.css를 만들고 index.html을 브라우저에서 여세요.
index.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 박스 실습</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="card">
<h1>박스 모델</h1>
<p class="card__text">어떤 색이 적용될까요?</p>
</main>
</body>
</html>
style.css
body {
margin: 0;
font-family: sans-serif;
}
.card {
box-sizing: content-box;
width: 240px;
padding: 20px;
border: 1px solid #333;
margin: 16px;
}
.card p {
color: #222;
}
.card__text {
color: #777;
}
DevTools의 Elements에서 main.card를 고른 뒤 Computed의 박스 모델을 확인하세요. content-box일 때 콘텐츠 너비 240px에 좌우 padding 40px과 border 2px이 더해져 테두리 바깥 너비는 282px입니다. margin은 이 282px에 포함되지 않습니다. box-sizing: border-box로 바꾸면 테두리 바깥 너비는 240px, 콘텐츠 너비는 198px이 됩니다.
문단의 글자색은 #222입니다. .card p는 class 하나와 요소 하나, .card__text는 class 하나만 지정하므로 뒤에 선언된 .card__text보다 .card p가 우선합니다. Styles 패널에서 #777이 취소선으로 표시되는지 확인하세요.
스스로 확인: style.css 끝에 .card .card__text { color: #777; }을 추가하면 무슨 색이 될까요? 두 class를 지정한 규칙이 더 구체적이므로 #777이 됩니다. 결과가 다르면 style.css 연결 경로와 선택한 요소를 먼저 확인하세요.
박스 모델
모든 HTML 요소는 박스로 생각할 수 있습니다.
margin
border
padding
content
예:
.card {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 16px;
}
기본 box-sizing: content-box에서는 width 300px에 padding과 border가 추가됩니다.
border-box
*,
*::before,
*::after {
box-sizing: border-box;
}
border-box에서는 선언한 width 안에 padding과 border가 포함됩니다.
레이아웃 계산이 단순해져 프로젝트 공통 기준으로 자주 사용합니다.
selector
element selector:
button {
font: inherit;
}
class selector:
.button {
min-height: 44px;
}
id selector도 가능하지만 스타일링에서 지나치게 높은 specificity를 만들 수 있어 일반적으로 class를 중심으로 구성하는 편이 관리하기 쉽습니다.
cascade
같은 property를 여러 rule이 지정하면 cascade 규칙으로 최종 값이 결정됩니다.
.card {
color: #333;
}
.card {
color: #111;
}
동일 specificity라면 나중 rule이 적용됩니다.
specificity
p {
color: #666;
}
.card p {
color: #333;
}
.card__text {
color: #111;
}
어떤 selector가 더 구체적인지에 따라 결과가 달라집니다.
!important를 먼저 추가하기보다 DevTools에서 어떤 rule이 덮였는지 확인합니다.
inheritance
color, font-family 같은 일부 속성은 자식에게 상속됩니다.
body {
color: #222;
font-family: Arial, sans-serif;
}
모든 property가 상속되는 것은 아닙니다.
margin, border 등은 보통 상속되지 않습니다.
DevTools Styles
요소를 선택하면 어떤 CSS rule이 적용됐고 어떤 rule이 취소선으로 덮였는지 확인할 수 있습니다.
Computed에서는 최종 계산값을 확인합니다.
예를 들어 카드가 예상보다 넓다면:
width
padding
border
box-sizing
순서로 확인합니다.
자주 발생하는 오류
width가 예상보다 큽니다
box-sizing과 padding, border를 확인합니다.
CSS가 적용되지 않습니다
Network에서 style.css를 확인하고 Styles 패널에서 selector가 실제 요소와 일치하는지 봅니다.
!important를 계속 추가합니다
specificity와 source order를 먼저 확인합니다.
학습 완료 체크리스트
- 박스 모델 네 영역을 설명할 수 있습니다.
- border-box가 width 계산을 단순하게 만드는 이유를 이해했습니다.
- selector와 specificity를 기본적으로 구분할 수 있습니다.
- cascade에서 뒤 rule이 적용되는 조건을 이해했습니다.
- DevTools Styles/Computed를 확인할 수 있습니다.
독립 실습은 여기서 마칠 수 있습니다. 아래 선택 실습은 TaskFlow 프로젝트 파일로 진행합니다.
선택 실습: 할 일 앱에 적용하기
TaskFlow는 간단한 서비스 화면에서 시작해 할 일 앱으로 이어 만드는 예제입니다. 이 선택 실습에서는 HTML과 CSS로 이번 화면을 만듭니다.
TaskFlow에 공통 페이지 폭, 기본 타이포그래피, 카드, 폼 스타일을 적용합니다.
선택: 연재 프로젝트와 전체 자료
연재 프로젝트를 이어 만드는 분을 위한 자료입니다. 이 글의 개념과 예제만 찾으셨다면 필요한 파일과 실행 방법만 펼쳐보세요.
TaskFlow 프로젝트 적용
CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기 · 단계별 TaskFlow
TaskFlow 누적 2단계입니다. 학습 카드의 실제 너비와 적용된 글자색을 코드의 box-sizing·선택자와 비교하세요.
예제 크게 보기 (새 탭)실행 가능한 시작본과 이번 단계
이번 단계 시작 ZIP을 새 폴더에 압축 해제합니다. 이 ZIP은 직전 단계의 완료 파일과 같으며 앞 글의 코드를 따로 모을 필요가 없습니다. 이번 단계 완료 ZIP은 다른 폴더에 풀어 비교합니다.
header·footer 내부 page wrapper, main 폭, card와 form-field class를 추가하고 본문의 기본 CSS를 전체 적용합니다.
index.html: 이 파일의 기존 내용을 아래 완료 파일 전체와 대조하여 교체합니다. 다른 파일은 유지합니다.style.css: 이 파일의 기존 내용을 아래 완료 파일 전체와 대조하여 교체합니다. 다른 파일은 유지합니다.
짧은 코드 예제는 변경 위치를 설명합니다. 파일 전체를 작성하거나 교체할 때는 완료 파일 전체를 사용하세요. 생략 표시가 있는 부분 코드를 파일 전체로 저장하지 않습니다.
실행: ZIP의 index.html을 브라우저에서 엽니다. 외부 서버나 npm 설치 없이 로컬 HTML·CSS·이미지를 사용합니다. 문의 폼은 서버 전송을 연결하지 않은 문서 예제입니다. 연습 값만 사용하고 입력 형식을 확인합니다.
직접 확인할 결과: 각 입력이 컨테이너 폭을 따르고 카드·폼·페이지 여백이 구분됩니다.
전체 파일·코드 보기
완료 파일 전체
index.html 전체 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
TaskFlow
</title>
<link href="./style.css" rel="stylesheet"/>
</head>
<body>
<header class="site-header">
<div class="page">
<a href="#home">
TaskFlow
</a>
<nav aria-label="주요 메뉴">
<a href="#features">
기능
</a>
<a href="#contact">
문의
</a>
</nav>
</div>
</header>
<main class="page" id="home">
<section>
<h1>
해야 할 일을 한눈에 정리하세요
</h1>
<p>
TaskFlow는 오늘의 작업을 빠르게 정리하는 서비스입니다.
</p>
</section>
<section id="features">
<h2>
주요 기능
</h2>
<article class="card">
<h3>
빠른 작업 추가
</h3>
<p>
해야 할 일을 바로 기록할 수 있습니다.
</p>
</article>
</section>
<section id="contact">
<h2>
문의하기
</h2>
<form>
<div class="form-field">
<label for="name">
이름
</label>
<input autocomplete="name" id="name" name="name" type="text"/>
</div>
<div class="form-field">
<label for="email">
이메일
</label>
<input autocomplete="email" id="email" name="email" type="email"/>
</div>
<div class="form-field">
<label for="message">
문의 내용
</label>
<textarea id="message" name="message" rows="5"></textarea>
</div>
<button type="submit">
문의 보내기
</button>
</form>
</section>
</main>
<footer class="site-footer">
<div class="page">
<p>
© TaskFlow
</p>
</div>
</footer>
</body>
</html>
style.css 전체 파일
:root {
color: #171717;
background: #f5f5f5;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
Arial,
sans-serif;
line-height: 1.6;
color: #171717;
background: #f5f5f5;
}
.page {
width: min(
100% - 32px,
960px
);
margin-inline: auto;
}
.site-header,
.site-footer {
padding-block: 20px;
}
main {
padding-block: 48px;
}
section + section {
margin-top: 64px;
}
.card {
padding: 24px;
border: 1px solid #d7d7d7;
background: #fff;
}
form {
display: grid;
gap: 16px;
}
.form-field {
display: grid;
gap: 8px;
}
input,
textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid #b8b8b8;
background: #fff;
}
button {
min-height: 44px;
padding: 10px 16px;
border: 1px solid #171717;
background: #171717;
color: #fff;
}
a { color: inherit; }
input, textarea, button { font: inherit; }
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
위 파일과 ZIP의 동명 파일은 동일합니다. 회차별 README·CHANGES 문서는 ZIP에 포함합니다. 생성 산출물·node_modules·실제 환경 변수 파일은 포함하지 않습니다.
index.html 변경
body 내부를 .page로 감싸기보다 header/main/footer 각각 내부에 container를 두면 full-width section 확장에 유리합니다.
<header class="site-header">
<div class="page">
...
</div>
</header>
<main class="page">
...
</main>
<footer class="site-footer">
<div class="page">
...
</div>
</footer>
기능 article에 card class를 추가합니다.
<article class="card">
<h3>빠른 작업 추가</h3>
<p>
해야 할 일을 바로 기록할 수 있습니다.
</p>
</article>
form 각 항목:
<div class="form-field">
<label for="email">
이메일
</label>
<input
id="email"
name="email"
type="email"
/>
</div>
style.css
:root {
color: #171717;
background: #f5f5f5;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
Arial,
sans-serif;
line-height: 1.6;
color: #171717;
background: #f5f5f5;
}
.page {
width: min(
100% - 32px,
960px
);
margin-inline: auto;
}
.site-header,
.site-footer {
padding-block: 20px;
}
main {
padding-block: 48px;
}
section + section {
margin-top: 64px;
}
.card {
padding: 24px;
border: 1px solid #d7d7d7;
background: #fff;
}
form {
display: grid;
gap: 16px;
}
.form-field {
display: grid;
gap: 8px;
}
input,
textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid #b8b8b8;
background: #fff;
}
button {
min-height: 44px;
padding: 10px 16px;
border: 1px solid #171717;
background: #171717;
color: #fff;
}
시작본과 이번 변경
HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기의 완료 체크포인트를 시작본으로 사용합니다.
기존 index.html의 header/main/footer에 page class와 내부 wrapper를 반영하고 style.css에 박스 모델·공통 요소·카드·폼 규칙을 적용합니다. 360px에서 입력창이 넘치지 않고 Computed에서 border-box가 적용되는지 확인합니다.
연속 프로젝트 선수 조건
- 1회차의 기본 HTML 문서 구조를 알고 있으면 좋습니다.
- index.html과 style.css가 연결된 상태를 기준으로 설명합니다.
이전 체크포인트
publishing-step-01-html-form
이번 목표
TaskFlow에 공통 페이지 폭, 기본 타이포그래피, 카드, 폼 스타일을 적용합니다.
TaskFlow 기본 스타일
페이지 폭과 간격을 정리합니다.
:root {
color: #171717;
background: #f5f5f5;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
Arial,
sans-serif;
line-height: 1.6;
color: #171717;
background: #f5f5f5;
}
a {
color: inherit;
}
input,
textarea,
button {
font: inherit;
}
container
.page {
width: min(
100% - 32px,
960px
);
margin-inline: auto;
}
작은 화면에서는 좌우 16px 여백을 남기고, 큰 화면에서는 최대 960px로 제한합니다.
카드
.card {
padding: 24px;
border: 1px solid #d7d7d7;
background: #fff;
}
radius나 shadow는 필수 요소가 아닙니다. 정보 구조가 충분히 구분되는지 먼저 확인합니다.
form
.form-field {
display: grid;
gap: 8px;
}
input,
textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid #b8b8b8;
background: #fff;
}
button {
min-height: 44px;
padding: 10px 16px;
border: 1px solid #171717;
background: #171717;
color: #fff;
}
실행 확인
- DevTools Computed에서 card width와 padding을 확인합니다.
- input이 container를 넘지 않는지 확인합니다.
- CSS rule을 임시로 끄며 cascade를 관찰합니다.
- 360px viewport에서 좌우 여백이 유지되는지 확인합니다.
완료 체크포인트
publishing-step-02-css-basics
다음 학습
다음 글에서는 Flexbox와 media query를 이용해 내비게이션과 기능 카드를 반응형으로 정리합니다.
글 소개·학습 준비·전체 목차
웹 퍼블리싱 · 2 / 15 · 필수 학습 · CSS 박스 모델과 캐스케이드
HTML 구조를 만들었다면 다음 단계는 CSS가 요소의 크기와 스타일을 어떻게 계산하는지 이해하는 것입니다.
이번 글에서는 box model, box-sizing, selector, specificity, cascade, inheritance를 DevTools에서 직접 확인합니다.
이번 글에서 배우는 내용
- content·padding·border·margin
- box-sizing
- class selector와 element selector
- cascade와 source order
- specificity 기본
- inheritance
- DevTools Styles·Computed
먼저 알아야 할 내용
HTML 요소·class·link 태그를 알면 됩니다. 독립 파일에서 CSS 연결까지 포함하므로 1회차 결과물이 필요하지 않습니다.
목차
이 글이 도움이 되었나요?
읽음 기록
읽음 — / 전체 15개 · 필수 13개
새 글 받아보기
RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.
