속성 선택자란?
속성 선택자는 HTML 요소의 속성(Attribute)이나 그 속성의 값(Value)을 기준으로 요소를 선택하는 CSS 선택자예요. 태그 이름이나 클래스, ID 대신 요소가 가진 속성(예: type, href, class)을 보고 스타일을 적용합니다.
- 대괄호([])를 사용하며, 속성 이름만 쓰거나 특정 값과 매칭시켜서 선택할 수 있어요.
- 예를 들어, <input type="text">처럼 type 속성이 "text"인 요소만 골라낼 수 있습니다.
속성 선택자는 마치 사람을 "특징"으로 찾는 것과 같아요. "안경 쓴 사람"이나 "파란 셔츠 입은 사람"을 고르는 식으로, 속성을 기준으로 요소를 골라내는 거죠.
[href] {
color: blue;
}주요 속성 선택자 종류
| 선택자 | 설명 | 예시 코드 | 적용 예시 (HTML) | 결과 |
| [속성] | 특정 속성을 가진 모든 요소 선택 | [href] { color: blue; } | <a href="...">링크</a> | href가 있는 모든 링크가 파란색 |
| [속성=값] | 속성 값이 정확히 일치하는 요소 선택 | [type="text"] { border: 1px solid gray; } | <input type="text"> | type="text"인 입력창에 회색 테두리 |
| [속성~=값] | 속성 값에 특정 단어가 포함된 경우(완벽매칭) | [class~="big"] { font-size: 20px; } | <div class="box big"> | class에 "big"이 포함된 요소 글자 크기 20px |
| [속성^=값] | 속성 값이 특정 값으로 시작하는 경우 | [href^="https"] { text-decoration: underline; } | <a href="https://..."> | HTTPS 링크에 밑줄 추가 |
| [속성$=값] | 속성 값이 특정 값으로 끝나는 경우 | [src$=".jpg"] { border: 2px solid red; } | <img src="photo.jpg"> | JPG 이미지에 빨간 테두리 |
| [속성*=값] | 속성 값에 특정 값이 포함된 경우(부분 포함) | [title*="test"] { color: green; } | <p title="mytest"> | "test"가 포함된 제목에 초록색 글자 |
조합 가능: 다른 선택자와 결합 가능.
- input[type="text"]는 <input> 중 type="text"인 요소만 선택.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자 연습 예제</title>
<style>
/* input태그에 속성중 type="text" 인 요소를 선택해 */
input[type="text"] {
border: 1px solid gray;
padding: 5px;
width: 300px;
}
input[type="submit"] {
background-color: blue;
color: white;
padding: 5px 10px;
cursor: pointer;
border: none;
}
p[class~=highlight] {
background-color: yellow;
padding: 5px;
}
[data-type] {
border: 2px dashed green;
margin: 10px;
padding: 10px;
}
/* 속성 data-role 가지고 있는 요소중에 값 editor 포함 선택자를 만들어 보자 - 스타일링은 알아서 */
[data-role~=editor] {
background-color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="텍스트 입력">
<input type="submit" value="제출">
<p class="content highlight main">강조된 문단입니다</p>
<div data-type="card">카드 형태의 컨텐츠 입니다</div>
<span data-role="viewer editor">편집자 역할은 뭘까</span>
</body>
</html>
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS background에 이해 (0) | 2025.07.18 |
|---|---|
| CSS 박스 모델에 이해 (1) | 2025.07.18 |
| CSS 선택자(가상 클래스 선택자) (0) | 2025.07.14 |
| CSS 선택자(결합 선택자) (1) | 2025.07.14 |
| CSS 선택자(기본 선택자) (1) | 2025.07.14 |