이건없지

alt, title의 차이?


1. alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다. 용도는
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.

2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.

IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.

alt와 title의 차이점

1. alt(alternative) : 이미지의 대안, 이미지에 대한 설명

① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.

2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.

IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.

[php-tip]PHP 풍선도움말(titie) 홑,쌍따옴표 처리

// a 태그 title 부분은 쌍따옴표(")로 감싸야 한다.
<?
  $title_ori = $row['title'];
  $title_ori = str_replace('\"',"&quot;",$title_ori);
  $title_ori = str_replace("\'","'",$title_ori);

  $title=stripslashes($row['title']);
?>
<tr>
 <td>
  <a href="링크주소및파라미터" title="<?php echo $title_ori;?>"><?php echo $title;?></a>
 </td>
</tr>