-
- 로그인후 이용해주세요.
팁과노하우
웹 표준에 필요한 이미지 필수 속성 alt 누락 확인 적용!
안녕하세요...
미니님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 빼 먹었구나..하고 금방 찾으실 수 있을 것입니다.
고맙습니다.
- 이전글빌더 관리버튼 마우스를 길게눌러 숨기기2025.11.29
- 다음글데이터 게시판 스킨 사용하시면서 일괄등록 업로드에서 에러 발생하시는 분2025.11.19
댓글목록
