속성 선택자란?
속성 선택자는 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]{ border:1px solid gray;} |
<input type="text"> |
type="text"인 입력창에 회색 테두리 |
| [속성~=값] | 속성 값에 특정 단어가 포함된 경우(완벽 매칭) |
[class~="big"]]{ fint-sizw:20px} |
<div class="box big"> | class에 "big"이 포함된 요소 글자 크기 20 px |
| [속성^=값] | 속성 값이 특정 값으로 시작하는 경우 | [href^="https"]{ text-dexoration: 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>728x90
'HTML CSS' 카테고리의 다른 글
| CSS 박스 모델에 이해 - 13 (0) | 2025.05.31 |
|---|---|
| (JAVA) 파일 복사 기능 만들어 보기-18 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript) CSS 선택자(가상 클래스 선택자) - 11 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 선택자(결합 선택자) - 10 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 선택자(기본 선택자) - 9 (0) | 2025.05.29 |