반응형
CSS 선택자
- 스타일을 적용할 HTML 요소를 가리키는데 사용
- 우선 순위는 HTML 요소 선택자 > 인라인 스타일 > ID 선택자 > 클래스 선택자 > 태그 선택자 순으로 높음
- 사용 예시
<!-- 예시 1 --> <body> <div class="color">안녕하세요</div> <style> .color { color: red; } .color { color: green; } </style> </body> <!-- 같은 선택자로 사용될 경우 마지막 작성된 코드를 우선하기에 초록색으로 출력 --> <!-- 예시 2 --> <html> <head> <style> #my-box .text{ color: black } .black{ color: red } .important-black{ color: red !important } </style> </head> <body> <div id="my-box"> <div class="text">My text 1</div> <div class="text black">My text 2</div> <div class="text important-black">My text 3</div> </div> </body> </html> <!-- my text1(검은색) --> <!-- my text2(검은색) --> <!-- my text3(빨간색) --> - HTML 요소 선택자
- CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있음
<style> h1 { color : red; border: black; } </style> <h1> 스타일 적용 </h1> - 아이디(id) 선택자
- CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
<style> #styles { color : red; border: black; } </style> <h1 id="styles"> 스타일 적용 </h1> - 클래스 선택자
- 특정 집단의 여러 요소를 한번에 선택 할 때 사용
<style> .styles { color : red; border: black; } </style> <h1 class="styles"> 스타일 적용 </h1> <p class="styles"> 여기에도 적용 </p> - 그룹 선택자
- 위에 언급된 선택자들을 같이 사용하고자 할때 사용
<style> h1 {color : red} h1, h2 {text-align : center} h1, h2, p {background-color : black} </style>
반응형
'개발 > html & CSS' 카테고리의 다른 글
| HTML의 기본 개념 - 정리 (0) | 2023.03.19 |
|---|---|
| CSS의 기본 개념 - 정리 2 (0) | 2023.03.10 |
| CSS의 기본 개념 - 정리 1 (0) | 2023.03.09 |
댓글