CSS [속성|="값"] 선택자란?
CSS의 [속성|="값"] 선택자(attribute selector)를 사용하면 지정한 속성 값이 특정 값과 정확히 일치하거나, 그 값 바로 뒤에 하이픈(-)이 이어지는 형태로 시작하는 요소를 모두 선택할 수 있습니다. 이 선택자는 lang="en-US"처럼 하이픈으로 구분된 값을 다룰 때 특히 유용합니다.
예를 들어 [alt|=Tutor]라고 작성하면 alt 속성 값이 "Tutor" 또는 "Tutor-"로 시작하는 모든 요소가 선택됩니다.
예제
다음 코드는 [alt|=Tutor] 선택자를 활용하여 alt 속성이 "Tutor"로 시작하는 이미지에만 주황색 테두리와 둥근 모서리를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
[alt|=Tutor] {
border: 5px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<img src = "https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" height="200" width="200" alt="Tutor-Connect">
<img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="Tutorials-Library">
</body>
</html>
위 코드를 실행하면 alt="Tutor-Connect"인 첫 번째 이미지에만 주황색 테두리가 적용되고, alt="Tutorials-Library"인 두 번째 이미지에는 스타일이 적용되지 않습니다. 두 번째 값은 "Tutor-" 형식으로 시작하지 않기 때문입니다.