HTML로 웹페이지의 뼈대를 만들었다면, 이제는 그 웹페이지에 색상과 스타일을 입힐 차례입니다. 바로 오늘 배울 **CSS(Cascading Style Sheets)**의 역할이죠.
CSS는 웹페이지의 디자인과 시각적인 요소를 담당합니다. 글자 크기, 색상, 간격, 배경 등 눈에 보이는 거의 모든 요소를 꾸밀 수 있어요.
🧾 CSS란 무엇인가요?
**CSS(Cascading Style Sheets)**는 HTML 요소를 꾸미기 위한 스타일 언어입니다.
HTML은 콘텐츠 구조만 담당하고, CSS는 그 구조를 보기 좋게 디자인하는 역할을 합니다.
🎯 CSS를 적용하는 3가지 방법
1️⃣ 인라인 스타일 (Inline)
HTML 태그 안에 직접 스타일을 넣는 방법
html
복사편집
<p style="color: blue;">파란색 글자입니다</p>
📌 간단하지만 유지보수가 어렵고, 여러 곳에 적용하기 비효율적입니다.
2️⃣ 내부 스타일 (Internal)
HTML 문서의 <head> 안에 <style> 태그를 넣어 작성
html
복사편집
<head> <style> p { color: red; } </style> </head>
- 하나의 HTML 파일에서만 사용할 때 적합
3️⃣ 외부 스타일시트 (External)
별도의 .css 파일을 만들어 연결
html
복사편집
<!-- HTML 파일 --> <link rel="stylesheet" href="style.css">
css
복사편집
/* style.css */ p { color: green; }
✅ 가장 추천하는 방식 – 유지보수, 확장성 모두 좋습니다.
🎨 자주 쓰는 CSS 속성들
✅ 색상 관련 속성
속성설명
| color | 글자 색상 지정 |
| background-color | 배경 색상 지정 |
css
복사편집
body { background-color: #f0f0f0; } h1 { color: navy; }
- 색상은 이름(red, blue), HEX 코드(#ff0000), RGB 등으로 지정 가능
✅ 글꼴 관련 속성
속성설명
| font-size | 글자 크기 지정 (px, em 등) |
| font-family | 글꼴 지정 |
| font-weight | 글자 굵기 (normal, bold, 숫자 등) |
| text-align | 정렬 (left, center, right) |
css
복사편집
p { font-size: 16px; font-family: 'Arial', sans-serif; text-align: center; }
📌 여러 글꼴 이름을 쓸 때는 대체 순서대로 나열하는 것이 좋습니다.
💻 실습 예제 – 나만의 스타일 적용하기
HTML + CSS 통합 예제:
html
복사편집
<!DOCTYPE html> <html> <head> <style> body { background-color: #f9f9f9; } h1 { color: #2c3e50; text-align: center; } p { font-size: 18px; font-family: 'Verdana', sans-serif; color: #555; } </style> </head> <body> <h1>나의 두 번째 웹페이지</h1> <p>CSS로 글자 색상과 배경을 바꿔봤어요!</p> </body> </html>
브라우저로 열어보면, 색상과 폰트가 적용된 깔끔한 페이지가 보일 거예요 🎉
🚫 CSS 사용 시 주의할 점
- 우선순위: 인라인 > 내부 > 외부 스타일 순으로 적용됨
- 태그 선택자 중복에 주의 – 명확한 클래스나 ID 사용 권장
- 모바일 대응을 위해 나중에 반응형 CSS도 공부해야 해요!
✅ 요약 정리
- CSS는 HTML 요소를 꾸며주는 디자인 언어
- 적용 방법: 인라인 / 내부 / 외부
- 색상, 글꼴, 정렬 등 다양한 시각 요소 제어 가능
- 스타일은 되도록 외부 CSS 파일로 분리하자
👉 다음 편에서는 다양한 레이아웃 구성을 도와주는 CSS 속성들(margin, padding, display, flex)을 배워봅니다. 웹페이지 배치의 핵심!