9강. HTML에 CSS 적용하기

이번 강의의 결과물은 외부 스타일시트를 연결하고 요소·클래스·ID 선택자로 포트폴리오의 기본 모양을 지정한 페이지입니다.

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

HTML은 콘텐츠의 의미와 구조를 표현하지만 원하는 색상과 간격까지 자동으로 설계하지는 않습니다. HTML 의미를 유지하면서 화면 표현만 별도 파일에서 관리하도록 CSS를 연결합니다.

✓학습 목표

• HTML은 콘텐츠의 의미와 구조를 표현하지만 원하는 색상과 간격까지 자동으로 설계하지는 않습니다. HTML 의미를 유지하면서 화면 표현만 별도 파일에서 관리하도록 CSS를 연결합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

CSS 규칙은 선택자와 선언 블록으로 이루어집니다.

.project-card {
  background-color: white;
}

• 선택자 .project-card: 스타일을 적용할 HTML 요소를 찾습니다.
• 속성 background-color: 바꿀 표현의 종류입니다.
• 값 white: 적용할 설정입니다.
• 선언 background-color: white;: 속성과 값을 한 쌍으로 작성합니다.

선택자	예	용도
요소 선택자	body, h1	해당 이름의 모든 요소
클래스 선택자	.project-card	같은 역할을 공유하는 여러 요소
ID 선택자	#about	해당 ID를 가진 한 요소

스타일 재사용에는 ID보다 클래스를 우선합니다. 선택자의 정확한 분류는 W3C Selectors 표준을 기준으로 합니다.

</>3. 코드 예시

파일 구조:

web-basics/portfolio/
├─ index.html
└─ css/
   └─ style.css

파일명: index.html

head 안에 외부 스타일시트를 연결합니다.

<link rel="stylesheet" href="css/style.css">

스타일을 재사용할 요소에 클래스를 추가합니다.

<header class="site-header">
  <h1 class="site-title">게임과 웹을 공부하는 개발자</h1>
</header>

<section id="projects">
  <h2>프로젝트</h2>
  <article class="project-card">
    <h3>게임플레이 기능 프로젝트</h3>
  </article>
  <article class="project-card">
    <h3>반응형 포트폴리오</h3>
  </article>
</section>

파일명: css/style.css

body {
  margin: 0;
  color: #1f2937;
  background-color: #f8fafc;
  font-family: Arial, sans-serif;
}

.site-header {
  padding: 24px;
  color: white;
  background-color: #172554;
}

.site-title {
  margin: 0;
}

.project-card {
  margin: 16px 0;
  padding: 16px;
  background-color: white;
  border: 1px solid #cbd5e1;
}

#projects {
  padding: 24px;
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. link[rel="stylesheet"]가 브라우저에 CSS 파일을 별도 요청하도록 알립니다.
2. href="css/style.css"는 index.html을 기준으로 한 상대 경로입니다.
3. 브라우저가 HTML 요소와 선택자를 비교해 일치하는 선언을 적용합니다.
4. 두 프로젝트에 같은 클래스를 사용했으므로 하나의 규칙이 두 카드에 재사용됩니다.
5. HTML은 구조를, CSS는 표현을 담당해 같은 콘텐츠를 유지하면서 디자인을 바꿀 수 있습니다.

Network 탭에는 이제 index.html과 이미지뿐 아니라 style.css 요청도 별도로 나타납니다.

!5. 자주 하는 실수

• link를 body에 넣거나 rel="stylesheet"를 빠뜨림
• 실제 폴더와 다른 href를 작성함
• 클래스 선택자의 점(.)이나 ID 선택자의 #을 빠뜨림
• HTML은 class="project-card"인데 CSS는 .project_card로 작성함
• 속성과 값 사이의 콜론이나 선언 끝의 세미콜론을 빠뜨림
• 재사용할 스타일을 ID 선택자로만 작성함

✎6. 짧은 실습 과제

1. portfolio/css/style.css를 만들고 HTML head에 연결합니다.
2. body, h1에 요소 선택자 스타일을 작성합니다.
3. 두 프로젝트에 같은 project-card 클래스를 적용합니다.
4. #projects 규칙을 잠시 .projects-section 클래스로 바꾸어 HTML과 CSS를 함께 수정합니다.
5. Network 탭에서 style.css가 200인지 확인합니다.
6. Elements의 Styles 패널에서 어떤 선택자가 현재 요소에 적용됐는지 확인합니다.

완료 기준은 HTML에서 style 속성을 직접 쓰지 않고 외부 CSS 하나로 두 프로젝트 카드의 공통 모양을 변경하는 것입니다.

?7. 이해 점검 질문 3개

1. CSS 파일을 HTML과 분리하면 실제 프로젝트에서 어떤 장점이 있나요?
2. 여러 프로젝트 카드에 공통 스타일을 적용할 때 클래스 선택자가 적합한 이유는 무엇인가요?
3. CSS 파일 요청이 404라면 가장 먼저 어떤 경로 관계를 확인해야 하나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.