WEB/CSS

[CSS] CSS Attribute Selectors(속성 선택자) 알아보기

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 속성이 가지고 있기 때문에 모두 선택되어 글자의 색상이 변경되는 것을 확인할 수 있다.

저작자표시 비영리

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS 선택자 :hover 에 대하여 알아보기 (0)	2021.04.20
[CSS] CSS Pseudo-Elements(가상선택자) ::before / ::after (0)	2021.04.16
[CSS] CSS padding을 통한 내부 여백 부여하기 (0)	2021.03.27
[CSS] CSS margin 속성을 통한 외부의 여백 / 가운데 정렬 방법 (0)	2021.03.26
[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류) (0)	2021.03.23

Contents

새소식

인기 검색어