CSS 속성 선택자 에 대해 알아보자

안녕하세요 탐구소년입니다. 

일 때문에 CSS 속성을 정리할 일이 좀 있었는데, 그 김에 정리한 내용 중 일부를 블로그에 업로드하려고 합니다. 업로드할 내용은 CSS의 선택자 중에서도 '속성 선택자'를 사용하는 방법입니다.

 

 

- [속성] 선택자 : 지정한 속성에 스타일 적용하기

 

특정 태그가 특정 속성을 가지고 있을 시 스타일을 적용합니다.

 

위의 예에서는 a 태그가 href 속성을 가지고 있을 경우에만 a 태그에 tomato 색을 지정한다는 내용의 스타일 코드가 작성되어 있습니다. 

 

 

 

- [속성=값] 선택자 : 특정 값을 갖는 속성에 스타일 적용하기

 

위의 예에서는 href 속성에 네이버 주소가 지정되어 있는 a 태그에 대해서만 스타일 코드가 적용되었습니다. 

 

 

 

- [속성*=값] 선택자 : 특정 값이 포함된 속성에 스타일 적용하기

 

특정 값이 포함되기만 하면 됩니다.

 

위의 예에서는 href 속성에 "www" 라는 문자열이 포함되기만 하면 무조건적으로 스타일이 적용됩니다.

 

 

- [속성^=값] 선택자 : 특정 값으로 시작하는 속성에 스타일 적용하기

 

위의 예에서는 href 속성에 지정된 값의 앞부분이 반드시 https 인 경우에만 스타일이 적용됩니다.

 

 

- [속성$=값] 선택자 : 특정 값으로 끝나는 속성에 스타일 적용하기

 

위의 예에서는 href 속성에 지정된 값의 끝부분이 반드시 com 인 경우에만 스타일이 적용됩니다.