선택자의 종류
1. 전체 선택자
2. 타입 선택자
3. 속성 선택자
4. 가상 클래스 선택자
5. 가상 요소 선택자
속성선택자란, 속성을 가진 태그를 대상으로 스타일을 적용하는 선택자입니다.
우선 속성에 대해 알아보겠습니다.
HTML 속성이란?
속성이란, html 요소의 옵션이라고 볼 수 있습니다.
속성을 사용하여 태그를 제어할 수 있습니다.
<태그 {속성} = {값} > </태그> 의 형태로 구성되어있습니다.
class와 id 또한 속성의 일종입니다.
속성 선택자
속성 선택자는
1. 속성을 가진 경우
2. 태그를 가진경우
3. 속성과 값을 가진 경우
세가지를 대상으로 구성할 수 있으며,
태그 [속성 = 값] 의 형태로 구성됩니다.
아래는 1번과 2번 경우에 대한 예시입니다.
예시 코드를 보면
target 이라는 속성을 가진 태그들은( [target] ) 모두 검은 배경에 흰 글씨를 가지지만,
target 속성을 가진 a 태그는( a[target] ) 노란배경으로 바꿉니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[target]{
background-color: black;
color: white;
}
a[target]{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<a href="http://www.naver.com" target="_self"> naver(http) </a>
<a href="https://www.naver.com" target="_self"> naver(https) </a>
<a href="http://www.naver.com" target="_blank"> naver(http) _blank </a>
<a href="https://www.naver.com" target="_blank"> naver(https) _blank </a>
<a href="http://www.naver.net" target="_self"> naver.net </a>
<div target="_blank"> div </div>
<div target="_self"> div </div>
</div>
</body>
</html>
따라서 아래와 같이 결과가 나옵니다.
이제 3번에 대한 예시를 확인해 봅시다.
속성과 값을 이용한 선택자에는
[ attr = value] : 값이 일치하는 경우
[ attr ^= value] : 지정한 값으로 시작하는 경우
[ attr $= value] : 지정한 값으로 끝나는 경우
[ attr *= value] : 지정한 값이 포함되는 경우
의 4가지가 존재합니다.
예시코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a[attr2]{
background-color: black;
}
a[attr*="naver"]{
background-color: yellow;
}
a[attr2="_self"]{
background-color: red;
}
a[attr^="https"]{
background-color: orange;
}
a[attr$= ".net"]{
background-color: purple;
}
</style>
</head>
<body>
<div>
<a attr="http://www.naver.com" attr2="_blank"> naver(http) </a>
<a attr="https://www.naver.com" attr2="_self"> naver(https) </a>
<a attr="http://www.naver.com" attr2="_blank"> naver(http) _blank </a>
<a attr="https://www.naver.com" attr2="_blank"> naver(https) _blank </a>
<a attr="http://www.never.com" attr2="_self"> never(http) _self </a>
<a attr="http://www.naver.net" attr2="_self"> naver.net </a>
</div>
</body>
</html>href 를 통해 다른 사이트로 이동하지 않도록 임의의 속성을 지정하였습니다.
예시코드를 보면
1. [attr2] 속성을 가진 태그는 모두 배경색이 검정색으로 되어있고,
2. attr 속성에 "naver"가 포함된 태그의 배경색은 노란색이 되며
3. attr2 속성이 _self 인 태그는 배경색이 빨간색이 되고,
4. attr 속성이 "https"로 시작하는 태그는 배경을 오랜지색으로 덮어씁니다.
5. 마지막으로 attr 속성이 ".net"으로 끝나는 태그는 배경이 보라색으로 바뀝니다.
따라서 결과는 아래와 같습니다.
다음에는 가상 클래스 선택자에 대해 알아보겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| css 알아보기 - 선택자 : 가상요소 선택자 (0) | 2024.10.07 |
|---|---|
| css 알아보기 - 선택자 : 가상클래스 선택자 (1) | 2024.10.04 |
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
| css 알아보기 - 스타일과 css (0) | 2024.09.30 |
| html 알아보기 - 시멘틱 웹과 div 태그 (1) | 2024.09.26 |
