# 셀렉터 기본
## 미션
아래 내용을 참고하여, 자유 주제 페이지를 만들고, 꾸미시오.
## 개념
#### ⭐️ 셀렉터 기본 구조
셀렉터는 꾸며줄 "대상"을 찾는 문법이다. 대상은 중괄호 앞쪽에 명시하며, 꾸며줄 효과는 중괄호 안쪽에 작성한다.
```
선택_대상 {
/* 꾸며줄 효과 */
}
```
#### ⭐️ 태그로 찾기
html 태그를 직접 명시하여 대상을 선택.
```
/* 모든 h1 태그 선택 */
h1 {
/* 글자색을 토마토로 변경 */
color: tomato;
}
/* 모든 p 태그 선택 */
p {
/* 글자 크기를 14px로 변경 */
font-size: 14px;
}
```
#### ⭐️ 클래스로 찾기
태그에 적용된 class 속성으로 대상을 선택. 클래스로 선택 시, 대상 클래스명 앞쪽에 닷(.) 연산자를 붙인다.
```
/* 모든 male 클래스를 선택 */
.male {
/* 배경색을 파랗게 */
background-color: blue;
}
```
#### ⭐️ 아이디로 찾기
태그에 적용된 id 속성으로 대상을 선택. id로 선택 시, 앞쪽에 샾(#)을 붙인다.
```
/* id가 ceo인 태그를 선택 */
#ceo {
/* 글자를 두꺼운 볼드체로 적용 */
font-weight: bold;
}
```
## 구글링 힌트
- "css 태그 셀렉터"
- "css 클래스 셀렉터"
- "css 아이디 셀렉터"