topic★★★★★난이도 · 약 15분

CSS란? — 옷을 입히자

CSS는 HTML에 색상, 크기, 배치를 부여하는 스타일 언어. 셀렉터 { 속성: 값; } 문법.

#CSS#문법#셀렉터#외부CSS

왜 배우는가

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

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

css

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

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

셀��터로 HTML 요소를 선택하고, 속성: 값 ��으로 스타일을 지정한다.

요소	설명
셀렉터	어떤 요소를 꾸밀지 선택 (h1, p, .class)
속성	무엇을 바꿀지 지정 (color, font-size)
값	어떻게 바꿀지 설정 (navy, 32px)

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

1. 인라인 — 태그에 직접 style 속성 2. 내부 — <style> 태그에 작성 3. 외부 (권장) — .css 파일을 <link>로 연결

구분	인라인 (비권장)	외부 파일 (권장)
방식	`style="color: navy;"`	`<link rel="stylesheet" href="style.css">`
장점	빠름	분리, 재사용, 캐시

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

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

css

body {
  background-color: #FFF8F0;
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #1A1A2E;
  font-size: 2rem;
}

p {
  color: #333;
  line-height: 1.6;
}

body, h1, p에 스타일을 적용한 기본 CSS 파일.

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

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

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

실기 드릴 3문항

edit실기 드릴 · 단답형

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

space_bar실기 드릴 · 빈칸 채우기

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

edit실기 드릴 · 단답형

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