CSS에서 [attribute^="value"] 선택자를 사용하면 속성 값이 지정한 문자열로 시작하는 요소만 간편하게 선택할 수 있습니다. 예를 들어, 이미지의 alt 속성 값이 'Tutor'로 시작하는 요소에만 스타일을 적용하고 싶을 때 유용하게 활용됩니다.
[attribute^="value"] 선택자란?
캐럿(^) 기호를 사용하는 이 선택자는 속성 값의 시작 부분이 일치하는지 확인합니다. 전체 값이 완전히 같아야 하는 것이 아니라, 앞부분만 일치하면 되기 때문에 접두사 기반 스타일링에 적합합니다.
예제 코드
다음 코드는 alt 속성 값이 'Tutor'로 시작하는 이미지에 파란색 테두리와 둥근 모서리를 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
[alt^=Tutor] {
border: 5px solid blue;
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'로 시작하지 않기 때문에 스타일이 적용되지 않습니다.
함께 알아두면 좋은 속성 선택자
- [attribute$="value"]: 속성 값이 지정한 문자열로 끝나는 요소를 선택합니다.
- [attribute*="value"]: 속성 값에 지정한 문자열이 포함된 요소를 선택합니다.
이처럼 CSS 속성 선택자를 잘 활용하면 클래스나 ID를 추가하지 않고도 HTML 구조를 그대로 유지하면서 원하는 요소에 정교하게 스타일을 적용할 수 있습니다.