▶ 선택자, 셀렉터(selector)
- HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능
- CSS 스타일을 적용할 태그를 선택하는 기능
예제) 웹 페이지의 모든 <h3> 태그에 스타일을 적용하는 선택자
▶ 선택자 설명을 위한 샘플 HTML 페이지
▶ 태그 이름 선택자
태그이름 { 스타일 }
- 태그 이름이 선택자로 사용되는 유형
- 선택자와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용
▶ class 선택자
.클래스이름 { 스타일 }
- 점(.)으로 시작하는 이름의 선택자
- class 선택자는 문서에서 여러번 적용 가능
- class 속성이 같은 모든 태그에 적용
※ '.warning'과 같이 점(.)으로 시작하는 선택자는 어떤 HTML 태그에서도 class속성에 사용할 수 있지만, 'body.main'과 같이 태그 이름(body)과 함께 만들어진 경우 해당 태그( <body> )에서만 사용가능하다 ※
<div class="main"> 학습 내용 </div> 오류발생 → main선택자는 오직 <body> 태그에서만 사용가능
▶ id 선택자
#id이름 { 스타일 }
- #으로 시작하는 이름의 선택자
- id 선택자는 문서에서 한 번만 적용 가능
- id 속성이 같은 모든 태그에 적용
- id 선택자 이름 앞에 태그 이름을 사용하여 특정 태그에만 적용되도록 제한할 수 있다
ex) div#etc{ background: mistyrose; }
<p id="etc">안녕하세요</p> //etc 선택자는 <p> 태그에서 사용 불가능
▶ 2개 이상의 선택자 조합
태그이름1, 태그이름2 { 스타일 }
- 조합에 적합한 HTML 태그에만 적용
- 여러 선택자를 선택하여 동시에 스타일을 적용
▶ 자식 선택자(child selector)
부모태그 > 자식태그
- 부모 자식 관계인 두 선택자를 '>' 기호로 조합
ex) div > strong { color:blue; } // <div>의 직계 자식인 <strong>에 적용되는 스타일 시트
▶ 자손 셀렉터(descendent selector)
상위태그 하위태그
- 자손 관계인 2개 이상의 태그 나열
- 부모 태그에 포함된 하위 태그를 모두 선택하며 자손 선택자라 한다
ex) ul strong{ color:blue; } // <ul>의 자손 <strong>에 적용되는 스타일 시트
예제) 자식 선택자와 자손 선택자
▶ 전체 선택자(universal selector)
- 와일드 문자(*)를 사용하여, 모든 태그에 적용시키는 선택자
ex) * { color:green;} // 웹 페이지의 모든 태그에 적용, 모든 태그 텍스트의 색을 green으로 칠함
▶ 속성 선택자
- HTML 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 선택자
ex) input[type=text] { color:red; } // type속성값이 "text"인 <input>태그에 적용
▶ 가상 클래스 선택자 (pseudo-class selector)
- 어떤 조건이나 상황에서 스타일을 적용하도록 만든 선택자
- 40개 이상의 많은 가상 클래스 선택자가 존재
ex) a:visited { color:red;} // 방문한 <a>의 링크 텍스트 색을 red로 출력
ex) li:hover{ background:yellow; } // <li> 태그에 마우스가 올라오면, yellow을 배경색으로 출력, 내려가면 복귀
▷ 여러가지 가상 클래스 선택자
예제) :first-letter와 :hover의 사용
예제) 선택자 활용
참고문헌: DO it! HTML5 + CSS + 자바스크립트 웹 표준의 정석, 명품 HTML5 + CSS3 + Javascript 웹 프로그래밍
'[CSS]' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2022.10.22 |
|---|---|
| [CSS] 텍스트, 폰트 (0) | 2022.10.15 |
| [CSS] 색 표현 (0) | 2022.10.14 |
| [CSS] CSS규칙 (0) | 2022.10.08 |
| [CSS] CSS 스타일 시트 (0) | 2022.09.28 |
댓글