이 매우 빠른 튜토리얼에서는 사용자가 이미지나 링크와 같은 요소 위로 마우스를 가져갈 때 간단한 설명 텍스트(예:도구 설명)를 표시하는 방법을 배웁니다.
툴팁을 추가하는 방법은 몇 초가 걸립니다. HTML 제목 속성을 사용하기만 하면 됩니다. title .
마우스 오버 시 텍스트 표시(요소 위로 마우스 이동)
다음은 루빅스 큐브 이미지의 기본 예입니다. 이 이미지 위로 마우스를 이동하면 몇 초 안에 Rubik's Cube에 대한 추가 정보가 나타납니다.
위의 이미지 요소에 대한 HTML 마크업은 다음과 같습니다.
<img
src="url-to-image-file"
title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
alt="A Rubik’s Cube"
/>사용자가 링크/앵커 요소 위로 마우스를 이동할 때 툴팁을 표시하고 싶다고 가정해 보겠습니다.
이 링크 위로 마우스를 이동하면 툴팁이 표시됩니다.
최신 기사
HTML 마크업:
<a href="https://techstacker.com" title="Link to TechStacker’s front page"
>Latest articles</a
>
그게 전부입니다. title을 추가할 수 있습니다. 모든 HTML 요소에 대한 속성.
이유 사용자가 요소 위로 마우스를 이동하면 텍스트가 표시됩니까?
단순함으로 인해 일부 사람들에게 혼란을 줄 수 있는 요소가 있다고 가정해 보겠습니다. 아이콘을 예로 들 수 있습니다. 대부분의 사람들은 소수의 아이콘 이상을 인식할 수 없지만 서구 세계에서만 말 그대로 수천 개의 다른 아이콘이 표시됩니다.
아이콘에 제목 속성을 추가하기만 하면(예:이미지 요소 내부) 사람들은 아이콘의 기능에 대한 명확한 설명을 얻을 수 있습니다. UI에 존재하는 모든 위치
이제 요소 위로 마우스를 가져가면 추가 정보가 표시된다는 사실을 알고 있는 사람이 얼마나 될까요?
좋은 질문입니다. 대답은 대상 고객에 따라 다르다는 것입니다. 기술에 정통한 대부분의 사람들은 마우스를 가리키고 1-2초 동안 기다리면 종종 주제에 대한 추가 정보가 표시된다는 것을 직관적으로 알고 있습니다.
하지만 청중의 대부분이 기술에 정통하지 않은 사람들이나 웹 검색을 많이 하지 않는 사람들로 구성되어 있다면 어떻게 될까요?
글쎄, 내 기본 작업은 Luke Wroblewski의 보편적인 조언을 적용하는 것입니다.
분명히 항상 승리합니다.
아이콘이 명확하지 않거나 최소한 높은 비율의 사람들에게 명확하지 않은 경우 더 나은 아이콘을 만들거나 해당 아이콘을 간단한 설명과 함께 사용합니다.
어쨌든 제목 속성을 추가하고 물론 ALT 속성(화면 판독기용, 시각 장애인용)은 장점만 있습니다. 모든 항목에 추가할 필요는 없지만 확실한 경우 추가할 수도 있습니다.
추가 보너스로 최소한 ALT 속성은 SEO에 최소한 간접적으로 영향을 미치지만 아마도 직접.
어때요? 글쎄요, ALT 설명은 접근성 카테고리에 속하며 Google이 비밀로 하지 않은 것은 그들이 웹사이트의 품질을 평가하는 방식에 영향을 미치며, 이는 SEO 순위에 영향을 미칩니다.
제목 속성에 관한 한 이전 SEO에 영향을 미치지만, 최근 연구에 따르면 오늘날에도 여전히 유효한지 확실하지 않습니다. 하지만 다시, title 속성을 사용하는 데에는 분명한 단점이 없고 장점만 있습니다.
대체 툴팁 방법
기본 제공 HTML 도구 설명/제목 속성의 사용자 정의 버전이 더 필요할 수 있습니다. 이 경우 JavaScript와 CSS를 사용하여 다양한 사용 사례에 대한 시간 및 스타일 도구 설명을 모두 사용할 수 있습니다. 그 유용한 기술을 다루겠습니다. 미래의 튜토리얼에서(내 작성 목록에 있습니다!).