[CSS] Selector(선택자)

* 들어가기에 앞서, CSS 링크하기

CSS 링크하기

html

link 태그로 css 파일 링크하기.

 

css

백그라운드 컬러와 폰트 사이즈 및 색상 설정.

 

출력

 

* Selector(선택자) 기본 실습

html

css

p: 태그 선택자

.center: 클래스 선택자

#center: 아이디 선택자

 

 

출력

 

 

css

p.center: p 태그 중 center라는 클래스 이름을 가진 것 선택

 

 

출력

 

연결 선택자(,)

html

css

속성과 값이 같을 경우 연결 선택자(,)를 사용하여 한번에 작성 가능.

 

 

출력

 

하위 선택자

html

css

출력

 

* 선택자 적용 우선순위

1. !important 스타일

2. 인라인 스타일

3. 아이디 셀렉터 스타일

4. 클래스 셀렉터 스타일

5. 태그 셀렉터 스타일

 

동일한 CSS 속성이 중복 사용될 경우, 왼쪽의 우선순위에 따라 적용된다.

 

 

html

css

출력

아이디 선택자에 green을 적용했지만, 인라인 선택자가 우선하기에 gold 색상이 적용되었다.

 

 

!important

출력