[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)

[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)

1. 선택자란?

- 특정 항목(HTML)을 선택하여, 해당 항목의 속성을 변경.

1) tag 선택자 : 특정 태그(HTML)를 선택하여, 해당 태그의 속성을 변경.

선택자(특정 태그 명) + { 설정 }

div { background-color: yellow; border: 5px solid rebeccapurple; } h1 { background-color: sandybrown ; } 제목입니다 본문입니다 제목입니다 본문입니다 또 하나의 DIV 입니다

CSS 선택자 반영 결과 예시

2) 다중 태그 선택 : 여러 태그를 선택하여, 해당 태그의 속성을 변경

선택자,선택자,선택자 + { 설정 }

cf) 특정 태그에 다중 설정시 가장 마지막으로 설정된 값으로 홈페이지 반영됨.

header,nav,section { color: yellow; } h1,p { background-color:turquoise; } p{ background-color: thistle; } MY HOMEPAGE HTML5 CSS3 JAVASCRIPT JQUERY What is HTML5? HTML5 is goooooooooooooooooooooooooooooooooooooooooooooooooooooooood! xxx주식회사 서울시 00구00동

다중 tag 선택자 결과물

3) 전체 선택자(*) : 전체 설정

* + { 설정 }

- 전체선택자도 태그선택자 혹은 다중태그선택자과 혼합해서 사용 가능.

- 특정 태그에 마지막으로 설정된 형태로 화면에 표시됨.

* { font-weight: 500; }

* 태그 결과물 화면 표시

from http://yanacoding.tistory.com/15 by ccl(A) rewrite - 2021-11-18 12:01:36