준비중..
04 CSS 스타일링
# 웹 페이지를 만들다: 스타일링
이번시간에는 웹 페이지를 다채롭게 꾸며보자.
## 학습목표
+ CSS 선택자의 이해
## CSS란?
CSS는 웹 페이지를 꾸며주는 언어이다. 먼저 예제 페이지를 확인하자.
위 페이지를 아래와 같이 꾸며보자. 어떡하면 될까?
## CSS 선택자
간단하게 생각하자. 아래처럼 하면 된다.
1. "나를 소개합니다" 선택 -> 배경색: 검정, 글자색: 흰색
2. "좋아하는 음식" 선택 -> 배경색: 초록, 글자색: 흰색
어떻게 배경과 글자색을 바꿀 수 있을까? CSS 언어를 사용하면 된다. 다음과 같은 `custom.css` 파일을 만들어 주자.
custom.css
```
// h1 선택
h1 {
background-color: black; // 배경색 지정
color: while; // 글자색 지정
}
// h2 선택
h2 {
background-color: green; // 배경색 지정
color: while; // 글자색 지정
}
```
## HTML에 CSS 링크 걸기
이제 CSS 파일을 HTML와 연결 시켜주면 원하는 배경과 글자 색이 적용된다. 아래의 `<link>` 태그가 이 동작을 한다.
test.html
```
<!DOCTYPE html>
<html>
<head>
<!-- custom.css 파일을 해당 페이지에 연결 -->
<link type="text/css" rel="stylesheet" href="custom.css"/>
<title>자기소개</title>
</head>
<body>
<h1 style="background-color: black; color: white;">나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
<h2 style="background-color: green; color: white;">좋아하는 음식</h2>
<ol>
<li>치 킨</li>
<li>보 쌈</li>
<li>샐러드</li>
</ol>
</body>
</html>
```
위 코드가 동작하려면 html 문서와 css 파일의 위치가 동일한 디렉토리여야 한다.
## 실습
위에서 진행한 내용은 아래 링크를 통해서 확인해 볼 수 있다.
+ https://jsfiddle.net/sehongpark/f2xkcbrz/2/
## 요약
1. CSS: HTML문서를 꾸며주는 언어
2. CSS 선택자: HTML 특정 부분을 선택하여 속성을 지정
3. CSS 링크: CSS 적용을 위해 head 에서 링크를 걸어야 함