속성 선택자란?
속성 선택자는 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:gray;
color: pink;
}
</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' 카테고리의 다른 글
| CSS background의 이해 (0) | 2025.06.16 |
|---|---|
| CSS 박스 모델의 이해 (0) | 2025.06.16 |
| CSS 선택자(가상 클래스 선택자) (0) | 2025.05.29 |
| CSS 선택자(결합 선택자) (0) | 2025.05.29 |
| CSS 선택자 (기본 선택자) (0) | 2025.05.29 |