[생활코딩] CSS : #1 선택자 🚩

May 10 2022

 

1. 태그 선택자

 

 

a { /* selector */
 /* Declaration */
	color:red; /* property:value */
}

 

👉 'a' 태그가 걸려있는 모든 부분에 적용되는 조건

 

 

 

예를 들면,

 

a { 
	color:red; 
	font-size:45px; /* 폰트 사이즈 */
	text-align:center; /* 폰트 정렬 */
}

 

위와 같이 'a' 태그의 폰트 색, 사이즈, 정렬을 설정할 수 있다.

 

 

 

---

 

2. 클래스 선택자

 

.

 

.saw {
	color:gray;
}
.
.

<a href="1.html" class="saw">HTML</a>
<a href="2.html" class="saw">CSS</a>
<a href="3.html">JavaScript</a>

 

👉 'saw'라는 이름의 클래스에 적용되는 조건

 

 

 

 

.saw {
	color:gray;
}
.active {
	color:red;
}
.
.

<a href="1.html" class="saw">HTML</a>
<a href="2.html" class="saw active">CSS</a>
<a href="3.html">JavaScript</a>

 

👉 가장 마지막 선택자의 우선순위가 가장 높다.

👉 우선순위를 다르게 해야 한다.

 

 

 

---

 

3. 아이디 선택자

 

#

 

 

#active {
	color:gray;
}
.active {
	color:red;
}
.
.

<a href="1.html" class="saw">HTML</a>
<a href="2.html" class="saw" id="active">CSS</a>
<a href="3.html">JavaScript</a>

 

👉 클래스보다 우선순위가 높다.

 

 

 

---

 

정리하자면,

• 우선순위는 아이디 선택자(#) > 클래스 선택자(.) > 태그 선택자 이다.
• 그 이유는 아이디 선택자는 중복이 금지된다.
• 예를 들면, 주민등록번호와 학번과 같은 것이라 생각할 수 있다.
• 따라서, 태그 선택자는 상대적으로 포괄적, 아이디 선택자는 구체적이다.

 

 

 

---

 

 

참고

 

 

CSS Selectors Reference (w3schools.com)

https://www.youtube.com/watch?v=ONcmkf07EuI&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62