# CSS - Cascading Style Sheets

- 스타일링 언어
- 계단식(우선 순위)
- Selector(선택자) : 스타일이 적용되는 규칙

h1 { color : green; font-size : 16px;}

Selector(선택자) : h1
Property(속성) : color, font-size
Value(값) : green, 16px;
Declaration(선언) : color:green;, font-size:16px;

---

# Selector의 유형

1. Element selector : 단순, 특정 html을 선택하기 위한 선택자
예제

h1 {
	color:green;
}

h1태그의 글자색상을 초록색으로 변경

2. ID selector
예제

html

<div id="section">
	...
</div>    

css

#section {
	background-color:black;
}

id가 section으로 지정된 태그의 배경색을 검정색으로 변경

3. Class selector
예제

html

<span class="medium">
	...
</span> 

<p class="medium">
  ...
</p>  

css

.medium {
	font-size:20px;
}

p.medium { /* Element selector와 Class selector를 함께 사용한 경우*/ 
	font-size:20px;
}    

class가 medium으로 설정된 폰트의 크기와, p태그 중에 class가 medium으로 설정된 태그의 폰트 크기를 20px로 변경하는 css

4. Universal selector
예제

css

* { /* '*' ---> 애스터리스크*/
	font-size : 20px;
    color : blue;
}

모든 Element의 폰트와 색상을 변경한다

5. Grouping selector
예제

css

h1, h2, p {
	color:black;
    text-align:center;
}

h1, h2, p태그의 컬러와 폰트정렬을 변경

6. Element의 상태와 관련된 selector
예제

• <태그>:hover {속성}
  - 마우스 커서가 element 위에 올라왔을 때
• <태그>:active {속성}
  - 주로 <a> 태그(link)에 사용되는데, element가 클릭됏을 때를 의미
• <태그>:focus {속성}
  - 주로 <input> 태그에서 사용되는데, element가 초점을 갖고 있을 경우를 의미
• <태그>:checked {속성}
  - radio button이나 checkbox 같은 유형의 <input>태그가 체크되어 있는 경우를 의미
• <태그>:first-child, :last-child {속성}
  - 상위 element를 기준으로 각각 첫 번째 child, 마지막 child일 경우를 의미

---