중복을 줄이기 위하여, CSS의 특징인 class를 이용할 수 있다.
웹페이지에 있는 모든 태그 중에서, saw라는 class 값을 가지고 있는 태그들을 하나로 묶어서 원하는 속성(property)를 부여할 수 있다.
이렇게 class에 태그를 추가하면 css에서 선택자 .@@@{ }를 통해 "class 값이 '@@@'인 태그"를 묶을 수 있다.
(@@@는 class의 태그 이름 예시)
이렇게 묶은 태그들에 속성을 부여하여 사용할 수 있다.
<head><style>
.saw {
color:red;
}
.active {
color:gray;
}
a {
color: black;
}
h1 {
font-size:45px;
}
</style></head>
...
<body>
<h1><a href="index.html"> WEB </a></h1>
<a href="1.html" class="saw active"> I AM TEXT </a>
</body>위와 한번에 여러개의 class 선택자를 이용할 경우 태그에 가까운 선택자(active)가 더 우선적으로 적용된다.
또한, 태그선택자에 대하여 class 선택자가 우선한다.
=> I AM TEXT 가 gray로 표시된다. (1. class선택자가 태그선택자보다 우선적용되고 2. 더 가까운태그인 active태그가
또한, id 선택자를 이용하면 ###{ }를 통해 "id값이 '###'인 태그"를 묶을 수 있다.
(###은 id선택자의 태그 이름 예시)
이떄, id선택자는 class 선택자에 대해 우선한다.
<head><style>
#active {
color:gray;
}
.saw {
color:red;
}
a {
color: black;
}
h1 {
font-size:45px;
}
</style></head>
...
<body>
<h1><a href="index.html"> WEB </a></h1>
<a href="1.html" class="saw" id="active"> I AM TEXT </a>
</body>위의 경우, 태그로부터 active 선택자가 saw 선택자보다 더 멀리있지만 I AM TEXT 가 검정색으로 표시된다.
이렇듯 선택자들은 종류에 따라 power(우선순위)가 다르다.
왜 class선택자, id선택자, 태그선택자가 있다면 id선택자 > class선택자 > 태그선택자 인것인가?
위의 예시에서, id 선택자의 값이 active인 태그가 웹페이지에서 한번이라도 등장한다면 더이상 'active'라는 태그를 사용할 수 없다. (사용한다고 해도 웹페이지가 동작하지 않는것은 아니지만, 사용하지 않는것을 권고한다.)
학교에서의 id는 학번이고, 국가에서의 id는 주민등록번호이다. 이것들 핵심은 모두 id이고, 'id의 핵심은 중복되서는 안된다.'이다. 따라서, id선택자로 active 태그를 사용하였기 때문에 다른 곳에서는 id값이 active가 나오면 안된다.
즉, 유일무이한 값임을 의미한다.
따라서 웹페이지에서 모든 a태그를 가리키는 선택자와, 웹페이지에서 id값이 active인 태그만을 가리키는 선택자 중에서
전자가 후자보다 더 포괄적이고 후자가 전자보다 구체적이다.
CSS에서는 구체적인 것이 포괄적인 것보다 우선순위를 높였다. 이는 태그 선택자를 통해서 전체적인 태그의 디자인을 수행하고, 그 중 예외적인 것들을 id선택자로 선택하여 예외를 두는 것이 효율적이기 때문이다.
그리고 이런 효율성을 위해 태그 선택자와 id선택자 사이의 (중간정도의 우선순위를 가지는) class 선택자 또한 존재한다.
이외에도 다양한 선택자들이 존재하는데, 이렇게 선택자를 조합하면 자신이 원하는 효과를 태그에 정교하게 타겟팅할 수 있고, 작성하는 코드의 양을 획기적으로 줄일 수 있고 동시에 한부분만 수정하면 전체가 수정되는 효율적인 코드 작성의 토대가 마련될 수 있다.
'HTML, CSS' 카테고리의 다른 글
| [CSS] CSS 기본문법 (0) | 2022.08.24 |
|---|---|
| [HTML] 웹서버 운영하기 (2) | 2022.07.26 |
| [HTML] 인터넷과 웹, 웹호스팅 (0) | 2022.07.19 |
| [HTML] HTML 기본 문법 정리 (0) | 2022.07.17 |