Programming

알트(Alt) 태그 본문 이미지에 표시하기(css)


사이트 내에 첨부된 이미지들 중에서 알트태그(대체 텍스트)를 css로 표시할 수 있습니다. 티스토리의 경우에는 대체 텍스트를 이미지를 클릭하여 설정해줄 수 있는데, 본문에 첨부된 이미지들 중에서 Alt 속성 값이 없는 이미지 혹은 Alt 속성 값이 있어도 내용이 없는 경우에 본문에서 쉽게 찾을 수 있도록 css로 표시하여 보여줄 수 있습니다.

<!-- /* Find alt tag */ /* img[alt=""] : img 태그중에 alt속성은 있는데 값이 없는 경우를 찾는거에요. */ /* img:not([alt]) : img 태그중에 alt속성이 아예 없는 경우를 찾는거에요. */ img[alt=""], img:not([alt]){ border:3px dotted red; } -->

Alt tag

위와 같이 빨간 점선으로 표시되어 있는 경우, 알트태그(Alt tag)가 제대로 설정되어 있지 않습니다. 알트 태그는 검색엔진에 로봇이 색인하여 노출을 도와주기 쉬울 뿐 아니라 웹표준에 필수속성 값이기 때문입니다. 따라서 웹페이지 최적화를 고려하시는 분들이라면 알트태그는 꼭 설정해주셔야만 합니다.

  • border:3px dotted red
  • border:1px dotted grey;
  • border:2px dotted black;

이미지의 값 혹은 다른 방식으로도 구현이 가능합니다. img[alt=""]:hover : opacity 0.5; 혹은 transition: all .2s ease-out; 등의 요소를 삽입하면 애니메이션 효과로도 쉽게 찾으실 수 있습니다.

<!-- <script> $('img[alt="N"]').each(function(){     $(this).replaceWith('<img src="./images/new_icon_8.png" alt="아이콘">'); }); </script> -->

만약 사이트 새글알림 표시에도 위와 같이 빨간 점선 표시가 뜬다면, 위의 아이콘 이미지에도 Alt tag값을 부여해줄 수 있습니다.