존재 및 값 선택자 (Presence and value selectors)
이 선택자들은 href처럼 속성이 단순히 존재하는지 여부만으로 요소를 선택하거나, 속성의 값(value)이 특정 조건과 정확히 일치하는지를 기준으로 요소를 선택할 수 있게 해줍니다.
[attr]
예시:a[title]
설명: 대괄호 안에 적힌 이름과 일치하는 attr 속성을 가진 요소들을 선택합니다.[attr=value]
예시:a[href="https://example.com"]
설명: attr 속성의 값이 따옴표 안의 문자열인 value와 정확히 일치하는 요소를 선택합니다.[attr~=value]
예시:p[class~="special"]
설명: attr 속성의 값이 정확히 value이거나, 공백으로 구분된 값 목록 중에 value를 포함하는 요소를 선택합니다.[attr|=value]
예시:div[langㅣ="zh"]
설명: attr 속성의 값이 정확히 value이거나, value로 시작하면서 바로 뒤에 하이픈(-)이 따라오는 요소를 선택합니다.
아래 예제에서 이 선택자들이 어떻게 쓰이는지 직접 확인해 보세요!
li[class]를 사용하면class속성을 가진 모든 목록 항목(<li>)을 선택할 수 있어요. 첫 번째 항목을 제외한 나머지 모든 항목이 선택되겠죠?li[class="a"]는 클래스가 정확히a인 요소만 선택합니다.a옆에 공백으로 구분된 다른 클래스가 섞여 있다면 선택하지 않아요. 그래서 두 번째 항목만 선택됩니다.li[class~="a"]는 클래스가a인 요소뿐만 아니라, 공백으로 구분된 여러 클래스 값들 중에a가 포함되어 있는 요소도 모두 선택합니다. 따라서 두 번째와 세 번째 항목이 선택돼요.
💡 강사의 실무 팁!
"이걸 실무에서 언제 쓰지?" 싶으실 수 있는데, 이 속성 선택자는 모던 프론트엔드 환경에서 엄청나게 활약합니다.특히 Storybook으로 UI 컴포넌트들을 격리해서 테스트하거나, Vitest 같은 테스팅 라이브러리로 컴포넌트 테스트를 작성할 때 정말 유용해요. 테스트 코드에서 요소를 찾을 때
[data-testid="submit-button"]처럼 커스텀 데이터 속성을 이용해 요소를 선택하는 패턴이 아주 흔하거든요. 디자인 변경 때문에 클래스명이 바뀌더라도 테스트 코드는 깨지지 않도록 견고하게 만들 수 있죠.또, React나 Next.js로 개발하실 때 접근성을 높이기 위해
aria-expanded="true"같은 ARIA 속성을 자주 다루실 텐데, 자바스크립트로 상태에 따라 CSS 클래스를 뗐다 붙였다 하는 대신[aria-expanded="true"] { display: block; }처럼 CSS 속성 선택자만으로 상태 스타일링을 처리하면 코드가 훨씬 깔끔해진답니다!
<h1>Attribute presence and value selectors</h1>
<ul>
<li>Item 1</li>
<li class="a">Item 2</li>
<li class="a b">Item 3</li>
<li class="ab">Item 4</li>
</ul>body {
font-family: sans-serif;
}
li[class] {
font-size: 120%;
}
li[class="a"] {
background-color: yellow;
}
li[class~="a"] {
color: red;
}위 CSS 코드를 직접 수정해 보면서 연습해 보세요! class 속성값이 ab인 목록 항목만 선택하는 규칙을 추가하고, 글자 색상(color)은 white로, 배경색(background-color)은 purple로 지정해 보세요.
부분 문자열 일치 선택자 (Substring matching selectors)
이 선택자들은 속성값 안에 특정 문자열이 포함되어 있는지 훨씬 더 고급스럽게 매칭할 수 있도록 해줍니다. 예를 들어, box-warning과 box-error라는 클래스들이 있을 때 "box-"로 시작하는 모든 요소를 한 번에 선택하고 싶다면 [class^="box-"]를 사용할 수 있어요. (또는 위 섹션에서 배운 [class|="box"]를 사용해도 됩니다.)
| 선택자 | 예시 | 설명 |
|---|---|---|
[attr^=value] | li[class^="box-"] | attr 속성값이 value로 시작하는 요소를 선택합니다. (^는 '시작'을 의미해요) |
[attr$=value] | li[class$="-box"] | attr 속성값이 value로 끝나는 요소를 선택합니다. ($는 '끝'을 의미해요) |
[attr*=value] | li[class*="box"] | attr 속성값 문자열 내에 value가 어디든 포함되어 있는 요소를 선택합니다. |
💡 강사의 실무 팁!
이 부분 문자열 매칭은 웹사이트를 만들 때 정말 '꿀팁'으로 많이 쓰여요!
예를 들어 외부로 나가는 링크 아이콘을 달아줄 때a[href^="http"]라고 쓰면 외부 주소(http로 시작) 링크만 싹 다 선택할 수 있고, PDF 파일 링크에만 PDF 아이콘을 보여주고 싶을 때는a[href$=".pdf"]라고 끝나는 문자열을 찾아 스타일을 입혀줄 수 있어요. 진짜 유용하겠죠?
다음 예제에서 이 선택자들이 어떻게 쓰이는지 살펴보세요.
li[class^="a"]는 속성값이a로 시작하는 모든 요소를 선택합니다. 그래서 첫 번째와 두 번째 항목이 선택돼요.li[class$="a"]는 속성값이a로 끝나는 요소를 선택하므로 첫 번째와 세 번째 항목이 선택됩니다.li[class*="a"]는 속성값 문자열 어디에든a가 포함되어 있으면 모조리 선택하기 때문에, 여기 있는 모든 목록 항목이 선택됩니다.
<h1>Attribute substring matching selectors</h1>
<ul>
<li class="a">Item 1</li>
<li class="ab">Item 2</li>
<li class="bca">Item 3</li>
<li class="bcabc">Item 4</li>
</ul>body {
font-family: sans-serif;
}
li[class^="a"] {
font-size: 120%;
}
li[class$="a"] {
background-color: yellow;
}
li[class*="a"] {
color: red;
}자, 이번에도 위 CSS 코드를 직접 수정해 볼까요? class 속성값이 b 혹은 c로 끝나는 목록 항목만 선택해서, 2px 두께의 실선 검은색 테두리(border: 2px solid black;)를 주는 규칙을 추가해 보세요. 이 문제를 풀려면 저번 시간에 배운 선택자 목록(selector list)을 함께 활용하셔야 할 거예요!
요약 (Summary)
지금까지 속성 선택자에 대해 아주 훌륭하게 학습하셨습니다! 이제 다음 문서로 넘어가서 CSS의 또 다른 마법, 가상 클래스(pseudo-class)와 가상 요소(pseudo-element) 선택자에 대해 알아보도록 해요.
