[HTML] 이미지에 마우스 올리면 설명 텍스트 나타내는 법 (hover + title 활용)

---

💡 이미지 위에 마우스를 올렸을 때 설명(툴팁) 텍스트가 나오게 하고 싶다면?

웹페이지를 만들 때 이미지에 마우스를 올리면 설명 문구(툴팁)가 뜨도록 하고 싶을 때가 많아요.
가장 기본적인 방법은 HTML의 title 속성을 사용하는 것이고,
CSS의 :hover를 이용해 직접 스타일링된 툴팁을 만들 수도 있습니다.

이 글에서는 title 속성 활용법 + CSS로 툴팁 만들기 두 가지 방법을 알려드립니다.

---

🛠️ 방법 1. title 속성 사용하기 (가장 간단한 방법)

<img src="example.jpg" alt="예시 이미지" title="이 이미지는 예시입니다.">

✅ 장점:

• HTML만으로 간단하게 적용 가능
• 자동으로 브라우저 기본 스타일의 툴팁이 뜸
• 사용법이 매우 직관적

---

🛠️ 방법 2. CSS로 직접 툴팁 만들기 (커스텀 스타일 적용)

<style>
  .tooltip-wrapper {
    position: relative;
    display: inline-block;
  }

  .tooltip-wrapper .tooltip-text {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>

<div class="tooltip-wrapper">
  <img src="example.jpg" alt="예시 이미지">
  <div class="tooltip-text">이 이미지는 예시입니다.</div>
</div>

---

🎯 포인트 설명

• position: relative; 👉 툴팁 위치 기준이 되는 부모 요소
• position: absolute; 👉 툴팁 박스 위치 설정
• opacity, visibility, transition: 부드럽게 나타나는 효과

---

⚡ title vs CSS hover 툴팁 비교

방법	장점	단정
title 속성	간단, HTML만으로 가능	커스텀 스타일 불가, 폰트/색상 고정
CSS :hover	자유로운 디자인, 위치 조정 가능	코드가 조금 더 복잡

---

🏁 마무리 요약

목표	방법
간단하게 설명 문구 띄우기	title="텍스트" 사용
디자인된 툴팁 만들기	CSS :hover와 opacity 활용
툴팁 위치·색상·애니메이션 조정	CSS 커스텀 툴팁 사용

---

👉 다음 글 예고

[HTML] input 입력창에 최대 글자수 제한하는 방법 (maxlength 속성 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊