[CSS] 10-2. 속성 선택자

10-2. 속성 선택자

속성 선택자는 태그 안에서 사용하는 속성값에 따라 요소를 선택하는 역할을 합니다.

특정 속성이 있는 요소를 선택하는 [속성] 선택자

---

HTML 태그를 작성할 때 사용하는 속성값에 따라 원하는 요소를 선택할 수 있도록 하는 것이 [속성] 선택자이고, 대괄호([ ]) 사이에 원하는 속성을 입력합니다.

예를 들어 a 요소 중 href 속성이 있는 요소를 선택하려면 다음과 같이 작성합니다.

a[href]{ ...}

👍 예시

	 a[href] {
		 background:yellow;
		 border:1px solid #ccc;
		 font-weight:normal;
	 }
...
	<ul>
		<li><a>메인 메뉴 : </a></li>
		<li><a href="#">메뉴 1</a></li>
		<li><a href="#">메뉴 2</a></li>
		<li><a href="#">메뉴 3</a></li>
		<li><a href="#">메뉴 4</a></li>
	</ul>

특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자

---

[속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 적용합니다.

예를 들어 a 요소 중에서 target 속성값이 ‘_blank’ 인 것만 선택하고 싶다면 다음과 같이 작성합니다.

a[target = _blank]

👍 예시

	a[target="_blank"] {
	 padding-right:30px;
	 background:url(images/newwindow.png) no-repeat center right;
	}
...
	<ul>
		<li><a href="hhttps://html.spec.whatwg.org" target="_blank">HTML</a></li>
		<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>

여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자

---

[속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택합니다. 이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리합니다.

예를 들어 하나의 요소에 클래스 스타일을 여러 개 적용할 수 있는데, 그 중에 button 스타일이 있는 요소를 찾으려면 다음과 같이 작성합니다.

[class ~= button] { ...}

❗ 주의 사항

[속성 ~= 값] 선택자는 속성값과 정확하게 일치하는 요소만 선택합니다.

예를 들어 위의 예시에서 속성값이 button, flat button인 요소에는 적용되지만, buttons, flat-button 인 요소에는 적용되지 않습니다.

👍 예시

		a[class ~="button"] {           
      box-shadow:rgba(0,0,0,0.5) 4px 4px; /* 그림자 지정 */
      border-radius: 5px;  /* 테두리를 둥글게 */
      border:1px solid #222;
		}
</style>
...
	<ul>
		<li><a href="#" class="flat">메뉴 1</a></li>
		<li><a href="#" class="flat">메뉴 2</a></li>
		<li><a href="#" class="button">메뉴 3</a></li>
		<li><a href="#" class="flat button" >메뉴 4</a></li>
	</ul>

특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자

---

[속성	= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용합니다. 앞에서 다룬 [속성 ~= 값] 선택자와 다르게 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택합니다.

예를 들어 title 속성값에 us라는 글자를 포함하는 속성값이 있는 a 요소를 찾는다면 다음과 같이 작성합니다.

a[title |= us]{ ...}

👍 예시

	a[title |= "us"] {  /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
		background: url(images/us.png) no-repeat left center;
	}
	a[title |= "jap"] {  /* 속성값이 "jap"이거나 "jap-"로 시작하는 요소를 찾는 선택자 */
		background: url(images/jp.png) no-repeat left center;
	}
	a[title |= "chn"] {  /* 속성값이 "chn"이거나 "chn-"로 시작하는 요소를 찾는 선택자 */
		background: url(images/ch.png) no-repeat left center;
	}
</style>
...
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="us-english">영어</a></li>
		<li><a href="#" title="ja">일본어</a></li>
		<li><a href="#" title="chn">중국어</a></li>
	</ul>

특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]

---

속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용합니다.

예를 들어 title 속성값이 eng로 시작하는 a 요소를 찾는다면 다음과 같이 작성합니다.

a[title ^= eng]{ ...}

👍 예시

		a[title ^="eng"] {  /* 속성값이 "eng"로 시작하는 요소를 찾는 선택자 */
			background: url(images/us.png) no-repeat left center;
			padding: 5px 25px;
		}
		a[title ^="jap"] {  /* 속성값이 "jap"로 시작하는 요소를 찾는 선택자 */
			background: url(images/jp.png) no-repeat left center;
			padding: 5px 25px;
		}
		a[title ^="chin"] {  /* 속성값이 "chn"로 시작하는 요소를 찾는 선택자 */
			background: url(images/ch.png) no-repeat left center;
			padding: 5px 25px;
		}
</style>
...
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="english">영어</a></li>
		<li><a href="#" title="japanese">일본어</a></li>
		<li><a href="#" title="chinese">중국어</a></li>
	</ul>

특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자

---

[속성 ^= 값] 선택자가 속성값으로 시작하는 요소를 선택했다면, [속성 $= 값] 선택자는 지정한 속성값으로 끝나는 요소를 선택합니다.

예를 들어 링크한 파일 이름의 마지막 단어가 xls 인 요소를 찾는다면 다음과 같이 작성합니다.

[href $= xls]{ ...}

👍 예시

	a[href$=hwp] { /* 연결한 파일의 확장자가 hwp인 링크 */
		background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
		padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
	}

	a[href$=xls] { /* 연결한 파일의 확장자가 hwp인 링크 */
		background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
		padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
	}
</style>
...
	<ul>
		<li><a href="intro.hwp">hwp 파일</a></li>
		<li><a href="intro.xls">엑셀 파일</a></li>
	</ul>

일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

---

[속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택합니다.

예를 들어 href 속성값 중에 ‘w3’가 포함된 요소를 선택한다면 다음과 같이 작성합니다.

[href *= w3]{ ...}

👍 예시

	a[href *= "w3"] {  /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */ 
	 background:blue;
	 color:white;		 
	}
</style>
...
	<h1>HTML5 참고 사이트 </h1>
	<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
	<ul>
		<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
		<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>

정리

---

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 속성값인 요소	[target = _blank]
[속성 ~= 값]	지정한 속성값이 포함된 요소(단어별)	[class ~= button]
[속성 |= 값]	지정한 속성값이 포함된 요소(하이픈 포함, 단어별)	[title |= us]
[속성 ^= 값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성 $= 값]	지정한 속성값으로 끝나는 요소	[href $= xls]
[속성 *= 값]	지정한 속성값의 일부가 일치하는 요소	[href *= w3]