CSS 선언 방식
1. 내장 방식
<style>css내용</style>
2. 링크 방식
<link rel="stylesheet" href="./파일이름.css">
3. 인라인 방식
4. @import 방식

CSS 구성

선택자{속성: 값;}
선택자 : 스타일(css)을 적용할 대상

CSS 선택자

기본, 복합, 가상클래스, 가상요소, 속성

기본

* : 전체선택자 (Universal Selector)

: 모든 요소를 선택

*{
	color : black;
}

ABC : 태그 선택자 (Type Slector)

: 태그 이름이 ABC인 요소 선택

div{
	background-color: red;
}

.ABC : 클래스 선택자 (Class Selector)

: HTML class 속성의 값이 ABC인 요소 선택

.class_name{
	background-color: orange;
}

#ABC : 아이디 선택자 (ID Selector)

: HTML id 속성의 값이 ABC인 요소 선택

#id_name{
	background-color: blue;
}

복합

ABC.XYZ : 일치 선택자 (Basic Combinator)

: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

<span class="orange">오렌지를 먹은 지 얼마나 오랜지</span>

span.orange{
	background-color: red;
}

ABC > XYZ : 자식 선택자 (Child Combinator)

: 선택자 ABC의 자식 요소 XYZ 선택

<ul>
  <li>사과</li>
  <li class="orange">오렌지</li>
</ul>

ul > .orange{
	background-color: orange;
}

ABC XYZ : 하위(후손) 선택자 (Descendant Combinator)

: 선택자 ABC의 하위(후손) 요소 XYZ 선택, '띄어쓰기'가 선택자의 기호!

<div>
  <ul>
  	<li>사과</li>
  	<li class="orange">오렌지</li>
  </ul>
  <span class="orange">오렌지를 먹은 지 얼마나 오랜지</span>
</div>

div .orange{
	background-color: blue;
}

=> 이 경우 li의 오렌지와 span의 오렌지 드립이 모두 선택됨

가상클래스 선택자

HOVER

: 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

a:hover{
	color : red;
}

상속되는 CSS 속성들

대부분 글자/문자 관련 속성들! (단, 모든 글자/문자는 아님!)
font-style : 글자기울기
font-weight : 글자 두께
font-size : 글자 크기
line-height : 줄 높이
font-family : 폰트(서체)
color : 글자 색상
text-align : 정렬
...

선택자 우선순위

우선순위 : 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언이 우선 적용?
1. 점수가 높은 선언이 우선
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선
+) 주로 선언이 구체적일 수록 우선순위가 높음
예시
ID, Class, 태그, 전체 선택자 중 ID 선택자가 가장 우선순위가 높음