[CSS] Attribute

안녕하세요 동기 여러분! 오늘은 속성(Attribute)에 대해 알아보도록 합시다!

 

Attribute

HTML에는 엄청나게 많은 속성들이 있습니다. 

MDN Web Docs에 가보면 Attribute list를 정리해두었는데 영어 실력 테스트 겸 한번 보시길 추천합니닼ㅋㅋ 전 읽다가 포기
링크 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

HTML attribute reference - HTML: HyperText Markup Language | MDN

 

CSS에서는 간단하지 않은 기호를 사용해 HTML의 속성들과 그의 값들을 속성 선택자(Attribute selector)로 스타일을 변경해 줄 수 있습니다.

 

---

 

비교

지금까지는 스타일을 넣기 위해서 HTML의 속성을 끌어오거나 class 또는 id의 값으로만 속성 선택자(Attribute selector)를 지정해주었습니다.

HTML 코드

<h1 title="ttl">큼직한 제목이군</h1>
<h1>나도 큼직한 제목일세</h1>

CSS 코드

h1 {
  color: red;
}

위 코드들을 실행하면 아래와 같이 두 <h1>태그 모두 빨간색으로 변합니다.

 

 

하지만 지금 부터는 정밀하게 속성 선택자(Attribute selector)를 지정하여 "큼직한 제목이군"만 빨간색으로 변하게 해 보겠습니다.

 

정밀하게 속성 선택자 지정하기 CSS 코드

h1[title] {
  color: red;
}

정밀하게 속성 선택자를 지정했더니 아래와 같이 "큼직한 제목이군"만 빨간색으로 변하는 것을 확인할 수 있습니다.

 

여기서 더욱 정밀하게 속성 선택자를 지정할 수 있습니다.

h1[title="ttl"] {
  color: red;
}

아주 놀랍지 않나요?

 

이밖에도 속성 선택자를 지정할 수 있는 방법은 더 있습니다.

 

---

 

다양한 속성 선택자 지정 방법 

[attr]	[속성이름]
[attr=value]	[속성이름="값의 이름"]
[attr~=value]	[속성이름="공백으로 구분된 철자가 일치하는 단어"]	<h1 title="ttl value">라는 태그가 있다면 CSS에서는 h1[title~="ttl"] 또는 h1[title~="value"]로 적용가능 (h1[title~=ttl value"]는 테스트 결과 적용안됌.
[attr|=value]	[속성이름="하이픈 - 으로 구분된 철자가 일치하는 단어"]	<h1 title="ttl-value">라는 태그가 있다면 CSS에서는 h1[title|=="ttl]로 적용 가능(무조건 - 앞에 오는 단어로 지정해주어야함)
[attr^=value]	[속성이름="접두사(앞에오는 단어)의 철자가 일치하는 단어"]	<h1 title="ttlvalue">라는 태그가 있다면 CSS에서는 h1[title^="t], h1[title^="tt"], h1[title^="ttl"], h1[title^="ttlv"] 이런식으로 h1[title^="ttlvalue"]까지 모두 적용 됩니다.  띄워쓰기로 단어를 나눈경우 <h1 title="ttl value"> 역시도 접두사가 일치해야 적용 됩니다. 예) h1[title^="t"], h1[title^="tt"], h1[title^="ttl"] 하이픈으로 단어가 구분된 경우도 위와 마찬로 적용됩니다.
[attr$=value]	[속성이름="접미사(뒤에 오는 단어)의 철자가 일치하는 단어"]	이번엔 완전히 반대로 생각해주면 됩니다. <h1 title=ttlvalue">라는 태그가 있다면 CSS에서는 h1[title$="e"], h1[title$="ue"], h1[title$="lue"], h1[title$="alue"] 이런석으로 h1[title^="ttlvalue"]까지 모두 적용 됩니다. 띄워쓰기로 단어를 나눈경우 h1[title^="e"], h1[title^="ue"] 이런식으로 h1[title^="value"]까지 적용이 됩니다. 하이픈으로 단어가 구분된 경우도 위와 마찬가지로 적용됩니다.
[attr*=value]	[속성이름="접미사, 접두사 중에 철자가 일치하는 단어"]	[attr^=value]와[attr$=value]를 합쳐 놓은 버전

 

속성 선택자를 실습하다가 느낀 건데 컴퓨터는 앞에서부터 뒤에서부터 아주 정직하게 철자를 검사합니다. 그걸 알고 보시면 더욱 빨리 이해가 되실듯합니다.

 

공부하다가 좋은 사이트를 찾게 되어 알려드립니다. 

dAsImA - 무슨 사이트인지는 잘 모르겠습니다. 제품 리뷰 같은 거도 있고 패션도 있고 음식도 있고... 하지만 속성 선택자 정리가 너무 잘되어 있다는 거
링크 : https://dasima.xyz/css-attribute-selector/

CSS 속성 선택자 의미 및 7가지 종류 예제 - dAsImA

 

---

 

오늘의 느낌

코드를 하면서 느낀 건데 기술 블로그 하는 거 진짜 중요한 거 같습니다. 왜냐하면 저 같은 경우 강의 같은 거 들으면 결국 사소한 건 그냥 이해하고 넘어가버리는데 블로그를 쓰게 되면서 일일이 다 실행을 해보니까 더욱 이해도 빠르고 까먹게 되더라고 내가 공부한 내용을 다시 보면 기억도 빨리 나고 참 여러모로 장점이 많습니다.

 

반드시 이 코드 저 코드 실행을 해보세요! 

 

그리고 혹시 제 블로그를 봐주시는 여러분! 저는 배우는 학생이기 때문에 실수와 오류가 있을 수 있습니다. 피드백을 댓글로 남겨주시거나 메일로 보내주시면 감사하겠습니다~~~