Title, Alt 속성을 이용하여 이미지에 툴팁 나타내기

HTML 쉽게 따라하기 - title. alt 속성을 이용하여 이미지에 툴팁 나타내기

툴팁은 웹문서에서 이미지등에 포인터를 위치 시키면 조그마한 글상자가 나타나는 것을 볼 수 있으며 이것을 툴팁이라고 한다. 보통 말풍선 도움말 이라고 하며 이러한 툴팁을 나타내기 위해서는 title, alt 속성으로 만들 수 있는데 두가지는 사실 용도가 다르다. 오늘은 이 툴팁에 대한 title, alt 속성의 사용법에 대해 알아보겠다.

Title 속성

다음은 title 속성을 이용해 이미지가 어떠한 역할을 하는지 나타낸 소스이다.

title = "말풍선에 나타낼 설명"

예시1>----------------------------------------------------------------

<html>

<head>

</head>

<body>

</center>

</body>

</html>

---------------------------------------------------------------------------

메모장에 위 소스를 입력하고 html문서로 저장하여 활성화를 시키면 해당 이미지가 중앙에 정렬된 창이 뜰것이다.

이미지 위에 마우스를 갖다 대면 "저축하세요"라는 말풍선이 뜬다.

참고로 pig.png 는 파일명을 쓰는게 아니라 파일 주소를 써야 한다. 잘 모르시는 분들은 앞서 공부한 이미지 넣는 방법을 참고하시기 바란다.

[IT & WEB/HTML 쉽게 따라하기] - HTML언어 쉽게 따라하기 - 이미지 넣는 태그

Alt 속성

alt = "그림이 없을때 나타낼 설명"

alt 속성은 이미지를 대체하는 문구를 제공하는 속성이다. 즉 이미지가 로딩되지 않을 경우 그 이미지를 대체하기 위한 텍스트라고 생각하면 된다. title과 같이 이미지에 대한 설명이라는 공통점이 있지만 title은 이미지가 나왔을때, alt는 이미지가 안 나왔을 때라고 기준을 삼으면 된다. 그렇기 때문에 두 가지를 다 적용 했을때 우선 순위는 당연히 title 이 먼저이다.