웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹사이트에서 툴팁(tooltip)형태로 한번에 많은 정보를 보여줄 수 있는 title 속성에 대하여 알아봅니다. 아래의 웹문서처럼 태그 안에 title이 사용됩니다.
<table>
<tr title="별칭1, 별칭2, 별칭3, 별칭4, 별칭5">별칭 1 외 4개</tr>
</table>
<tr title="별칭1, 별칭2, 별칭3, 별칭4, 별칭5">별칭 1 외 4개</tr>
</table>
그럼 title 속성에 대하여 더 자세히 알아봅니다.
# title 속성 알아보기
title 속성은 엘리먼트에 적용할 수 있으며 해당 요소에 마우스를 올릴 경우 툴팁창이 나타납니다. 나타난 툴팁에는 해당 title 속성이 가진 값들이 모두 나타나게되죠.! title 속성의 툴팁 스타일을 변경할 수 없는가
title에 의하여 나타나는 툴팁은 브라우저 고유 창이며 이를 수정할 수 있는 방법은 없습니다. 그래서 커스텀으로 직접 tooltip을 만들어 사용하는 것이죠. 이는 아래 링크를 참고하세요. 다음으로 과연 툴팁은 언제 사용될까요?커스텀 툴팁 만드는 방법 바로가기 >
https://webisfree.com/2018-06-25/커스텀-툴팁(tooltip)-만드는-방법
! title 태그가 필요한 경우
title 속성이 사용되는 경우는 보여줄 수 있는 공간이 작아서 모든 내용을 못 보여줄 때 많이 쓰입니다. 이 경우 일부만 보여주고 툴팁으로 title 속성을 사용해 보여주죠. 만약 아래와 같이 한 줄에 여러개의 텍스트를 다 보여주기 어려운 경우 마우스를 올려서 나머지 내용을 확인하도록 해줍니다. 아래 엘리먼트 위에 마우스를 올려보세요.@ title.html
<span title="webisfree.com">web...</span>
아래의 web... 위에 마우스를 올려보세요.
web...
이처럼 마우스를 올리면 브라우저에 작은 창이 나타나 title 속성 내부의 모든 값들을 보여주게 됩니다. 몇 가지 예제를 더 알아보겠습니다. 테이블의 경우의 예제를 보죠.
# table 태그에 사용된 title 속성 툴팁
table 태그는 컬럼이 많은 경우 모든 내용을 한번에 보여주기 어렵죠. 그래서 title 속성이 특히 더 많이 사용되게됩니다. 아래는 특정 cell에 title을 적용한 예제입니다.@ title.html
<table border="1">
<tr>
<td>sitename A</td>
<td>web</td>
</tr>
<tr>
<td>sitename B</td>
<td>webis</td>
</tr>
<tr>
<td>sitename C</td>
<td title="webisfree.com">webis...</td>
</tr>
</table>
<tr>
<td>sitename A</td>
<td>web</td>
</tr>
<tr>
<td>sitename B</td>
<td>webis</td>
</tr>
<tr>
<td>sitename C</td>
<td title="webisfree.com">webis...</td>
</tr>
</table>
위 태그는 아래와 같이 나타나게 됩니다. 아래에서 webis...을 찾아 마우스를 올려보세요.
| sitename A | web |
| sitename B | webis |
| sitename C | webis... |
정상적으로 툴팁이 나타났나요? 이처럼 많은 정보를 보여주기 어려울때 생략과 동시에 title 속성을 많이 사용하는 점 알아두시기 바랍니다.
# 마치면서
title 속성은 간단하지만 스타일을 부여하기 어려워 웹페이지와 어울리기 어렵습니다. 또한 추가적인 기능을 제공하는 것도 어렵죠.. 이런 이유로 커스텀으로 툴팁을 title 속성처럼 동작하도록 만들기도 합니다. 이에 대한 부분은 위의 링크에 있으니 함께 보셔도 좋을 것 같습니다.아래의 글도 찾고 계시지 않나요?