[HTML, CSS][5]Css Style Sheet, Selector[스타일 시트, 선택자]

목차

- 내부 스타일시트

- 외부 스타일시트

- 인라인 스타일시트

- 전체 선택자

- 태그 선택자

- 아이디 선택자/클래스 선택자

- 그룹 선택자

- 상속

- 인접 형제 선택자

- 일반 형제 선택자

- 하위 선택자

---

각각의 특징들의 형태를 알아보자

 

 

! 를 입력하고 Ctrl + Tab을 입력하면 자동완성이 된다. 

 

! 입력

 

자동완성되는 모습

 

내부 스타일시트의 모습

 

내부스타일시트

 

구현되는 모습

 

 

인라인 스타일시트

 

인라인스타일시트

 

구현되는 모습

 

외부 스타일 시트

 

외부스타일 시트

 

test.css라는 외부 스타일 시트를 만듬

 

구현되는 모습

 

 

 

전체 선택자 *

 

전체선택자 적용

 

구현되는 모습

 

태그 선택자

 

태그선택자

 

구현되는 모습

 

아이디 선택자 / 클래스 선택자

# /.

 

아이디 선택자/ 클래스 선택자

 

구현되는 모습

 

그룹 선택자

 

그룹선택자

 

구현되는 모습

 

Tips

여러 선택자를 같이 선언할 수 있다.

 

일괄 적용 되는 모습

 

스타일시트 특성 - 상속 성

div안에 다 일괄 적용 가능하다!

 

 

상속성

 

상속이 적용되는 모습

 

div 태그 안에 있는 값들이 적용된다

 

인접 형제 선택자

 

인접 형제선택자

 

txt01와 가까운 h1만 적용되는 모습

 

일반 형제 선택자

 

일반 형제선택자

 

적용된 클래스를 제외하고 적용된 모습

 

하위 선택자

 

경로상 부모를 지정하고 바로 아래를 지정할 때 사용

 

하위선택자

 

안쪽만 적용되는 모습

 

 

---