6.1 속성 선택자의 종류
CSS의 속성 선택자는 속성의 존재, 값 또는 값의 일부를 기반으로 요소를 선택할 수 있게 해줘. 이 선택자는 HTML 요소를 스타일링하는 데 유연하고 강력한 기능을 제공해서, 동적 콘텐츠와 인터랙티브 웹 페이지 작업에서 특히 유용하지.
속성 선택자의 종류
- 속성 선택자 (Attribute Selector)
- 속성 값 선택자 (Attribute Selector with Value)
- 속성 접두사 선택자 (Attribute Selector with Prefix)
- 속성 접미사 선택자 (Attribute Selector with Suffix)
- 속성 부분 문자열 선택자 (Attribute Selector with Substring)
- 공백 분할된 속성 선택자 (Attribute Selector with Whitespace)
- 하이픈 분할된 속성 선택자 (Attribute Selector with Hyphen)
6.2 속성 선택자
속성 선택자는 지정된 속성을 가진 요소를 선택해, 속성의 값과는 상관없이.
문법:
[속성] {
속성: 값;
속성: 값;
}
예시:
CSS
/* title 속성이 있는 모든 요소 선택 */
[title] {
color: blue;
}
HTML
<p title="이것은 제목">이 텍스트는 파란색이 될 것입니다.</p>
<p>이 텍스트는 파란색이 아닐 것입니다.</p>
6.3 특정 값의 속성 선택자
특정 값의 속성 선택자는 속성 값이 지정된 값을 가진 요소를 선택해.
문법:
[속성="값"] {
속성: 값;
속성: 값;
}
예시:
CSS
/* title 속성이 "예시"인 모든 요소 선택 */
[title="예시"] {
color: green;
}
HTML
<p title="예시">이 텍스트는 초록색이 될 것입니다.</p>
<p title="다른 예시">이 텍스트는 초록색이 아닐 것입니다.</p>
6.4 접두사 속성 선택자
접두사 속성 선택자는 속성이 지정된 값으로 시작하는 요소를 선택해.
문법:
[속성^="값"] {
속성: 값;
속성: 값;
}
예시:
CSS
/* title 속성이 "시작"으로 시작하는 모든 요소 선택 */
[title^="시작"] {
color: red;
}
HTML
<p title="시작 텍스트">이 텍스트는 빨간색이 될 것입니다.</p>
<p title="시작이 아님">이 텍스트는 빨간색이 아닐 것입니다.</p>
6.5 접미사 속성 선택자
접미사 속성 선택자는 속성이 지정된 값으로 끝나는 요소를 선택해.
문법:
[속성$="값"] {
속성: 값;
속성: 값;
}
예시:
CSS
/* title 속성이 "끝"으로 끝나는 모든 요소 선택 */
[title$="끝"] {
color: orange;
}
HTML
<p title="이것은 끝">이 텍스트는 주황색이 될 것입니다.</p>
<p title="이것은 시작">이 텍스트는 주황색이 아닐 것입니다.</p>
6.6 부분문자열 속성 선택자
부분문자열 속성 선택자는 속성에 지정된 값이 포함된 요소를 선택해.
문법:
[속성*="값"] {
속성: 값;
속성: 값;
}
예시:
CSS
/* title 속성이 "중간"을 포함하는 모든 요소 선택 */
[title*="중간"] {
color: purple;
}
HTML
<p title="이것은 중간 텍스트">이 텍스트는 보라색이 될 것입니다.</p>
<p title="여기는 중간이 없음">이 텍스트는 보라색이 아닐 것입니다.</p>
6.7 공백 분할된 속성 선택자
공백 분할된 속성 선택자는 속성이 하나 이상의 공백으로 분리된 값을 포함하는 요소를 선택해. 특정 클래스나 역할을 가진 요소를 선택하는 데 유용하지.
문법:
[속성~="값"] {
속성: 값;
속성: 값;
}
예시:
CSS
/* class 속성에 "highlight"가 포함된 모든 요소 선택 */
[class~="highlight"] {
background-color: yellow;
}
HTML
<p class="highlight special">이 텍스트는 노란 배경이 될 것입니다.</p>
<p class="special highlight">이 텍스트도 노란 배경이 될 것입니다.</p>
<p class="special">이 텍스트는 노란 배경이 아닐 것입니다.</p>
6.8 하이픈 분할된 속성 선택자
하이픈 분할된 속성 선택자는 속성이 지정된 값 또는 하이픈 다음의 값으로 시작하는 요소를 선택해.
문법:
[속성|="값"] {
속성: 값;
속성: 값;
}
예시:
CSS
p[lang|="ru"] {
font-style: italic;
}
HTML
<p lang="ru">이 텍스트는 기울임꼴이 될 것입니다.</p>
<p lang="ru-RU">이 텍스트도 기울임꼴이 될 것입니다.</p>
<p lang="en">This text will not be italicized.</p>
GO TO FULL VERSION