[HTML] 문자열 속성 선택자

개념

1. 기본 속성 선택자

- [속성이름] 선택자

- [속성이름="속성값"]선택자

2. [속성이름] 선택자

- [속성이름] 선택자는 특정 속성을 가지고 있는 요소를 모두 선택한다.

3.[속성이름="속성값"]선택자

- [속성이름="속성값"] 선택자는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다.

4. 문자열 속성 선택자

(1) [속성이름~="속성값"] 선택자

- 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택

(2) [속성이름|="속성값"] 선택자

- 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택

(3) [속성이름^="속성값"] 선택자

- 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

(4) [속성이름$="속성값"] 선택자

- 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택

(5) [속성이름*="속성값"] 선택자

- 특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택

예제 1

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성을 가지고 있습니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성을 가지고 있습니다!</p>
	<p title="second p">이 단락은 title 속성을 가지고 있습니다!</p>

</body>

</html>

예제 2

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title="first h2"] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
	<p title="second p">이 단락은 title 속성값이 "second p"입니다!</p>

</body>

</html>

예제 3

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title~="first"] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성~="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
	<p title="first-p">이 단락은 title 속성값이 "first-p"입니다!</p>

</body>

</html>

예제 4

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title|="first"] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성|="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
	<p title="first-p">이 단락은 title 속성값이 "first-p"입니다!</p>

</body>

</html>

예제 5

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title^="first"] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성^="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
	<p title="first-p">이 단락은 title 속성값이 "first-p"입니다!</p>
	<p title="p first">이 단락은 title 속성값이 "p first"입니다!</p>

</body>

</html>

예제 6

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title$="first"] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성$="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="p first">이 단락은 title 속성값이 "p first"입니다!</p>
	<p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>

</body>

</html>

예제 7

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		[title*="first"] {
			background: black;
			color: yellow;
		}
	</style>
</head>

<body>

	<h1>[속성*="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="my-first-p">이 단락은 title 속성값이 "my-first-p"입니다!</p>
	<p title="p-first">이 단락은 title 속성값이 "p-first"입니다!</p>

</body>

</html>

예제 8

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Attribute</title>
	<style>
		input[type="text"] {
			width: 150px;
			display: block;
			background-color: #FFEFD5;
			margin-bottom: 10px;
		}
		input[type="password"] {
			width: 130px;
			display: block;
			background-color: #90EE90;
			border: 2px solid red;
		}
		input[type="password"]:focus { background-color: #FFC0CB; }
	</style>
</head>

<body>

	<h1>속성 선택자를 이용한 선택</h1>
	<form>
		사용자 : <br>
		<input type="text" name="username">
		비밀번호 : <br>
		<input type="password" name="password">
	</form>

</body>

</html>

예제 9

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* img 태그 중에서 src 속성이 png로 끝나는 태그의
           border 속성에 3px solid red를 적용합니다.*/
        img[src$=png] { border: 3px solid red; }

        /* img 태그 중에서 src 속성이 jpg로 끝나는 태그의
           border 속성에 3px solid green를 적용합니다.*/
        img[src$=jpg] { border: 3px solid green; }

        /* img 태그 중에서 src 속성이 gif로 끝나는 태그의
           border 속성에 3px solid blue를 적용합니다.*/
        img[src$=gif] { border: 3px solid blue; }
    </style>
</head>
<body>
    <img src="jajq.png" width="200" height="300" />
    <img src="node.jpg" width="200" height="300" />
    <img src="ux.gif" width="200" height="300" />
</body>
</html>

'HTML > Day39' 카테고리의 다른 글

[HTML] float 속성 & clear 속성 & overflow 속성 (0)	2022.01.02
[HTML] 부정 선택자 (0)	2022.01.02
[HTML] 링크 선택자 (0)	2022.01.02
[HTML]문자 선택자 (0)	2022.01.02
[HTML] 동위 선택자 (0)	2022.01.02

개념