22-04-19 preview

CSS 선언방식
1. 내장방식

<style></style>

2. 인라인 방식

<div style="color: red; margin: 20px;"></div>

3. 링크방식(병렬연결)

<link rel="stylesheet" href="./css/main.css">

4. import 방식(직렬연결)

   css파일에서 @import url("./box.css");

CSS 선택자
1. 기본

- * 전체 선택자
- 태그 선택자
- 클래스 선택자
- 아이디 선택자

2. 복합

- 일치 선택자 ABC와 SYZ를 동시에 만족하는 요소 선택 ex) span.orange
- 자식 선택자 ul > .orange
- 하위(후손) 선택자 div .orange
- 인접 형제 선택자(다음 형제 하나) .orange + li
- 일반 형제 선택자(다음 형제 모두) .orange ~ li

3. 가상 클래스

- :hover 
- :active 마우스를 클릭하고 있는 동안
- :focus  focus 가능하지 않은 요소에 속성으로 tabindex="-1" 추가해주면 포커스 가능해진다.
- :first-child
- :last-child
- :nth-child(n)
- ABC:not(XYZ선택자) 부정선택자   선택자 XYZ가 아닌 ABC 요소 선택

4. 가상 요소
5. 속성