전체 방문자
오늘
어제
  • 전체 글
    • HTML
    • CSS
    • Javascript
    • React
    • Typescript
    • Next.js
    • Webpack
    • Vue.js
    • Git & GitHub
    • Error
    • Study
    • 개발 일지✨

블로그 메뉴

  • 💡
  • ⚙️
hELLO · Designed By 정상우.
하루

Home

속성 선택자
CSS

속성 선택자

2021. 12. 18. 22:52

HTML의 속성을 attribute라고하고, CSS의 속성은 property라고 한다.

 

[attr]

  • 속성 attr을 포함한 요소를 선택한다.
  • 예를들어 입력창의 투명도를 낮추고 싶다고 하자. 일반적으로 투명도를 낮추고 싶은 태그에 클래스로 별명을 부여하여 css를 통해서 투명도를 조정할 수 있지만, 이 또한 일일이 별명을 부여해야한다는 번거로움이 있다. 따라서 별명을 부여하지 않고도 주어진 속성만 가지고 특정한 요소를 선택하는 방법이 속성 선택자이다.

disabled 라는 속성을 가진 태그를 모두 선택

 

[attr=value]

  • 속성 attr을 포함하여 속성 값이 value인 요소 선택
  • 이때 값에 해당하는 것은 ""를 생략할 수도 있다.

 

[attr^=value]

  • 속성 attr을 포함하여 속성 값이 value로 시작하는 요소 선택
  • 해당 앞글자로 시작하는 속성-값을 가진 요소를 선택

 

[attr$=value]

  • 속성 attr을 포함하여 속성 값이 value로 끝나는 요소 선택

 

    'CSS' 카테고리의 다른 글
    • 단위
    • 우선순위
    • 가상 선택자
    • 복합 선택자

    티스토리툴바