2021-03-28
속성 선택자는 말 그대로 특정 속성 또는 속성 값이 있는 HTML 요소의 스타일 선택하여 지정할 수 있다. 이와 같은 속성 선택자를 사용하는 방법을 알아보자.
- a[Target]
속성 선택자는 보통 앞에 태그와 그 뒤에 [ ]가 오게 되며, [ ] 안에 선택하고자 하는 속성을 적어 주면 된다. 예제에서는
div [id="testDiv1"]와 같이 선택하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div[id="testDiv1"]{
color:red;
}
</style>
</head>
<body>
<div id="testDiv1">Hello1</div>
<div id="testDiv2">Hello2</div>
<div id="testDiv3">Hello3</div>
<div id="testDiv4">Hello4</div>
</body>
</html>
위의 코드의 결과로는 아래와 같은 결과로 나타난다.
- CSS [attribute~="value"] Selector
속성 선택자는 =기호를 다른 특수 문자와 조합하면 다양한 기능을 가지게 된다. 우선적으로 ~와 결합한 ~=는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는 데 사용된다. 아래의 예제를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div[title ~="test"]{
color:red;
}
</style>
</head>
<body>
<div id="testDiv1" title="test king">Hello1</div>
<div id="testDiv2" title="test Hoho">Hello2</div>
<div id="testDiv3" title="testgood">Hello3</div>
<div id="testDiv4" title="testpower">Hello4</div>
</body>
</html>
기존의 태그에 title을 부여해 각기 다른 값을 주었다. 여기서의 글자색의 빨간색으로 변하는 태그들은 testDiv1/testDiv2 이 둘 뿐이다. 그 이유는 온전히 test라는 단어로 인식되기 위해서는 공백 문자 등으로 구분을 해주어야 하기 때문이다.
- CSS [attribute|="value"] Selector
다음은 | 와 = 의 조합이다. 기존의 ~=와 다른 점은 공백 문자가 아닌 - 기호를 구분자로 인식해 하나의 value 값으로 선택된다. 아래의 예제를 보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div[title |="test"]{
color:red;
}
</style>
</head>
<body>
<div id="testDiv1" title="test king">Hello1</div>
<div id="testDiv2" title="test Hoho">Hello2</div>
<div id="testDiv3" title="test-good">Hello3</div>
<div id="testDiv4" title="testpower">Hello4</div>
</body>
</html>
여기서 글자색의 빨간색으로 변하는 태그는 -기호가 사용된 testDiv3 뿐이다. 결과는 아래와 같다.
- CSS [attribute^="value"] Selector
^ 와 =의 조합이다. 이는 속성 값이 지정된 값으로 시작하는 요소를 선택하는 데 사용됩니다. 즉 공백문자 -기호 상관없이 어떠한 값이던 시작 값이 value에 해당하면 선택된다. 아래의 예제를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div[title ^="test"]{
color:red;
}
</style>
</head>
<body>
<div id="testDiv1" title="test king">Hello1</div>
<div id="testDiv2" title="test Hoho">Hello2</div>
<div id="testDiv3" title="test-good">Hello3</div>
<div id="testDiv4" title="testpower">Hello4</div>
</body>
</html>
결과를 보면 모든 div태그들은 test라는 텍스트로 시작되기 때문에 전부 선택되어 글자색이 변경된다.
- CSS [attribute$="value"] Selector
$ 와 = 의 조합은 속성 값이 지정된 값으로 끝나는 요소를 선택하는 데 사용된다. 즉 ^=와 반대되는 기능을 수행하면 선택된 값이 맨뒤의 데이터가 value 값이면 선택된다. 아래의 예제를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div[title $="test"]{
color:red;
}
</style>
</head>
<body>
<div id="testDiv1" title="test king">Hello1</div>
<div id="testDiv2" title="test Hoho">Hello2</div>
<div id="testDiv3" title="test-good">Hello3</div>
<div id="testDiv4" title="testpowertest">Hello4</div>
</body>
</html>
결과를 보면 test로 끝나는 div 태그는 testDiv4 뿐이기 때문에 해당 태그만 글자색이 변경되는 것을 확인할 수 있다.
- CSS [attribute*="value"] Selector
마지막으로 *와 = 의 조합으로 선택자의 속성에 어디에든 "value"값이 있기만 하면 선택된다. 아래는 예제 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div[title *="test"]{
color:red;
}
</style>
</head>
<body>
<div id="testDiv1" title="test king">Hello1</div>
<div id="testDiv2" title="test Hoho">Hello2</div>
<div id="testDiv3" title="test-good">Hello3</div>
<div id="testDiv4" title="testpowertest">Hello4</div>
</body>
</html>
결과적으로 test라는 텍스트는 모든 div태그 title 속성이 가지고 있기 때문에 모두 선택되어 글자의 색상이 변경되는 것을 확인할 수 있다.
