Ch.3 CSS 첫걸음 — 색과 글꼴

CSS란? — 옷을 입히자

CSS의 역할과 문법 구조를 이해한다CSS를 적용하는 3가지 방법(인라인, style 태그, 외부 파일)을 구별한다외부 CSS 파일을 HTML에 연결할 수 있다

HTML만으로는 너무 밋밋하지 않나요?

지금까지 만든 홈페이지는 검은 글씨에 흰 배경뿐입니다. CSS를 입히면 같은 HTML이 완전히 다른 모습으로 변합니다.

HTML에 스타일을 어떻게 연결할까?

CSS(Cascading Style Sheets) — HTML에 색상, 크기, 배치를 부여하는 스타일 언어입니다.

article

핵심 내용

CSS는 HTML에 옷을 입히는 언어입니다

/* CSS 기본 문법 */
셀렉터 {
  속성: 값;
  속성: 값;
}

/* 실제 예시 */
h1 {
  color: navy;
  font-size: 32px;
}

CSS를 HTML에 연결하는 방법은 세 가지입니다

1. 인라인: 태그에 직접 style 속성

2. 내부: <style> 태그에 작성

3. 외부 (권장): .css 파일을 <link>로 연결

외부 CSS 파일을 사용하면: • HTML과 스타일이 분리되어 관리가 쉽다 • 여러 페이지에서 재사용 가능 • 브라우저가 CSS를 캐시하여 속도 향상

style.css 파일을 만들고 홈페이지에 연결해봅시다

CSS를 HTML에 적용하는 가장 권장되는 방법은?

CSS에서 글자 색상을 변경하는 속성은 ___ 이다

CSS에서 클래스 셀렉터는 어떤 기호로 시작하나요?

CSS 기초

key

핵심 용어

🎯

셀렉터

어떤 요소를 꾸밀지 선택 (h1, p, .class)

🔧

속성

무엇을 바꿀지 지정 (color, font-size)

🎨

값

어떻게 바꿀지 설정 (navy, 32px)

edit_note

정리 노트

CSS란? — 옷을 입히자

CSS 문법 구조

셀렉터
꾸밀 요소를 선택하는 부분 (h1, .class, #id)
속성
무엇을 바꿀지 지정 (color, font-size 등)
값
어떻게 바꿀지 지정 (red, 16px 등)

CSS 적용 방법 3가지

인라인
태그에 style 속성으로 직접 작성 (비권장)
내부 CSS
head 안 <style> 태그에 작성
외부 CSS
별도 .css 파일에 작성 후 link로 연결 (권장)
★

외부 CSS 파일을 사용하면 여러 페이지에서 스타일을 재사용할 수 있습니다.

image

시각 자료

다이어그램: wd-scene-css-basics
check_circle

핵심 정리

  • 1CSS = 셀렉터 { 속성: 값; } 문법
  • 2외부 .css 파일 연결이 가장 권장되는 방법
  • 3color = 글자색, background-color = 배경색

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작