CSS에는 3가지 종류의 선택자가 있다.
- tag 선택자
- class 선택자
- id 선택자
이들 선택자의 쓰임은 다음과 같이 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>나의 객관화</title>
<meta charset="utf-8" />
<style>
a {
color: black;
text-decoration: none;
}
.saw {
color: green;
}
#active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">채소</a></h1>
<ol>
<li><a href="1.html" class="saw">나의 현재</a></li>
<li><a href="2.html" class="saw" id="active">나의 미래</a></li>
<li><a href="3.html">앞으로 해야할 일</a></li>
</ol>
</body>
</html>
tag 선택자는 다음과 같이 쓰였다.
a {
color: black;
text-decoration: none;
}
class 선택자는 다음과 같이 쓰였다.
.saw {
color: green;
}
마지막으로 id 선택자는 다음과 같이 쓰였다.
#active {
color: red;
}
차이점이 보이는가? tag 선택자는 다른 기호없이 그냥 써주면 되고 class 선택자는 앞에 .(comma)를, id선택자는 #(hash)를 붙여주면 된다.
그렇다면 위 코드로 CSS를 적용하면 리스트의 글자색은 각각 어떻게 변해있을까? 한번 생각해보자.
결과는 다음과 같다.
보다시피 첫번째 줄은 a태그와 class에 동시에 지정되있음에도 불구하고 class 선택자의 영향을 받아 초록색으로 변했다.
이는 즉 tag 선택자보다 class 선택자의 힘이 더 크다는 의미이다.
두번째 줄은 a태그, class, id 모두 지정되있음에도 불구하고 결국에는 id 선택자의 영향을 받아 빨간색으로 변했다.
이는 즉 id 선택자의 힘이 가장 크다는 의미이다.
정리해보면, 선택자의 힘의 크기 비교는 다음과 같다.
tag 선택자 < class 선택자 < id 선택자
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #9.그리드 (0) | 2021.12.09 |
|---|---|
| [HTML/CSS] #8.박스 모델 (0) | 2021.12.05 |
| [HTML/CSS] #6.CSS 기본 문법 (0) | 2021.11.30 |
| [HTML/CSS] #5.링크 (0) | 2021.11.30 |
| [HTML/CSS] #4.목록 태그 (0) | 2021.11.29 |
