최원종의 개발 블로그

CSS 선택자(속성 선택자) - 10 본문

HTML_CSS/사전학습

CSS 선택자(속성 선택자) - 10

chl6698 2026. 4. 17. 16:07

속성 선택자

속성 선택자는 HTML 요소의 속성(Attribute)이나 그 속성의 값(Value)을 기준으로 요소를 선택하는 CSS 선택자.
태그 이름이나 클래스,ID 대신 요소가 가진 속성(예: type, href, class)을 보고 스타일을 적용

대괄호([])를 사용하며, 속성 이름만 쓰거나 특정 값과 매칭시켜서 선택가능
ex)<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"가 포함된 제목에 초록색 글자

실습코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input[type="text"] {
        border: 1px solid gray;
        padding: 5px;
        width: 220px;
      }
      input[type="submit"] {
        border: none;
        padding: 25px;
        color: black;
      }
      /* [속성 ~= 값] --> 속성 값에 특정 단어가 포함된 경우 선택 */
      p[class~="highlight"] {
        background-color: yellow;
        padding: 50;
        border: 1px dashed red;
      }
      [data-role] {
        background-color: aqua;
        border: 1px dashed red;
      }
    </style>
  </head>
  <body>
    <!--  -->
    <input type="text" placeholder="텍스트 입력" />
    <input type="submit" value="제출" />
    <p class="content highlight main">강조된 문단입니다</p>
    <div class="card">카드 형태의 콘텐츠입니다</div>
    <span data-role="viewer editor"> 편집자 역할입니다</span>
  </body>
</html>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS position 관련 속성(Position, Z-Index) - 12  (0) 2026.04.17
CSS 박스 모델에 이해 - 11  (0) 2026.04.17
CSS 선택자(가상 클래스 선택자) - 9  (0) 2026.04.16
CSS 선택자(결합 선택자) - 8  (1) 2026.04.16
CSS(Cascading Style Sheets) - 7  (0) 2026.04.16
'HTML_CSS/사전학습' Related Articles more