CSS 속성(Attribute) 선택자 정리, 7가지 종류

CSS 속성(Attribute) 선택자 정리, 7가지 종류

웹 페이지를 만들다 보면 태그 안에 class, id, href 등 많은 속성을 추가하게 됩니다. 속성 선택자는 태그 안에서 사용된 속성 값을 이용하여 스타일을 지정할 수 있습니다. 그럼 속성 선택자 종류에 대해서 알아보죠.

CSS 속성(Attribute) 선택자

1. 속성 선택자 종류 (7가지)

종류설명예시
[속성]해당되는 속성 이름을 가진 요소[href]
[속성=값]해당되는 속성값이 일치하는 요소[type=”button”]
[속성~=값]해당되는 속성값이 포함되는 요소[class~=”button”]
[속성|=값]해당되는 속성값이 포함되는 요소 (하이픈 포함)
* 값 뒤에 바로 “-” 문자가 있는 경우 포함
[lang|=”us”]
[속성^=값]해당되는 속성값으로 시작하는 요소[lang^=”us”]
[속성$=값]해당되는 속성값으로 끝나는 요소[href$=”ppts”]
[속성*=값]
해당되는 속성값이 포함된 요소[href*=”blueshare”]

☞ 물론 다 외우 필요는 없습니다. 이런 것도 있구나 정도 알고 있으면 될 것 같습니다. 그리고 [속성], [속성=값] 이외에는 많이 사용하지는 않아 만약에 사용하실 때 인터넷에서 찾아보시면 됩니다.


2. 사용 예제 ([속성], [속성=값])

▼ 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>속성 선택자</title>
<style>
a { text-decoration: none; }
input { height: 25px;}
div { margin-bottom: 20px;}

/* a 태그 중에서 속성이 title인 요소만 적용 */
a[title] {
     color: purple;
     font-size: 2.5em;
}
/* a 태그 중에서 href 속성이 "https://daum.net"인 요소만 적용 */
a[href="https://daum.net"] {
     color: green;
     font-size: 2.5em;
}
/* input 태그 중에서 type 속성이 "text"인 요소만 적용 */
input[type="text"] {
     background-color: red;
     border-radius: 15px;
}
</style>
</head>
<body>
     <div><a href="https://blueshare.tistory.com" title="BlueShare 블로그">BlueShare 블로그</a></div>
     <div><a href="https://google.com">구글</a></div>
     <div><a href="https://daum.net">다음</a></div>
     <div><a href="https://naver.com">네이버</a></div>
     <div><input type="text"></div>
     <div><input type="password"></div>
</body>
</html>


3. 실행 결과 화면

속성 선택자 예제 실행 결과 화면입니다.

CSS 관련 이전 게시글

  1. CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
  2. CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
  3. CSS 스타일 적용 순서(우선순위) – !important
  4. CSS 글꼴(폰트) 관련 스타일, font-family 속성 등
  5. CSS 웹 폰트 사용하기 – @font-face
  6. CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법
  7. [CSS] 눈누 웹 폰트 사용하기, 티스토리 적용 방법
  8. [CSS] 색상 지정하기(6가지 방법), 티스토리 글자색 지정
  9. [CSS] 텍스트 정렬(text-align), 줄 간격 조절(line-height)
  10. [CSS] a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경
  11. [CSS] 목록 리스트 스타일 정리 및 예제, list-style 속성
  12. [CSS] 표(table) 스타일 정리 및 예제, border 속성 등
  13. [CSS] 배경색(background-color) 및 범위 지정 방법
  14. [CSS] 배경 이미지 넣는 방법, background-image 속성 등
  15. [CSS] 결합(Combinators) 선택자 – 자손, 자식, 형제 결합자
위로 스크롤