selector 셀렉터
: HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능
<style>
h3 { color: brown; } -> h3이 셀렉터
</style>
<h3> Web Programming </h3> -> 셀렉터 스타일 적용
1. 태그 이름 셀렉터
: 태그 이름이 셀렉터
- 태그이름은 콤마( , )로 분리
예) h3, li {color: brown;} = <h3>, <li> 태그에 스타일 적용
2. class(.) 셀렉터
: class 속성이 같은 모든 태그에 적용
- .으로 시작되는 셀렉터 : 모든 태그에서 스타일 적용
- 태그 이름과 같이 형성된 .셀렉터 : 해당 태그에서만 스타일 적용
예) body.main { color: red; }
<body class=“main”> 적용 가능
<div class=“main”> 적용 불가
3. id (#) 셀렉터
: id 속성이 같은 모든 태그에 스타일 적용
- #으로 시작되는 셀렉터 : 모든 태그에서 스타일 적용
- 태그 이름과 같이 형성된 # 셀렉터 : 해당 태그에서만 적용 가능
예) #list { background: mistyrose ;}
<ul id="list"> -> ul에 list 스타일 적용가능
<li><span>HTML5</span></li>
<li><strong>css</strong></li>
<li>JAVASCRIPT</li>
</ul>
예) div#etc { color: red; } -X-> <p id=“etc“>__</p> 적용 불가
4. 셀렉터 조합하기
: 2개 이상의 셀렉터 조합으로 태그 지정
1) 자식 셀렉터 (child selecter)
: 부모-자식 셀렉터를 ( > ) 기호로 조합.
div > strong { color: red; } = div의 자식 strong에 적용
div > div > strong { color: red; } = div의 div의 자식 strong에 적용
2) 자손(후손) 셀렉터 (descendent selector)
: 자손 관계인 2개 이상의 태그를 나열
ul strong { color: red; }
5. 전체 셀렉터 (*)
: 웹페이지의 모든 html태그에 적용
* { color: red; }
6. 속성 셀렉터 [ ]
: 특정 속성에 값이 일치하면 적용
https://jungeun980906.tistory.com/148
태그명 [ 속성=값 ] { }
input[type=text] { color: red; } = type이 text인 <input>태그 적용
7. 가상 클래스 셀렉터
: 상황이 발생하였을 때 적용
* ( : )와 hover 사이에는 띄어쓰기 불가
'HTML.CSS.JS > css' 카테고리의 다른 글
| [CSS] 속성선택자 예시 (0) | 2023.04.06 |
|---|---|
| [CSS] css 규칙 (0) | 2023.04.06 |
| [CSS] 스타일 시트 작성 방법 (0) | 2023.04.06 |
| [CSS] margin 설정 (0) | 2023.04.06 |
| [CSS] 색상 / 텍스트 / 목록 / 표 스타일 지정 (0) | 2023.04.05 |