CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기
4강. CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기
1. 이번 강의에서 해결할 문제
기본 HTML은 읽을 수 있지만 줄 길이와 간격이 제각각입니다. 인라인 스타일 없이 공통 규칙과 컴포넌트 클래스로 화면을 정리합니다.
2. 학습 목표
3. 핵심 개념
CSS는 선택자로 요소를 찾고 선언을 적용합니다. 글자색과 글꼴은 대체로 자식에게 상속되지만 margin과 border는 상속되지 않습니다. box-sizing: border-box는 선언한 너비 안에 padding과 border를 포함해 계산을 단순하게 합니다.
먼저 알아야 할 용어
| 용어 | 뜻 | 예 |
|---|---|---|
| 선택자 | 스타일을 적용할 요소를 찾는 표현 | article, .skip-link |
| 선언 | 속성과 값을 한 쌍으로 지정 | color: #182235; |
| 상속 | 부모의 일부 글자 속성이 자식에 전달됨 | body의 글꼴이 문단에 적용 |
| content | 글자·이미지가 놓이는 실제 내용 영역 | 카드 본문 |
| padding | content와 border 사이의 안쪽 여백 | 카드 내부 여백 |
| border | padding 바깥을 감싸는 테두리 | 카드의 1px 선 |
| margin | 다른 박스와 떨어지는 바깥 여백 | 카드 사이 간격 |
가장 작은 박스로 계산하기
.card {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
}
border-box에서는 화면에 차지하는 전체 너비가 200px이고, 좌우 padding 40px과 border 4px을 뺀 content 너비는 156px입니다. 기본 content-box라면 선언한 200px이 content만 뜻해 전체 너비가 244px이 됩니다. 이 차이 때문에 같은 너비의 카드가 컨테이너를 넘치는 문제가 생길 수 있습니다.
4. 단계별 실습
CSS · 파일 경로: game-dev-portfolio/css/style.css
적용 전에는 브라우저 기본 여백과 넓은 본문 때문에 줄 길이가 일정하지 않습니다. 적용 후에는 화면 양옆에 최소 여백이 생기고, 넓은 화면에서도 본문이 70rem을 넘지 않으며 프로젝트 카드가 테두리 상자로 보이는 것이 목표입니다.
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: #182235;
background: #f7f4ed;
font-family: system-ui, sans-serif;
line-height: 1.7;
}
a { color: inherit; }
.site-header, main, footer { width: min(100% - 2rem, 70rem); margin-inline: auto; }
section { padding-block: 4rem; }
article {
padding: 1.25rem;
border: 1px solid #d8d4ca;
border-radius: 0.75rem;
background: #fffdf8;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: white; padding: 0.75rem; }
중요한 규칙을 한 줄씩 이해하기
*, *::before, *::after는 모든 요소와 가상 요소의 박스 계산을border-box로 통일합니다.body { margin: 0; }은 브라우저 기본 바깥 여백을 제거합니다.color와font-family는 대부분의 자식 텍스트로 상속되지만 카드의border는 상속되지 않습니다.width: min(100% - 2rem, 70rem)은 좁은 화면에서는 양옆 합계 2rem을 남기고, 넓은 화면에서는 최대 70rem을 사용합니다.margin-inline: auto가 제한된 박스를 가로 중앙에 놓습니다.padding-block은 글쓰기 방향의 세로 축에 안쪽 여백을 줍니다..skip-link는 평소 화면 밖에 있다가 키보드 포커스를 받으면 보이는 위치로 이동합니다.display: none으로 숨기면 포커스할 수 없습니다.
실행 결과 확인
- 화면 너비가 1200px이면 본문은 약 70rem을 넘지 않고 가운데 정렬됩니다.
- 화면을 좁히면 본문 폭도 줄어들지만 좌우에 각각 약 1rem의 공간이 남습니다.
article의 Computed 패널에는 content, padding 20px, border 1px이 서로 다른 층으로 표시됩니다.- Tab 키로
.skip-link에 포커스하면 왼쪽 상단에 링크가 나타나야 합니다.
article의 padding을 1.25rem에서 2rem으로 바꾸면 글자와 테두리 사이가 넓어집니다. 카드 바깥 간격은 바뀌지 않으므로 padding과 margin을 눈으로 비교할 수 있습니다.
HTML에 인라인 style이 있다면 제거하고 클래스만 남깁니다. 개발자 도구 확인: Elements에서 article을 선택해 Styles의 적용 선택자와 Computed의 박스 모델을 확인합니다. 본문 폭이 약 70rem을 넘지 않아야 합니다.
5. 코드가 동작하는 이유
전체 요소에 border-box를 적용해 실제 박스 너비를 예측 가능하게 만듭니다. width: min(...)은 화면이 좁으면 여백을 남긴 유동 폭, 넓으면 최대 읽기 폭을 사용합니다. 클래스는 같은 역할의 카드에 재사용할 수 있습니다.
6. 자주 하는 실수와 해결법
7. 직접 실습
8. 이해 점검 질문 3개
9. 핵심 요약
다음 강의 연결
한 카드의 크기와 공통 본문 폭을 정했습니다. 5강. Flexbox와 Grid에서 여러 카드와 내비게이션을 행·열로 배치합니다.
CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기 미니 퀴즈
선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.
학습을 마쳤나요?
직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.