CSS 선택자 (CSS selector)란?
- 하나의 CSS 규칙을 만들때 어떤 html요소를 선택할 지 정의하는 것입니다.
- https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors
CSS 선택자 - Web 개발 학습하기 | MDN
CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합
developer.mozilla.org
- CSS 스타일링뿐만이 아닌, javascript를 활용하기 위해서도 선택자를 알고있어야 합니다.
자주 사용되는 선택자
- Type Selector
/* Type Selector */
h1{
color: blue;
}
> 태그 셀렉터라고도 한다.
> 태그를 선택자로 사용하는것
> 모든 태그에 영향을 주므로 일관적인 스타일 적용에 사용한다.
- Class Selector & id Selector
<style>
/* Class Selector */
.h1Class{
color: green;
}
.red{
color: red;
}
/* ID Selector */
#welcome-title{
color: blue;
}
</style>
<h1 class="h1Class"> 클래스 선택자가 적용된 태그입니다. </h1> <!-- color: green 이 적용 -->
<h1 id="welcome-title">아이디 선택자가 적용된 태그입니다. </h1> <!-- ID Selector 인 color: blue 가 적용 -->
<h1> 클래스 선택자가 적용되지 않은 태그입니다. </h1>
<!-- 클래스는 태그에 영향받지 않고 작성할 수 있다. -->
<h1 class="red"> 클래스 red 가 적용되어있습니다. </h1>
<p class="red"> 클래스 red 가 적용되어있습니다. </p>
> 클래스 명, 또는 아이디 명을 선택자로 사용하는것
> 클래스는 중복이 가능하지만, 아이디는 중복되지 않은 유니크한 속성으로 사용한다.
= 클래스 범위가 아이디 범위보다 크다
'웹 프론트 엔드' 카테고리의 다른 글
CSS 선택자 - 가상 클래스 선택자 : child & of-type (0) | 2024.03.11 |
---|---|
CSS 선택자 - 속성 선택자 (0) | 2024.03.11 |
CSS 캐스캐이딩 원칙 (0) | 2024.03.11 |
CSS 개요 (0) | 2024.03.11 |
HTML 폼 관련 요소 (0) | 2024.03.06 |