통합 요약노트
Ch.3 CSS 첫걸음 — 색과 글꼴
CSS의 역할, 셀렉터, 색상과 타이포그래피
이 챕터의 내용
1
CSS란? — 옷을 입히자
CSS(Cascading Style Sheets) — HTML에 색상, 크기, 배치를 부여하는 스타일 언어입니다.
CSS는 HTML에 옷을 입히는 언어입니다
CSS를 HTML에 연결하는 방법은 세 가지입니다
style.css 파일을 만들고 홈페이지에 연결해봅시다
- CSS = 셀렉터 { 속성: 값; } 문법
- 외부 .css 파일 연결이 가장 권장되는 방법
- color = 글자색, background-color = 배경색
2
셀렉터의 세계
셀렉터 — CSS가 HTML 요소를 '선택'하는 방법입니다. 요소, 클래스, ID 세 가지를 마스터합시다.
요소, 클래스, ID — 세 가지로 모든 것을 선택합니다
같은 요소에 여러 규칙이 겹치면 누가 이길까?
홈페이지에 클래스를 추가하고 스타일을 적용해봅시다
- 요소(p), 클래스(.name), ID(#name) 셀렉터 3종
- 우선순위: 인라인 > ID > 클래스 > 요소
- 대부분의 경우 class 셀렉터를 사용한다
3
색과 타이포그래피
color, font-family, font-size — 텍스트의 첫인상을 결정하는 속성들입니다.
CSS에서 색을 표현하는 방법은 여러 가지입니다
글꼴과 텍스트 스타일로 가독성을 높입니다
색상과 글꼴을 적용하여 홈페이지를 변신시켜봅시다
- 색상: 이름, #HEX, rgb() 세 가지 방식
- font-family, font-size, line-height로 글꼴 설정
- a:hover로 마우스 올릴 때 스타일 변경 가능
key
핵심 용어 모음
🎯
셀렉터
어떤 요소를 꾸밀지 선택 (h1, p, .class)
🔧
속성
무엇을 바꿀지 지정 (color, font-size)
🎨
값
어떻게 바꿀지 설정 (navy, 32px)
🔤
color
글자 색상
🎨
background-color
배경 색상
🔲
border-color
테두리 색상
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기