🎨 CSS란?
CSS (Cascading Style Sheets) 는 HTML 문서의 디자인을 담당하는 언어
✅ 왜 쓰지?
| 이유 | 설명 |
|---|
| 가볍다 | HTML 코드에 직접 스타일을 넣지 않아도 되니 코드가 간결해짐 |
| 편집이 쉽다 | 스타일을 따로 관리하므로 하나만 바꿔도 여러 곳에 반영 가능 |
| 일괄 적용 | 외부 CSS를 연결하면 여러 HTML 파일에 공통 스타일 적용 가능 |
🔢 CSS의 버전
| 버전 | 설명 |
|---|
| CSS1 | 가장 기본 기능만 포함 (1996) |
| CSS2 | 레이아웃, 미디어 지원 추가 (1998) |
| CSS3 | 현재 표준, 애니메이션/트랜지션 등 추가 |
📌 현재는 CSS3가 기준!!
✍️ CSS 작성 방법
| 방법 | 설명 |
|---|
| 인라인 스타일 | 태그 안에 style="" 직접 작성 → 유지보수 어려움 |
| 내부 스타일 시트 | <style> 태그로 HTML 내부에 작성 |
| 외부 스타일 시트 | .css 파일로 따로 작성 후 <link>로 연결 |
🎯 CSS 선택자 종류
| 선택자 | 설명 | 예시 |
|---|
| 전체 선택자 | 문서 내 모든 요소에 스타일 적용 | * { margin: 0; } |
| 태그 선택자 | 특정 HTML 태그에 스타일 적용 | p { color: red; } |
| 클래스 선택자 | .클래스명 형태로 다수 요소에 적용 가능 | .box { border: 1px solid; } |
| 아이디 선택자 | #id명으로 특정 요소 하나에 적용 | #header { background: blue; } |
| 그룹 선택자 | 여러 선택자를 한 번에 적용 | h1, h2, p { font-family: sans-serif; } |
| 속성 선택자 | 특정 속성을 가진 태그에만 스타일 적용 | input[type="text"] { ... } |
✅ 정리하기
- CSS는 HTML를 꾸밀 수 있다
- 외부 파일로 분리하면 유지보수와 재사용성이 뛰어남!
- 다양한 선택자를 통해 정밀하게 원하는 요소에 스타일을 지정할 수 있다
