안녕하세요...

미니님a입니다.

이 팁을 그누보드에도 포함되고 / 퍼블리셔 부분에도 포함이 되어서

제가 작성하기 편한 팁 자료실에 작성합니다.

웹 표준을 위해서는 이미지에 "반드시" alt 속성이 있어야 합니다.

alt 는 이미지가 없을 때 대체 텍스트로 꼭 있어야 합니다.

하지만, 웹 페이지를 제작하다보니 잊어버리거나, 깜빡 하거나 등등의 사유로 누락되는 경우가 종종 있으실 것입니다.

그렇다고 그걸 찾아다니자니 힘들고...

이 경우 default.css 맨 상단이나 ...아니면 head.sub.php 파일 상단에 아래 코드만 넣어 두시면, 해결이 됩니다.

 img[alt=""]{
            border: 5px solid #c00;
        }
        img:not([alt]){
            border: 5px solid #c00;
        }

이 코드만 작성하시면...alt 속성을 안썼거나 / 빈값이라면 보더값이 표현이 됩니다.

그럼 아.... 하고 금방 수정이 가능할 것입니다.

아래는 간단하게 placeholder 로 예제 코드를 작성한 상황입니다.

  <img src="http://placehold.co/200x200" alt="200x200">
    <img src="http://placehold.co/200x200" alt="">
    <img src="http://placehold.co/200x200">
    <img src="http://placehold.co/200x200" alt="200x200">
    <img src="http://placehold.co/200x200">

위 예제를 보시는 것처럼 2번째는 alt 값이 빈 값   3번째와 5번째는 아예 alt 속성이 없죠?

이 결과 값이 어떻게 될까요?

바로 아래처럼 빨간색으로 표현 됩니다.

이렇게 해두시면 내 홈페이지에서 빨간색 네모가 뜨면..아..alt 빼 먹었구나..하고 금방 찾으실 수 있을 것입니다.

고맙습니다.