HTML 태그 정리

이미지와 이미지 맵 연결

<img src="/src/assets/sprite/sns.png" usemap="#image-map" />

1. img 태그에서 usemap="#image-map" 속성을 사용하여 이미지 맵과 연결
2. src="/src/assets/sprite/sns.png" → 이미지 파일 경로
3. usemap="#image-map" → 아래의 map name="image-map"과 연결됨

💡 이 방식은 특정 영역을 클릭하면 지정된 링크로 이동하도록 함.

이미지 맵 설정

<map name="image-map">
  <area
    target="_blank"
    alt="facebook"
    title="facebook"
    href="http://www.facebook.com"
    coords="15,15,15"
    shape="circle"
  />
  <area
    target="_blank"
    alt="instagram"
    title="instagram"
    href="http://www.instagram.com"
    coords="65,15,14"
    shape="circle"
  />
  <area
    target="_blank"
    alt="youtube"
    title="youtube"
    href="http://www.youtube.com"
    coords="115,15,14"
    shape="circle"
  />
</map>

1. map name="image-map" → 이미지 맵 정의
2. area → 클릭 가능한 영역 설정
3. target="_blank" → 새 창에서 링크 열기
4. alt="facebook" → 접근성을 위한 대체 텍스트
5. title="facebook" → 마우스 오버 시 표시될 툴팁
6. href="http://www.facebook.com" → 클릭 시 이동할 링크
7. coords="15,15,15" → 영역 좌표 (원형의 중심 X, Y 및 반지름)
8. shape="circle" → 원형 클릭 영역 설정

💡 이미지 맵을 사용하면 특정 이미지 부분을 클릭하면 원하는 웹사이트로 이동할 수 있음.

사용하는 이유

1️⃣ 하나의 이미지로 여러 개의 링크 제공 가능
✅ 설명:
이미지 하나에 여러 개의 클릭 가능한 영역을 추가할 수 있어, 여러 개의 버튼을 만들 필요 없이 효율적인 UI 설계가 가능

💡 예시:

SNS 아이콘이 하나의 이미지(sns.png)로 되어 있어도, 각각 Facebook, Instagram, YouTube로 이동하는 링크를 설정 가능
마우스로 클릭 가능한 영역을 원하는 대로 조정 가능
2️⃣ 디자인의 일관성 유지
✅ 설명:

개별 버튼을 만들면 각각의 크기, 간격, 정렬을 맞추는 것이 어려울 수 있음.
하지만 이미지 맵을 사용하면 하나의 이미지 내에서 좌표만 설정하면 되므로, 디자인이 깔끔하게 유지됨.
💡 예시:
✔ 사이트 맵(웹사이트 구조도) 이미지에 각 섹션별로 클릭 가능한 링크 추가
✔ 인터랙티브 UI (예: 건물 도면, 제품 상세 이미지 등) 구현 가능

3️⃣ 빠른 로딩 속도 & 성능 최적화
✅ 설명:

개별 버튼을 여러 개 만들면 각 버튼마다 HTTP 요청이 발생하여 페이지 로딩 속도가 느려질 수 있음.
이미지 맵은 단 하나의 이미지로 처리되므로 로딩 속도를 최적화할 수 있음.
💡 예시:
✔ e커머스 사이트에서 제품 상세 이미지에 클릭 가능한 영역 추가하여 페이지 전환 없이 설명 제공

4️⃣ 자바스크립트 없이도 링크 기능 구현 가능
✅ 설명:

일반적으로 버튼을 만들려면 JavaScript 또는 CSS로 스타일링이 필요하지만,
이미지 맵은 HTML만으로도 클릭 가능한 영역을 구현 가능하므로 간단하고 유지보수가 쉬움.
💡 예시:
✔ 온라인 지도에서 특정 위치를 클릭하면 해당 지역 정보를 보여주는 기능

5️⃣ 접근성 향상 가능
✅ 설명:

태그에 alt 속성을 추가하면, 스크린 리더가 이미지의 클릭 가능한 부분을 읽을 수 있어 웹 접근성이 좋아짐.
마우스를 올렸을 때 title 속성으로 설명을 추가하여 사용자 경험을 개선할 수도 있음.
💡 예시:
✔ 시각 장애인을 위한 웹사이트에서 각 영역을 설명해 주는 기능 추가 가능