속성 값 선택자 III
Coddy의 CSS 선택자 코스 레슨 — 15개 중 15번째.
이 공과에서는 속성 값 포함 선택자의 개념을 살펴보겠습니다. 이 기술을 사용하면 속성 값에 특정 하위 문자열이 포함되어 있는지 여부에 따라 HTML 요소를 타겟팅할 수 있습니다.
속성 값 포함 선택자 구문:
특정 문자열을 포함하는 속성 값을 가진 요소를 타겟팅하려면 [attribute*="value"] 선택자 구문을 사용합니다.
코드 예시:
HTML:
<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>CSS:
/* Selects <div> elements with class attribute values containing "fruit" */
[class*="fruit"] {
color: green;
}코드 예시 설명:
제공된 코드 예시에서:
- 서로 다른 class 속성 값을 가진 5개의
<div>요소가 정의되어 있습니다. - CSS 규칙
[class*="fruit"]는class속성 값에 "fruit"라는 하위 문자열이 포함된 요소를 타겟팅합니다. 이 요소들에color: green;스타일을 적용합니다.
결과적으로 class 속성이 "tag fruit"인 <div> 요소들은 녹색 텍스트 색상을 갖게 됩니다.
챌린지
쉬움웹페이지의 제품 목록 스타일을 지정하는 과제가 주어졌습니다. 각 제품은 태그를 나타내는 data-tags 속성을 가진 <div> 요소로 표현됩니다 (예: "electronics", "clothing", "accessories"). 여러분의 목표는 속성 값 포함 선택자(attribute value containing selectors)를 사용하여 태그에 따라 제품 스타일을 다르게 지정하는 것입니다.
여러분의 CSS 작업은 다음과 같습니다:
data-tags속성에 "electronics"를 포함하는 제품에 고유한 배경색을 지정하세요.data-tags속성에 "clothing"을 포함하는 제품에 고유한 테두리를 지정하세요.data-tags속성에 "accessories"를 포함하는 제품에 고유한 배경색을 지정하세요.
직접 해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-tags="electronics">Smartphone</div>
<div data-tags="clothing">T-Shirt</div>
<div data-tags="accessories">Sunglasses</div>
<div data-tags="electronics clothing">Headphones</div>
</body>
</html>