[CSS 1강] 웹사이트에 색을 입히다! CSS 정의와 연동 방법 3가지
"뼈대 위에 예쁜 옷을 입혀볼 시간입니다."
안녕하세요! 지난 HTML 시리즈를 통해 웹사이트의 뼈대를 세우는 법을 배우셨나요? 이제는 그 밋밋한 뼈대에 색을 입히고 디자인을 더해줄 CSS(Cascading Style Sheets)를 배울 차례입니다.
1. CSS란 무엇인가요?
CSS는 HTML로 만든 문서의 스타일(디자인)을 담당하는 언어입니다. 배경색, 글꼴, 크기, 위치 등을 조절하여 사용자에게 보기 좋은 화면을 만들어줍니다.
✅ HTML: "여기에 제목과 본문을 배치해줘" (구조)
✅ CSS: "제목은 파란색으로, 본문은 나눔고딕체로 해줘" (디자인)
2. CSS를 적용하는 3가지 방법
HTML 문서에 CSS를 입히는 방법은 크게 세 가지가 있습니다.
- ① 인라인 스타일(Inline Style): 태그 안에 직접 씀 (추천하지 않음)
<h1 style="color: red;"> - ② 내부 스타일 시트(Internal Style): <head> 안에 <style> 태그로 작성
- 한 페이지에만 스타일을 적용할 때 유용 - ③ 외부 스타일 시트(External Style): 별도의 .css 파일을 만들어 연결 (가장 추천!)
- 여러 페이지에 동일한 디자인을 적용할 때 필수
3. 외부 스타일 시트 연결하기 (실습)
가장 실무적인 방법인 **외부 스타일 시트 연결법**을 실습해 봅시다. HTML 파일의 <head> 섹션에 아래 코드를 추가하세요.
<!-- HTML 파일 (index.html) -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- CSS 파일 (style.css) -->
body {
background-color: #f0f2f5; /* 배경색 변경 */
}
h1 {
color: #ff4757; /* 제목 색상 변경 */
text-align: center; /* 가운데 정렬 */
}
p {
font-size: 18px; /* 글자 크기 변경 */
color: #333;
}
CSS 공부의 시작!
CSS를 연결할 줄 안다면 이제 웹 디자이너의 길에 들어선 것입니다.
다음 2강에서는 원하는 요소만 골라서 꾸미는 '선택자와 박스 모델'을 배워볼게요!
'Frontend > CSS' 카테고리의 다른 글
| [CSS 5강] 실전! 밋밋했던 포트폴리오에 세련된 디자인 입히기 (0) | 2026.02.10 |
|---|---|
| [CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기 (0) | 2026.02.10 |
| [CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상 (0) | 2026.02.10 |