HTML 문서에서 특정 요소에 추가 정보를 제공하려면 title 속성을 사용하면 됩니다. title 속성은 마우스 커서를 요소 위에 올렸을 때 툴팁(tooltip) 형태로 나타나는 보조 설명을 지정할 수 있어, 사용자에게 간단한 힌트나 안내를 전달하는 데 매우 유용합니다.
title 속성이란?
title 속성은 대부분의 HTML 요소에 적용할 수 있는 전역 속성입니다. 링크(<a>), 이미지(<img>), 버튼(<button>) 등에 짧은 설명을 붙일 수 있으며, 화면 낭독기(스크린 리더)도 이 정보를 참조하기 때문에 웹 접근성 향상에도 도움이 됩니다.
예제
아래 코드를 직접 실행해 보면서 title 속성의 동작 방식을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML base Tag</title> <base href = "https://www.qries.com" /> </head> <body> Qries.com <img src = "https://www.qries.com/images/banner_logo.png" /> </body> </html>
위 예제에서 <base> 태그는 문서 내 모든 상대 URL의 기준 주소를 지정합니다. 여기에 이미지 태그에 title="Qries 로고"처럼 title 속성을 추가하면, 사용자가 이미지 위에 마우스를 올릴 때 해당 설명이 작은 툴팁으로 표시되는 것을 확인할 수 있습니다.