웹 표준을 위한 alt 누락 확인
안녕하세요...
미니님a입니다.
이 팁을 그누보드에도 포함되고 / 퍼블리셔 부분에도 포함이 되어서
제가 작성하기 편한 팁 자료실에 작성합니다.
웹 표준을 위해서는 이미지에 "반드시" alt 속성이 있어야 합니다.
alt 는 이미지가 없을 때 대체 텍스트로 꼭 있어야 합니다.
하지만, 웹 페이지를 제작하다보니 잊어버리거나, 깜빡 하거나 등등의 사유로 누락되는 경우가 종종 있으실 것입니다.
그렇다고 그걸 찾아다니자니 힘들고...
이 경우 default.css 맨 상단이나 ...아니면 head.sub.php 파일 상단에 아래 코드만 넣어 두시면, 해결이 됩니다.
[code]
img[alt=""]{
border: 5px solid #c00;
}
img:not([alt]){
border: 5px solid #c00;
}
[/code]
이 코드만 작성하시면...alt 속성을 안썼거나 / 빈값이라면 보더값이 표현이 됩니다.
그럼 아.... 하고 금방 수정이 가능할 것입니다.
아래는 간단하게 placeholder 로 예제 코드를 작성한 상황입니다.
[code]
<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">
[/code]
위 예제를 보시는 것처럼 2번째는 alt 값이 빈 값 3번째와 5번째는 아예 alt 속성이 없죠?
이 결과 값이 어떻게 될까요?
바로 아래처럼 빨간색으로 표현 됩니다.
이렇게 해두시면 내 홈페이지에서 빨간색 네모가 뜨면..아..alt 빼 먹었구나..하고 금방 찾으실 수 있을 것입니다.
고맙습니다.
댓글 11개
멋진 팁인데요 ^^
나 여기있소~~~ 나 잡아봐라였군요 ㅎㅎㅎ
감사합니다.
좋은 팁, 감사합니다 ^^
감사합니다.
view.skin.php 파일에 alt값 없을때 자동으로 제목으로 들어가게 하는 방법도 있습니다. ^^
<?php
$ck = explode("<img",$view['content']);
$contentalt = $ck[0];
for($i=1 ; $i < count($ck); $i++)
{
if(strpos($ck[$i],"alt=") === false || strpos($ck[$i],"alt=\"\"")) {
$contentalt .= '<img alt="'.$view['wr_subject'].'"'.str_replace('alt=""','', $ck[$i]);
}
?>
alt 속성은 존재하지만 빈값인 경우와 alt 속성 자체가 없는 경우는 다르게 표시되도록 하는 게 좋을 것 같습니다. ^^
좋은 팁 감사 합니다.
꿀팁이네요
멋집니다. 시각적으로 표시되는군요.
css에서 특성이나 요소로도 선택할 수 있었군요!
덕분에 하나 배워갑니다~
멋집니다