본문으로 건너뛰기
웹 프로젝트 기초집LESSON 04

CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기

난이도입문
예상 시간40분
선수지식3강 시맨틱 HTML

4강. CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기

1. 이번 강의에서 해결할 문제​

기본 HTML은 읽을 수 있지만 줄 길이와 간격이 제각각입니다. 인라인 스타일 없이 공통 규칙과 컴포넌트 클래스로 화면을 정리합니다.

2. 학습 목표​

3. 핵심 개념​

CSS는 선택자로 요소를 찾고 선언을 적용합니다. 글자색과 글꼴은 대체로 자식에게 상속되지만 margin과 border는 상속되지 않습니다. box-sizing: border-box는 선언한 너비 안에 padding과 border를 포함해 계산을 단순하게 합니다.

4. 단계별 실습​

CSS · 파일 경로: game-dev-portfolio/css/style.css

game-dev-portfolio/css/style.css
*, *::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; }

HTML에 인라인 style이 있다면 제거하고 클래스만 남깁니다. 개발자 도구 확인: Elements에서 article을 선택해 Styles의 적용 선택자와 Computed의 박스 모델을 확인합니다. 본문 폭이 약 70rem을 넘지 않아야 합니다.

5. 코드가 동작하는 이유​

전체 요소에 border-box를 적용해 실제 박스 너비를 예측 가능하게 만듭니다. width: min(...)은 화면이 좁으면 여백을 남긴 유동 폭, 넓으면 최대 읽기 폭을 사용합니다. 클래스는 같은 역할의 카드에 재사용할 수 있습니다.

6. 자주 하는 실수와 해결법​

7. 직접 실습​

8. 이해 점검 질문 3개​

9. 핵심 요약​

MINI QUIZ

CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기 미니 퀴즈

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1다음 중 “CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기”의 핵심 요약을 실제 상황에 맞게 적용한 것은 무엇인가요?
  2. 문제 2‘선택자를 과하게 구체화’ 상태에 관한 “CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기” 본문의 설명으로 가장 알맞은 것은 무엇인가요?

답을 선택하면 진행 결과가 자동으로 저장됩니다.

LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

4강. CSS 기초: 선택자·상속·박스 모델로 화면 꾸미기 미완료 상태