CSS [attribute = "value"] 선택자란?
CSS에서 [속성 = "값"] 형태의 속성 선택자(attribute selector)를 사용하면, 지정된 속성과 그 값이 정확히 일치하는 HTML 요소만 골라서 스타일을 적용할 수 있습니다.
예를 들어, 여러 개의 링크(<a>) 태그 중에서 rel="nofollow" 속성을 가진 요소에만 특정 스타일을 적용하고 싶다면 이 선택자가 유용합니다.
기본 문법
[속성 = "값"] {
/* 여기에 스타일을 작성합니다 */
}선택자의 조건은 다음과 같이 동작합니다.
- 속성: 대상이 되는 HTML 속성 이름 (예: rel, href, type 등)
- =: 속성 값이 완전히 일치해야 함을 의미
- 값: 일치시킬 속성의 값
실습 예제
아래 코드는 rel 속성의 값이 nofollow인 링크에만 파란색 테두리를 적용하는 예제입니다. noreferrer 값을 가진 두 번째 링크에는 스타일이 적용되지 않는 것을 확인할 수 있습니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<style>
a[rel = nofollow] {
border: 3px solid blue;
}
</style>
</head>
<body>
<a href = "https://qries.com/What-is-Uber-s-business-model-and-how-does-it-compare-with-Ola-s-model-in-India" rel = "nofollow">Uber's Business Model</a><br><br>
<a href = "https://www.qries.com/How-does-share-market-work-in-India" rel = "noreferrer">Share Market</a>
</body>
</html>실행 결과 설명
위 코드를 브라우저에서 실행하면 다음과 같이 동작합니다.
- 첫 번째 링크(Uber's Business Model)는
rel="nofollow"속성을 가지고 있으므로 3px 두께의 파란색 테두리가 표시됩니다. - 두 번째 링크(Share Market)는
rel="noreferrer"속성을 가지고 있어 선택자 조건과 일치하지 않으므로 테두리가 적용되지 않습니다.
참고: 유사한 속성 선택자들
정확한 값 일치 외에도 CSS는 다양한 속성 선택자를 제공합니다.
- [속성^="값"]: 지정한 값으로 시작하는 속성을 가진 요소 선택
- [속성$="값"]: 지정한 값으로 끝나는 속성을 가진 요소 선택
- [속성*="값"]: 지정한 값을 포함하는 속성을 가진 요소 선택
- [속성~="값"]: 공백으로 구분된 값 목록 중 해당 값을 포함하는 요소 선택
상황에 맞는 속성 선택자를 활용하면 클래스나 ID를 추가로 작성하지 않고도 더욱 유연하고 깔끔하게 스타일을 관리할 수 있습니다.