alt 와 title 속성에 관하여

html 기본편 8편에서 alt 태그를 배운바 있습니다.

그런데 이 alt 태그와 비슷한 속성을 가진 녀석이 또하나 있는데 바로 title 태그입니다.

삽입되는 위치가 똑같고 이미지에 스며들어 각각의 기능을 한다는 점에서 비슷한 녀석들이나 하는일은 둘다 서로 다릅니다.

즉 alt는 그림속에 스며들어가서 크롤링 봇이나 기타 검색엔진에게 이미지에 대한 설명을 할때 전달해주는 역할을 하므로 웹상에서 사람눈에 직접 보여지진 않습니다.

일종의 사람이 봇에게 제공하는 이미지의 설명문인 셈입니다.

사람에게 전달될 수 있는 경우는 이미지가 나오지 않는 경우에 이미지 대신 출력되는 글씨가 alt태그로 입력되어진 문구입니다.

그러나 title 태그는 마우스 오버 이벤트에 반응해서 포스팅을 직접 작성한 사람의 이미지에 대한 설명문구를 해당페이지를 웹상에서 보는 다른 사람들에게 보여줍니다.

즉 title 태그는 이미지가 나올경우 사람에게, alt 태그는 이미지가 나올경우엔 봇에게 안나올경우엔 사람에게 각각 해당 이미지가 어떤것인지 개략적으로 설명하는 역할을 하게 됩니다.

먼저 alt태그를 다시 복습해 보겠습니다

<html>

<head>

</head>

<body>

</body>

</html>

이경우에 alt 태그에 들어간 글은 웹상에서 사람에게 반응하거나 노출되지 않고 오직 봇에게만 반응합니다.

다음은 title태그에 대해 알아보겠습니다.

<html>

<head>

</head>

<body>

</body>

</html>

구조상으로 볼때 alt태그와 같은위치 똑같은 일을 하는 것으로 보이나 기능은 전혀 다르다는 것을 설명드렸습니다.

즉, title태그는 마우스가 이미지 위로 올라갈때 즉 마우스오버 이벤트가 발생할 경우 이미지파일에 대한 간단한 설명을 풍선도움말 형식으로 사람들에게 보여주게 됩니다.

블로그나 웹사이트를 운영하는 사람의 입장에서 볼때 두가지 태그가 지니는 의미는 그리 작은게 아닙니다.

우리는 블로그나 웹사이트에 포스팅하면서 항상 많은 방문자들이 봇의 크롤링에 의해서 방문해 주길 원합니다.

그런데 사실 봇이 페이지의 이미지들을 읽어 들이는 형식의 가장 큰부분이 바로 alt태그와 title태그 입니다.

검색봇들에게 수집이 다양하고 원할하게 될수 있도록 alt와 title태그를 달아주는것은 아주 필수적인 것이라고 할 수 있겠습니다.

만약 두가지 모두 달게 된다면 <img src="" alt="" title="">의 형식이 될것이며 이 방법을 권장 드립니다.

티스토리에서는 글쓰기 메뉴의 이미지 수정창에서 alt태그 까지는 지원해 주고 있습니다.

비록 title태그는 달지 못하더라도 조금은 손쉽게 alt태그는 달아줍시다.

font 태그 명령어 이해하기 (0)	2018.06.29

IT ERROR FIX