Week 1 · 웹이 작동하는 방식 Day 4 / 42

CSS 기초 — 선택자, Box Model, Display

뼈대만 있는 HTML에 색과 여백을 입힙니다

10초 핵심 요약

01

CSS가 HTML과 연결되는 방식

건물(HTML)을 다 지었다고 끝이 아닙니다. 예쁘게 꾸미려면 "이 도면(CSS)대로 칠해주세요"라고 도면을 건네주어야 합니다. 그 연결 고리가 <link> 태그입니다.

<!-- head 안에서 CSS 파일을 불러옵니다 -->
<link rel="stylesheet" href="./style.css">

지금 보고 있는 이 페이지도 똑같은 방식으로 assets/style.css를 불러오고 있습니다. 페이지 상단 <head>를 F12로 확인해보면 그대로 보입니다.

02

대상 콕 집어내기 — 선택자 3대장

명령(스타일)을 내리려면 "누구한테" 내릴지 정확히 불러야 합니다. 태그(범위 가장 넓음), 클래스(그룹 묶기), 아이디(단 하나)입니다.

① 태그

p, div, a처럼 태그 이름 그대로. 범위가 너무 커서 사이트 전체 기본값 정도에만 씁니다.
p { color: black; }

② 클래스 (.)

비슷하게 생긴 것들을 묶어 디자인할 때 가장 많이 씁니다 (실무 사용률 압도적 1위).
.btn { color: blue; }

③ 아이디 (#)

한 페이지에 딱 하나만. 주로 헤더·푸터 같은 큼직한 구역을 통째로 잡을 때 씁니다.
#header { color: red; }

CSS 힘의 크기(우선순위)는 태그 < 클래스 < ID 순입니다. 좁고 구체적으로 부를수록 힘이 세서, 같은 곳을 지정하면 더 힘센 쪽이 이깁니다.
실전 팁 — 원하는 대로 안 바뀐다고 !important를 남발하면 나중에 디자인이 꼬여 수정이 아예 불가능해집니다. 안 바뀐다면 우선순위에서 밀린 것이니, 선택자를 더 구체적으로(계층 선택자, 아래 참고) 지목하세요.
미리 알아두면 좋은 습관 — 오늘부터 실제로 CSS 파일을 저장하며 작업합니다. 작업이 조금씩 쌓일 때마다 그 기록을 남겨두는 도구를 Git이라고 부르는데, 자세한 사용법은 Day 39에서 제대로 배웁니다. 지금은 몰라도 되고, 파일을 잘 저장해두는 정도만 신경 쓰면 충분합니다.
03

초보자 1위 실수 — Padding vs Margin

웹사이트의 모든 글자, 이미지, 버튼은 눈에 보이지 않는 네모난 액자 안에 들어있습니다. Content(액자 안 실제 내용), Padding(내용과 테두리 사이 안쪽 여백), Border(테두리), Margin(이 액자와 옆 액자 사이 바깥 거리)로 이루어집니다.

Margin
Border Padding
Content

상자를 뚱뚱하게 만들려면 Padding! 상자를 남과 띄워놓으려면 Margin!

나중에 반드시 만나는 함정 — Margin Collapse 위 액자가 margin-bottom: 50px, 아래 액자가 margin-top: 50px이면 100px 벌어질 것 같지만 아닙니다. 위아래 마진이 만나면 더 큰 값 하나로 겹쳐버립니다(50px). 간격이 예상보다 안 벌어지면 이 현상을 의심하세요.
04

삽질 방지 치트키 — box-sizing

가로 300px짜리 박스를 만들어달라고 하면, 브라우저는 안의 내용물만 300px로 맞추고 Padding·Border는 그 밖으로 살을 덧붙여 버립니다. 그래서 레이아웃이 깨집니다. box-sizing: border-box는 "테두리 두께까지 몽땅 합쳐서 딱 300px로 만들어!"라는 명령입니다.

/* 파일 최상단에 항상 넣는 필수 초기화 코드 */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; }
05

왜 크기가 안 먹히지 — Display

"폭을 300px로 줬는데 왜 안 변하지?" 이 질문의 원인 1순위는 태그가 가진 display 성격을 몰라서입니다. Block은 무조건 혼자 앉는 독방, Inline은 다닥다닥 붙어 앉는 합석입니다.

성격특징크기/여백 조절
Block내용이 작아도 가로 한 줄을 통째로 혼자 씀 (div, p)너비·상하좌우 여백 모두 조절 가능
Inline글자 크기만큼만 차지, 옆에 나란히 붙음 (span, a)너비 조절 불가, 위아래 여백도 무시됨
Inline-block나란히 붙으면서도 크기는 자유롭게둘 다 가능
span { /* ❌ inline이라 무시당함 */
  width: 300px; margin-top: 50px;
  /* ✅ 해결: 성격을 바꿔주면 즉시 적용됨 */
  display: inline-block;
}
06

가운데 정렬 3가지 패턴

/* 1. 너비가 정해진 박스(Block) 전체를 가운데로 */
.box { width: 300px; margin: 0 auto; }

/* 2. 글자(Inline 요소)를 가운데로 */
.text-area { text-align: center; }

/* 3. 완벽한 상하좌우 중앙 정렬 (Day 5 예고편) */
.parent { display: flex; justify-content: center; align-items: center; }
07

정밀 타겟팅 — 계층 선택자

"123번지"라고만 부르면 어딘지 모릅니다. "서울시 > 강남구 > 123번지"처럼 부모부터 좁혀가며 대상을 명확히 찍는 기술입니다.

/* 공백 = "~안에 있는 모든 자손" */
.sidebar p { color: #333; }

/* 꺾쇠(>) = "~바로 밑에 있는 자식만" */
.menu > li { font-size: 16px; }
08

Day 4 완료 체크리스트

선택자의 힘은 태그 < 클래스(.) < ID(#) 순서라는 걸 안다.
Padding(안쪽)과 Margin(바깥쪽)을 구분할 수 있다.
box-sizing: border-box를 쓰는 이유를 설명할 수 있다.
inline 요소에는 크기·상하 여백이 무시된다는 걸 이해했다.
안 될 때 확인하세요 F12 Styles 패널에서 내 코드에 취소선이 그어져 있다면 우선순위에서 밀린 것(계층 선택자로 더 구체적으로), 아예 안 보인다면 클래스 앞 점(.)을 빼먹었거나 오타입니다.
스스로 설명해보기 — margin과 padding의 차이, 그리고 box-sizing: border-box가 왜 필요한지 설명할 수 있나요?

오늘의 용어

선택자 (Selector)
스타일을 적용할 대상을 지목하는 태그/클래스(.)/아이디(#)
Box Model
모든 요소를 content-padding-border-margin 4겹 상자로 보는 모델
box-sizing: border-box
테두리·여백까지 합쳐서 지정한 크기로 맞춰주는 설정
display
요소가 줄을 혼자 쓰는지, 옆에 나란히 붙는지 정하는 성격