웹 개발 기초집LESSON 09

HTML에 CSS 적용하기

난이도입문

예상 시간25분

선수지식이전 강의

9강. HTML에 CSS 적용하기

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

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

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

학습 목표

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

2. 핵심 개념

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

HTML 요소는 처음부터 브라우저의 기본 모양을 갖지만, 프로젝트의 목적에 맞는 색상·간격·테두리는 CSS로 지정합니다. 이때 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 표준을 기준으로 합니다.

용어 정리

용어	무엇인가	주의할 점
선택자	스타일을 적용할 HTML 요소를 찾는 표현	클래스 앞에는 `.`, ID 앞에는 `#`을 붙임
선언 블록	중괄호 `{ }` 안의 선언 모음	여는 중괄호와 닫는 중괄호가 한 쌍이어야 함
속성	바꾸려는 표현의 이름	HTML 속성과 CSS 속성을 혼동하지 않음
값	속성에 적용할 구체적인 설정	`16px`, `white`처럼 속성에 맞는 단위를 사용
클래스	여러 요소가 공유할 수 있는 분류 이름	같은 모양·역할에 재사용하기 좋음
ID	문서에서 한 요소를 식별하는 이름	반복 카드 스타일에 사용하지 않음

가장 작은 예제로 시작하기

다음 HTML은 아직 브라우저 기본 모양으로만 보입니다.

<p class="notice">새 프로젝트를 공개했습니다.</p>

아래 CSS 한 규칙을 연결하면 notice 클래스가 있는 문단만 배경색과 안쪽 여백을 얻습니다.

.notice {
  padding: 8px;
  background-color: #e0f2fe;
}

첫 줄의 .notice가 대상을 찾고, padding은 글자와 상자 경계 사이에 8픽셀 공간을 만들며, background-color는 상자의 배경을 바꿉니다. HTML에서 클래스 이름을 notices로 바꾸면 선택자가 더 이상 일치하지 않아 두 스타일이 모두 사라집니다.

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;
}

중요한 코드 한 줄씩 이해하기

코드	선택 대상과 효과	화면 변화
`body { margin: 0; }`	페이지 전체의 기본 바깥 여백 제거	콘텐츠가 브라우저 가장자리부터 시작
`.site-header { padding: 24px; }`	`site-header` 클래스 내부에 공간 추가	제목이 상자 경계에 붙지 않음
`.site-title { margin: 0; }`	제목의 기본 바깥 여백 제거	헤더 높이가 예측 가능해짐
`.project-card { ... }`	같은 클래스를 가진 두 `article`에 한 번에 적용	두 카드가 같은 모양을 공유
`#projects { padding: 24px; }`	`projects` ID 하나에만 적용	프로젝트 영역 전체에 안쪽 공간 생성

CSS는 위에서 아래로 읽지만 단순히 마지막 규칙만 적용하는 것은 아닙니다. 여러 규칙이 같은 속성을 지정하면 선택자 우선순위와 작성 순서를 함께 비교합니다. 이 판단은 다음 강의의 cascade에서 자세히 다룹니다.

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

python -m http.server 5500

4. 코드가 동작하는 이유

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

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

실행 결과와 동작 흐름

브라우저가 index.html을 받고 link 요소를 발견합니다.
HTML 위치를 기준으로 css/style.css를 요청합니다. Network 탭에서 상태 200을 확인할 수 있습니다.
CSS를 해석해 각 선택자와 현재 HTML 요소를 비교합니다.
.project-card는 두 article과 일치하므로 두 카드가 함께 바뀝니다.
CSS의 background-color: white를 #fef3c7로 바꾸고 저장하면 두 카드 배경이 동시에 연한 노란색으로 바뀝니다.

스타일이 전혀 보이지 않으면 색상 값을 계속 바꾸기 전에 Network 탭에서 CSS 요청이 성공했는지부터 확인합니다. 파일을 못 읽은 상태에서는 어떤 선언도 적용되지 않습니다.

5. 자주 하는 실수

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

6. 실습

실습 목표

외부 CSS를 연결하고 요소·클래스·ID 선택자가 각각 어느 HTML 요소를 바꾸는지 개발자 도구로 확인합니다.

시작 전 상태

portfolio/index.html에 예제의 header, section, 두 article이 있어야 합니다. portfolio/css/ 폴더와 빈 style.css를 만들고 서버를 실행합니다.

1단계: 따라 하기

HTML head에 link를 추가하고 전체 CSS를 입력합니다. Network 탭의 style.css 요청이 200인지 확인한 뒤, 헤더가 남색이고 두 카드가 흰색인지 확인합니다.

2단계: 값을 바꾸고 결과 비교

.project-card의 padding을 16px에서 32px로 바꿉니다. 카드 바깥 간격이 아니라 글자와 카드 테두리 사이가 넓어졌는지 비교합니다. 다음으로 배경색을 바꿔 두 카드가 함께 변하는지 확인합니다.

3단계: 기능 확장

article 하나를 더 복사해 세 번째 프로젝트를 만들고 같은 project-card 클래스를 붙입니다. CSS를 추가하지 않아도 같은 모양이 적용되어야 합니다. 그다음 #projects를 .projects-section으로 바꾸되 HTML의 id도 class로 함께 수정합니다.

4단계: 스스로 확인

요소 선택자는 같은 태그 모두, 클래스는 같은 역할 여러 개, ID는 한 요소를 찾는다고 설명할 수 있나요?
CSS를 한 줄만 고쳐 모든 카드의 모양을 변경할 수 있나요?
Elements의 Styles 패널에서 적용된 규칙과 취소선이 된 규칙을 찾을 수 있나요?

막혔을 때

CSS 요청이 404: index.html에서 css/style.css로 실제 폴더를 따라갈 수 있는지 확인합니다.
한 카드만 스타일이 없음: 해당 article의 class 철자와 하이픈을 비교합니다.
규칙 전체가 무시됨: 바로 위 규칙의 닫는 } 또는 선언의 :가 빠졌는지 확인합니다.
색상이 예상과 다름: Styles 패널에서 같은 속성을 덮어쓴 다른 선택자를 확인합니다.

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

7. 이해 점검 질문 3개

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

핵심 요약

CSS는 선택자로 HTML 요소를 찾고 선언으로 표현을 바꿉니다.
클래스는 반복되는 카드처럼 같은 역할을 공유하는 요소에 재사용하고, ID는 문서의 한 요소를 식별할 때 사용합니다.
외부 CSS가 적용되지 않으면 선언보다 먼저 파일 경로와 Network 응답을 확인합니다.

다음 강의 연결

다음 강의에서는 같은 요소에 여러 규칙이 동시에 일치할 때 어떤 값이 선택되는지 배웁니다. 10강. Cascade와 상속에서 이번 .project-card 규칙을 겹쳐 보며 우선순위를 확인합니다.

MINI QUIZ