태그 속성(attribute)로 CSS 적용

작업 중 서버에서 불러오는 요소의 위치가 같으나 불러오는 이미지가 다를경우, 이미지의 alt 또는 title 속성에 따른 css를 적용할 수 있다.

 

아래 css를 공유하는 두 태그가 있다.

이 이미지에 class를 부여할 수 없을때(외부에서 불러오는 요소 등), 스크립트를 사용해 class를 개별적으로 부여하여 작업하는 경우가 많다.

이미지 하나에 쓰이는 작업량이 많기에 스크립트를 사용하지 않고 CSS만 사용하여 이미지에 적용시키려 한다.

<!-- 예시 HTML -->
<img alt="boss" title="boss" />
<img alt="test" title="test" />

 

나는 boss 라는 이름(title)을 가진 img 태그에 margin-top : -10px을 주고싶었다.

/* 예시 CSS */
img[title$="boss"]{margin-top:-10px;}
img[alt$="boss"]{margin-top:-10px;}

 

이의 경우 위의 예시처럼 적용하면 된다.