0020 HyperText 링크를 제공하는 앵커(anchor)의 <a>요소 02 title 추가하기
3. <a> 요소의 title 속성
title 속성은 요소(element)에 대한 추가적인 정보를 보여주기 위하여 사용하는 속성이다.
요소(element)에 title 속성을 부여하면 해당 요소 위에 마우스 포인터를 위치시킬 때 작은 툴팁(tooltip)으로 title 속성에 부여한 문구가 나타난다.
툴팁(tooltip)은 말풍선이라고도 불리는 그래픽 사용자 인터페이스 중 하나이다. 마우스 포인터라 불리는 커서로 특정 항목을 클릭하지 않고 가리키기만 하면 조그마한 상자가 나타나 보충 설명을 보여준다.
다음과 같이 <a> 요소에 title 속성을 부여해 보자.
<a href="https://deliciouslearning.tistory.com/" title="Ankilog를 제공">책 씹어먹는 즐거움</a>
그러면 아래와 같이 마우스 포인터를 링크에 올렸을 때, 우리가 작성한 title 속성의 문구가 툴팁으로 나오는 것을 확인할 수 있다.
위 예제는 
0020.html 파일이다.
title 속성은 <a> 요소에만 부여되는 속성이 아니라 다른 모든 요소들에도 부여될 수 있는 속성이다. 이러한 속성을 전역 속성(global attribute)이라고 한다.
앞에서 배운 id 속성 lang 속성도 전역 속성(global attribute)이다.
title 속성은 위의 <a> 요소에서 사용된 것처럼 아래의 형식(syntax)으로 사용된다.
<요소명(element) title="text">
title 속성은 툴팁으로 간단한 문구를 보여주기 때문에 속성값으로 텍스트 형식을 갖는다.
title 속성은 <head> 요소의 <title> 요소가 아니다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0020 a요소 02 title 추가하기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0022 HTML로 글자의 형식 정하기 (0) | 2018.11.23 |
|---|---|
| 0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성 (0) | 2018.11.22 |
| 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성 (0) | 2018.11.20 |
| 0018 이미지를 보여주는 img 요소 03 이미지 다루기 (0) | 2018.11.18 |
| 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정 (0) | 2018.11.17 |