셀렉터(selector)

1. 개념:

HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능

예> 웹페이지의 모든 <h3> 태그에 color:brown 스타일을 적용하는 셀렉터 h3를 만든 사례

 

<style>

 h3{color : brown}

</style>

<h3>programming</h3>

 

2. 태그 이름 셀렉터

태그 이름이 셀렉터로 사용되는 유형

셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용

 

3. 점(.)으로 시작하는 이름의 셀렉터

-HTML 태그의 class 속성으로만 지정 가능

-#으로 시작하는 이름의 셀렉터

-HTML 태그의 id속성으로만 지정가능

 

4. 셀렉터 조합하기

-2개 이상의 셀렉터 조합 -> 조합에 적합한 HTML 태그에만 적용

-자식셀렉터(child selector) -> 부모 자식 관계인 두 셀렉터를 '>'기호로 조합

-자손셀렉터(descendent selector) -> 자손 관계인 2개 이상의 태그 나열

 

5. 전체 셀렉터와 속성셀렉터

- 전체 셀렉터 : 와일드 문자를 사용하여 모든 태그에 적용시키는 셀렉터

예> *{color : green;}

웹페이지의 모든 태그에 적용. 텍스트 색을 green으로 칠함

 

-속성 셀렉터 : HTML 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터

예> input[type=text]{color : red;}

-type속성값이 "text"인 <input>태그에 적용

-<input type = "text>