준비중..
06 id 와 class
# id 와 class
단일 요소 스타일링을 위한 id와, 복수 요소 스타일링을 위한 class에 대해 알아봅시다.
---
<a name="id-class-selector"></a>
### id & class 셀렉터
우리는 앞서 CSS문법에 대해 배웠습니다.(참조링크: [CSS문법구조](http://cloudstudying.kr/lectures/69#css-syntax)) 선택자의 위치에는 html 태그가 올 수 있었습니다.
```
selector {
property: value;
}
```
이번 장에서는 단일 요소를 선택하기 위한 **id 선택자**와 여러 요소를 선택할 수 있는 **class 선택자**에 대하여 알아봅시다.
---
<a name="id-selector"></a>
### id 선택자
id 선택자는 여러 HTML태그 중 단일요소를 선택하기 위해 사용합니다. 아래 html을 예로 들어봅시다.
```html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<p>가나다라마바사</p>
<p>ABCEDFG</p>
<p>123456789</p>
<p>!@#$%^*()</p>
</body>
</html>
```
한글만을 선택해서 글자색을 변경해봅시다. 먼저 html 태그에 id 값을 추가합니다.
```
...
<p id="ko">가나다라마바사</p>
<p>ABCDEFG</p>
...
```
CSS파일(stylesheet.css)에서 id선택자를 사용하여 글자 색을 변경하여 마무리합니다~~ id 선택자는 해당 HTML태그의 id값의 머리에 `#`추가 표기하여 사용합니다.
```
#ko {
color: red;
}
```
---
<a name="class-selector"></a>
### class 선택자
class 선택자는 여러개의 HTML 요소를 선택하기 위해 사용합니다. 계속해서 html 코드를 예로 들어봅시다.
```
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<p id="ko">가나다라마바사</p>
<p>ABCEDFG</p>
<p>123456789</p>
<p>!@#$%^*()</p>
</body>
</html>
```
위 코드에서 영어와 기호의 배경색과 글자색을 변경하기 위해서 class 선택자를 사용해봅시다. 먼저 해당 태그들에 class 값을 지정해줍니다.
```
...
<p id="ko">가나다라마바사</p>
<p class="inverse">ABCEDFG</p>
<p>123456789</p>
<p class="inverse">!@#$%^*()</p>
...
```
다음으로 CSS파일(stylesheet.css)에서 class 선택자를 사용하여 마무리!! class 선택자는 해당 태그의 class 값의 머리에 `.`을 추가표기하여 사용합니다.
```
#ko {
color: red;
}
.inverse {
background-color: black;
color: white;
}
```
---
### 핵심 키워드
+ [id & class 셀렉터](id-class-selector)
+ [id 선택자](#id-selector)
+ [class 선택자](#class-selector)
---
### Next..
bootstrap 을 이용하여 간단한 웹 페이지를 만들어 봅시다.