📑 개요
처음 선택자란 단어를 보면 선택자가...... 뭔데?;; 라는 생각부터 들 것이다.
나도 처음 선택자란 단어가 굉장히 낯설게 다가왔는데
쉽게 생각하면 선택자란 등수매기기 정도라고 생각하면 될 것 같다.
이 등수라는 것은 CSS에서 생각보다 중요하게 작용하는데
선택자의 우선순위를 알아야 CSS를 작성할 때 어떤 CSS가 우선적으로 들어갈지 더 명확한 설계가 가능해진다.
모든 레이아웃이 똑같은 규격의 CSS를 가진다면 굉장히 편하겠지만
실제로 웹을 제작하다보면 불가능한 일이기 때문에
웹을 만들 때엔 선택자의 우선순위를 통해 중복된 CSS 값을 가지더라도 어떤 CSS를 더 우선적으로 사용할 것인지 명시한다.
그럼 지금부터 선택자에 대해 알아보자!
❓ 선택자(Selector) 우선순위?
CSS 선택자와 선택자 우선순위의 정의를 먼저 간단히 알아보자.
- CSS 선택자
CSS규칙을 적용할 요소를 정의하며,
기본 선택자, 그룹선택자, 결합자로 나뉘어져 있다.
선택자에 대한 자세한 정보는 사이트에서 확인할 수 있다.
아래 사이트를 둘러보면 그 외에도 많은 정보가 있다.
front web에서 굉장히 유명한 문서 사이트이므로 front를 공부한다면 해당 문서에서 궁금한 것을 찾아서 읽어보는 걸 추천한다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors
CSS 선택자 - CSS: Cascading Style Sheets | MDN
CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.
developer.mozilla.org
- 선택자 우선순위
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 지 결정하는 방법이다.
...
......
.....................???????????????
????????????????????????????????????????
칾 다운...
일단 물음표는 거두고 진정하자.
이렇게 말하면 분명 와닿지 않을 것을 알아서 비유를 준비했다.
이걸 좀 더 이해하기 쉽게 설명해보겠다.
각박한 점수주의의 세상에 아이 A, B가 있고 하나의 도화지가 있다.
A는 시험에서 20점을 받았고 B는 100점을 받았다.
이 도화지를 가장 먼저 온 A라는 아이가 파란색으로 칠하고 동그라미 모양으로 자르고 싶다고 해서 그대로 해주려는데,
그 순간 B라는 아이가 자기는 빨간색이 좋다고 한다.
둘의 시험점수를 물어보니 B가 100점이기에 B의 의견을 들어주기로 했다.
B는 모양에 관해선 아무 말이 없었기 때문에
도화지는 B가 원한 빨간색에 A가 원한 동그라미 모양이 되었다.
여기서 요소는 도화지이며 선언은 A, B가 된다. 원하는 색상과 모양은 선언에서 적용할 CSS 속성이다.
그리고 시험점수가 바로 선택자의 우선순위가 되는 것이다.
물론 완벽한 비유는 못되니, 아래에서 더 자세한 설명을 들어가보자.
✔ 선택자(Selector) 우선순위의 규칙과 점수
- 규칙
1. 점수가 높은 선언의 우선순위가 높다.
2. 점수가 같다면 가장 마지막에 작성된 선언의 우선순위가 높다.
- 점수
- !important : 속성 기준 가장 우선
ex) !important;
* 가장 우선시 되는 것으로 코드 작성시 수정이 어렵기 때문에 실제 코드에 사용할 때 주의가 필요하다. - 인라인 스타일 : 우선 순위 1번 (요소 기준 가장 우선)
ex) style = " "
* 수정을 하기 위해서는 해당 코드에서 직접 수정해야 하기 때문에 코드의 재사용성이 떨어지므로 특별한 경우가 아니라면 사용하지 않는 것을 추천한다. - ID 선택자 : 우선 순위 2번 (100점)
ex) #selector - CLASS 선택자 : 우선 순위 3번 (10점)
ex) .selector - 속성 기반 선택자 : 우선 순위 3번 (10점)
ex) a[href*="#"] - 가상 클래스 : 우선 순위 3번 (10점)
ex) a:hover - 가상 요소 : 우선 순위 3번 (10점)
ex) p::before - 태그 선택자 : 우선 순위 4번 (1점)
ex) p - 전체 선택자 : 우선 순위 5번 (0점)
ex) *
* 전체에 적용이 된다.
- 사용 예시
// 코드가 두개씩 적혀있는 것은 엔터를 기준으로
// 위에 적힌 것이 <style></style>에 들어가는 것이고
// 아래에 적힌 것이 <body></body>에 사용되는 예시이다.
// !important
div {
color: red !important;
}
// 인라인 스타일
<div>
<p style="color: red;">Contents</p>
</div>
// ID 선택자
#colorRed {
color: red;
}
<div id="colorRed">
<p>Contents</p>
</div>
// CLASS
.colorRed {
color: red;
}
<div class="colorRed">
<p>Contents</p>
</div>
// 속성 기반 선택자
[data-color="red"] {
color: red;
}
<div data-color="red">
<p>Contents</p>
</div>
// 가상 클래스
a:hover {
color: red;
}
<a href="#">Hover me</a>
// 가상 요소
p::before {
content: "Before content";
color: red;
}
<p></p>
// 태그 선택자
p {
color: red;
}
<p>Contents</p>
// 전체 선택자
* {
color: red;
}
- 선언 순서에 따른 우선순위
같은 점수일 경우 가장 마지막에 작성된 yellow 색상이 적용된다.
.changeColor {
color: red;
}
.changeColor {
color: yellow;
}
✨ 마무리
처음엔 어려운 내용일 것이라 생각되지만 프로젝트 만지작 거려보면 다 이해된다.
CSS는 진짜로... 직접 써보는 게 답이라고 생각하기 때문에 모르겠으면 그냥 vscode 열어보자.
- 요약
- 선택자 우선순위
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 지 결정하는 방법 - 규칙
1. 점수가 높은 선언의 우선순위가 높다.
2. 점수가 같다면 가장 마지막에 작성된 선언의 우선순위가 높다 - 점수
- !important : 속성 기준 가장 우선
- 인라인 스타일 : 우선 순위 1번 (요소 기준 가장 우선)
- ID 선택자 : 우선 순위 2번 (100점)
- CLASS 선택자 : 우선 순위 3번 (10점)
- 속성 기반 선택자 : 우선 순위 3번 (10점)
- 가상 클래스 : 우선 순위 3번 (10점)
- 가상 요소 : 우선 순위 3번 (10점)
- 태그 선택자 : 우선 순위 4번 (1점)
- 전체 선택자 : 우선 순위 5번 (0점)
'개발 > Front' 카테고리의 다른 글
| [CSS] Flexbox와 flex container & flex item의 속성 (0) | 2024.01.18 |
|---|---|
| [CSS] SCSS의 특징 & CSS, Sass와의 차이점 (0) | 2024.01.18 |
| [CSS] Cascading과 우선순위 (0) | 2024.01.17 |
| [CSS] 적응형, 반응형 웹사이트와 브레이크 포인트 & 미디어쿼리 (1) | 2024.01.11 |
| [CSS] px, em, rem, vh, vw, %의 특징과 차이 (2) | 2024.01.10 |
