Attribute Selectors

태그나 클래스 이름이 아닌 **요소가 가진 '속성(Attribute)'과 그 '값'을 조건으로 스타일을 입히는 속성 선택자(Attribute Selector)**에 대해 알아보겠습니다.

속성 선택자를 사용하면 HTML 구조를 변경하지 않고도 특정 속성을 가진 요소들만 핀셋처럼 골라내어 스타일을 적용할 수 있어 매우 강력합니다.

---

1. 기본 속성 선택자

특정 속성이 있는지, 혹은 속성값이 정확히 일치하는지 확인합니다.

• [속성]: 해당 속성을 가지고 있는 모든 요소를 선택합니다.
• [속성="값"]: 속성값이 지정한 값과 정확히 일치하는 요소를 선택합니다.

CSS

 

/* title 속성을 가진 모든 요소 */
[title] { border-bottom: 2px dotted orange; }

/* target 속성이 "_blank"인 링크만 선택 */
a[target="_blank"] { color: red; }

---

2. 문자열 매칭 선택자 (패턴 매칭)

속성값의 일부만 일치해도 스타일을 적용할 수 있는 유연한 선택자들입니다.

• [속성^="값"]: 값이 특정 문자로 시작하는 요소를 선택합니다. (Start with)
• [속성$="값"]: 값이 특정 문자로 끝나는 요소를 선택합니다. (End with)
• [속성*="값"]: 값이 특정 문자를 포함하고 있는 요소를 선택합니다. (Contains)

CSS

 

/* href가 https로 시작하는 링크 (외부 링크) */
a[href^="https"] { font-weight: bold; }

/* href가 .pdf로 끝나는 링크 (파일 다운로드) */
a[href$=".pdf"] { color: green; }

/* class 이름에 'btn'이 포함된 모든 요소 */
[class*="btn"] { padding: 10px; border-radius: 5px; }

---

3. 단어 및 언어 선택자

띄어쓰기로 구분된 단어나 특정 언어 코드를 찾을 때 사용합니다.

• [속성~="값"]: 띄어쓰기로 구분된 여러 값 중 하나가 일치하는 요소를 선택합니다.
• [속성|="값"]: 값이 정확히 일치하거나, 해당 값 뒤에 하이픈(-)으로 연결된 단어로 시작하는 요소를 선택합니다.

CSS

 

/* class 목록 중 'important'라는 단어가 포함된 요소 */
[class~="important"] { background-color: yellow; }

/* lang 속성이 'ko'이거나 'ko-KR'인 요소 */
[lang|="ko"] { font-style: italic; }

---

🖥️ 실전 예제 코드: "입력창 유형별 스타일링"

폼 태그의 input 요소들은 type 속성에 따라 모양이 천차만별이므로 속성 선택자가 가장 빛을 발하는 구간입니다.

HTML

 

<style>
  /* 모든 input 중 필수 입력(required) 속성이 있는 것 */
  input[required] { border: 2px solid red; }

  /* type이 "text"인 입력창만 선택 */
  input[type="text"] { width: 300px; }

  /* type이 "password"인 입력창만 선택 */
  input[type="password"] { background-color: #f0f0f0; }

  /* name 속성에 'user'가 포함된 모든 요소 */
  input[name*="user"] { color: blue; }
</style>

<form>
  <input type="text" name="user-id" placeholder="아이디" required>
  <input type="password" name="user-pw" placeholder="비밀번호">
  <input type="tel" name="phone" placeholder="전화번호">
</form>

---

📋 속성 선택자 기호 요약표

선택자 기호	의미	활용 예시
[attr]	속성 존재 여부	[required] (필수 입력 항목)
[attr="val"]	값이 정확히 일치	[type="submit"] (제출 버튼)
[attr^="val"]	값의 시작 부분 일치	[href^="mailto:"] (이메일 링크)
[attr$="val"]	값의 끝 부분 일치	[src$=".png"] (PNG 이미지)
[attr*="val"]	값의 일부분 포함	[class*="nav-"] (내비게이션 요소)

---

학습 정리

• 속성 선택자는 HTML에 클래스를 일일이 추가하지 않고도 기존 속성만으로 스타일을 제어할 수 있게 해준다.
• 특히 input 태그의 각 타입을 구분하거나, 파일 확장자에 따라 아이콘을 붙일 때 매우 유용하다.
• 대소문자를 구분하지 않고 싶다면 닫는 대괄호 앞에 i를 붙일 수 있다 (예: [href$=".jpg" i]).

---

속성의 패턴을 파악하여 정교하게 스타일을 적용하는 속성 선택자를 정복하셨습니다!

---