CSS CSS 속성 선택자 (Attribute Selector) 이해
페이지 정보
조회 65회
본문
CSS 속성 선택자 (Attribute Selector) 이해
1. 기본 속성 선택자
특정 속성을 가지고 있는 모든 요소를 선택합니다.
작성법: [속성명]
예시: a[href] { color: orange; }
의미: href 속성을 가진 모든 a 태그를 선택합니다.
2. 속성값 일치 선택자
속성명이 특정 값과 완전히 일치하는 요소만 선택합니다.
작성법: [속성명="값"]
예시: input[type="text"] { border: 1px solid blue; }
의미: input 태그 중 타입이 text인 요소만 파란 테두리를 적용합니다.
3. 속성값의 일부를 찾는 선택자 (문자열 매칭)
속성값이 길거나 특정 패턴을 가진 경우에 유용합니다.
시작 값 매칭(^): 특정 값으로 시작하는 요소를 선택합니다.
예시: a[href^="https"] { font-weight: bold; }
의미: 보안 연결(https)로 시작하는 링크만 굵게 표시합니다.
끝 값 매칭($): 특정 값으로 끝나는 요소를 선택합니다.
예시: a[href$=".pdf"] { color: red; }
의미: 파일 확장자가 pdf로 끝나는 링크를 선택합니다.
포함 매칭(*): 특정 값을 포함하고 있는 모든 요소를 선택합니다.
예시: [class*="btn"] { padding: 10px; }
의미: 클래스명에 btn이라는 글자가 들어간 모든 요소를 선택합니다.
실무 활용 요약표
선택자 형식 | 의미 | 활용 사례 |
[target] | target 속성이 있는 요소 | 새 창 열기 링크만 골라낼 때 |
[type="submit"] | 타입이 submit인 요소 | 전송 버튼만 디자인할 때 |
[href^="tel:"] | 전화번호 링크로 시작하는 요소 | 모바일 전화 연결 아이콘 삽입 시 |
[src$=".png"] | png 확장자로 끝나는 요소 | 특정 이미지 형식만 제어할 때 |
[title*="notice"] | 타이틀에 notice가 포함된 요소 | 툴팁 메시지 일괄 제어 시 |
| 기호 | 매칭 방식 | 설명 |
| [attr="val"] | 완전 일치 | 속성값이 정확히 val인 경우 |
| [attr~="val"] | 단어 포함 | 공백으로 구분된 단어 중 val이 있는 경우 |
| [attr|="val"] | 시작(하이픈 포함) | 값이 val이거나 val-로 시작하는 경우 |
| [attr^="val"] | 시작 문자열 | 값이 val로 시작하는 모든 경우 |
| [attr$="val"] | 끝 문자열 | 값이 val로 끝나는 모든 경우 |
| [attr="val"]* | 포함 문자열 | 값의 어느 곳이든 val이 들어있는 경우 |
요약
속성 선택자는 HTML 마크업의 정보를 그대로 디자인의 도구로 활용하게 해줍니다.
특히 폼 요소(input, checkbox 등)를 제어하거나 링크의 성격에 따라 아이콘을 붙이는 등 실무 작업에서 클래스 이름을 줄여주는 효율적인 방법입니다.
- 이전글CSS 가상 클래스 & 가상 요소 26.02.27
- 다음글CSS 연결 선택자: 부모와 자식 요소 이해 26.02.27