속성 선택자(attribute selector)는 HTML 요소의 속성 값을 기준으로 요소를 선택하는 방법을 제공합니다. [class*="string"] 선택자는 이러한 속성 선택자 중 하나로, 특정 부분 문자열을 포함하는 클래스 속성을 가진 요소를 선택합니다. 속성 선택자의 종류와 예제를 좀 더 자세히 설명하겠습니다.
속성 선택자 종류 및 예제
- 부분 문자열 포함 선택자 ([attr*="value"])
- 속성 값에 특정 문자열이 포함된 요소를 선택합니다.
- 구문: [attr*="value"]
- 예제:
<div class="intro-heading"></div><div class="main-heading"></div><div class="footer-heading"></div><div class="content"></div><style>[class*="heading"] { color: red; }</style>
- 이 예제에서 [class*="heading"] 선택자는 class 속성에 heading이라는 문자열이 포함된 모든 요소를 선택하여 텍스트 색상을 빨간색으로 변경합니다. 따라서 intro-heading, main-heading, footer-heading 클래스를 가진 <div> 요소들이 빨간색 텍스트로 표시됩니다.
- 시작 부분 문자열 일치 선택자 ([attr^="value"])
- 속성 값이 특정 문자열로 시작하는 요소를 선택합니다.
- 구문: [attr^="value"]
- 예제:
<div class="section-intro"></div><div class="section-main"></div><div class="section-footer"></div><div class="content"></div><style>[class^="section"] { color: blue; }</style>
- 이 예제에서 [class^="section"] 선택자는 class 속성이 section으로 시작하는 모든 요소를 선택하여 텍스트 색상을 파란색으로 변경합니다. 따라서 section-intro, section-main, section-footer 클래스를 가진 <div> 요소들이 파란색 텍스트로 표시됩니다.
- 끝 부분 문자열 일치 선택자 ([attr$="value"])
- 속성 값이 특정 문자열로 끝나는 요소를 선택합니다.
- 구문: [attr$="value"]
- 예제:
<div class="intro-part"></div><div class="main-part"></div><div class="footer-part"></div><div class="content"></div><style>[class$="part"] { color: green; }</style>
- 이 예제에서 [class$="part"] 선택자는 class 속성이 part로 끝나는 모든 요소를 선택하여 텍스트 색상을 초록색으로 변경합니다. 따라서 intro-part, main-part, footer-part 클래스를 가진 <div> 요소들이 초록색 텍스트로 표시됩니다.
- 정확히 일치하는 속성 선택자 ([attr="value"])
- 속성 값이 정확히 일치하는 요소를 선택합니다.
- 구문: [attr="value"]
- 예제:
<div class="main"></div><div class="content"></div><style>[class="main"] { color: purple; }</style>
- 이 예제에서 [class="main"] 선택자는 class 속성이 main과 정확히 일치하는 요소를 선택하여 텍스트 색상을 보라색으로 변경합니다. 따라서 main 클래스를 가진 <div> 요소가 보라색 텍스트로 표시됩니다.
- 하나 이상의 공백으로 구분된 값 중 하나와 일치하는 선택자 ([attr~="value"])
- 속성 값이 공백으로 구분된 목록일 때, 그 목록 중 하나와 일치하는 요소를 선택합니다.
- 구문: [attr~="value"]
- 예제:
<div class="box main"></div><div class="box secondary"></div><div class="container"></div><style>[class~="main"] { border: 2px solid black; }</style>
- 이 예제에서 [class~="main"] 선택자는 class 속성이 공백으로 구분된 목록 중 하나가 main인 요소를 선택하여 테두리를 검정색으로 설정합니다. 따라서 box main 클래스를 가진 <div> 요소가 검정색 테두리를 가집니다.
- 하이픈으로 구분된 값 중 접두사 일치 선택자 ([attr|="value"])
- 속성 값이 하이픈으로 구분된 목록일 때, 그 목록 중 값이 일치하거나 해당 값으로 시작하는 접두사인 요소를 선택합니다.
- 구문: [attr|="value"]
- 예제:
<div class="lang-en"></div><div class="lang-en-us"></div><div class="lang-fr"></div><style>[class|="lang-en"] { font-weight: bold; }</style>
- 이 예제에서 [class|="lang-en"] 선택자는 class 속성이 lang-en과 정확히 일치하거나 lang-en-으로 시작하는 요소를 선택하여 폰트를 굵게 설정합니다. 따라서 lang-en와 lang-en-us 클래스를 가진 <div> 요소들이 굵은 텍스트로 표시됩니다.
이와 같은 속성 선택자를 사용하면 HTML 요소의 속성 값을 기반으로 세밀한 스타일링을 할 수 있습니다. 속성 선택자는 특정 문자열을 포함하거나, 시작하거나, 끝나는 요소를 쉽게 선택할 수 있어 매우 유용합니다.
반응형
다양한 속성에 대한 속성 선택자 예제
- id 속성
- 특정 부분 문자열을 포함하는 id 속성을 가진 요소를 선택합니다.
- 예제:
<div id="section-header"></div><div id="section-footer"></div><div id="main-content"></div><style>[id*="section"] { background-color: lightblue; }</style>
- [id*="section"] 선택자는 id 속성에 section이라는 문자열이 포함된 모든 요소를 선택하여 배경색을 연한 파란색으로 변경합니다.
- href 속성
- 특정 부분 문자열을 포함하는 href 속성을 가진 요소를 선택합니다.
- 예제:
<a href="https://www.example.com/page1">Link 1</a><a href="https://www.example.com/page2">Link 2</a><a href="https://www.test.com/page3">Link 3</a><style>[href*="example"] { color: orange; }</style>
- [href*="example"] 선택자는 href 속성에 example이라는 문자열이 포함된 모든 링크를 선택하여 텍스트 색상을 주황색으로 변경합니다.
- type 속성
- 특정 값을 가진 type 속성을 가진 요소를 선택합니다.
- 예제:
<input type="text" name="username"><input type="password" name="password"><input type="submit" value="Submit"><style>[type="password"] { border: 2px solid red; }</style>
- [type="password"] 선택자는 type 속성이 password인 요소를 선택하여 테두리를 빨간색으로 설정합니다.
- data-* 속성
- HTML5의 사용자 정의 데이터 속성(data-*)을 가진 요소를 선택합니다.
- 예제:
<div data-role="admin"></div><div data-role="user"></div><div data-role="guest"></div><style>[data-role="admin"] { background-color: yellow; }</style>
- [data-role="admin"] 선택자는 data-role 속성이 admin인 요소를 선택하여 배경색을 노란색으로 변경합니다.
- title 속성
- 특정 부분 문자열을 포함하는 title 속성을 가진 요소를 선택합니다.
- 예제:
<p title="Introduction to CSS">CSS</p><p title="Introduction to HTML">HTML</p><p title="JavaScript Guide">JavaScript</p><style>[title*="Introduction"] { font-weight: bold; }</style>
- [title*="Introduction"] 선택자는 title 속성에 Introduction이라는 문자열이 포함된 모든 요소를 선택하여 텍스트를 굵게 표시합니다.
- placeholder 속성
- 특정 값을 가진 placeholder 속성을 가진 요소를 선택합니다.
- 예제:
<input type="text" placeholder="Enter your name"><input type="email" placeholder="Enter your email"><input type="password" placeholder="Enter your password"><style>[placeholder="Enter your email"] { border: 2px solid green; }</style>
- [placeholder="Enter your email"] 선택자는 placeholder 속성이 Enter your email인 요소를 선택하여 테두리를 초록색으로 설정합니다.
이와 같이 속성 선택자는 class 속성뿐만 아니라 id, href, type, data-*, title, placeholder 등 다양한 HTML 속성에 적용할 수 있습니다. 이를 통해 특정 속성을 가진 요소들을 효과적으로 선택하고 스타일링할 수 있습니다.
728x90
