[STUDY] 이미지 삽입과 이미지맵 (img, map, area) 정리

1. <img> 태그: 이미지 삽입

HTML 문서에 이미지를 넣을 때 사용하는 인라인 요소이다. 닫는 태그가 없는 빈 요소(Empty element)인 것이 특징이다.

• 기본 형식: <img src="URL" alt="대체 텍스트">
• src 속성 (필수): 이미지의 경로를 지정한다. 같은 서버라면 상대 경로, 외부 서버라면 절대 경로를 사용한다. (프로토콜이 다를 경우 //로 시작하여 프로토콜을 생략할 수 있다.)
• alt 속성 (필수): 이미지가 보이지 않을 때 대신 나올 텍스트이다. 스크린 리더가 읽어주므로 웹 접근성에 중요하며, SEO(검색 엔진 최적화)에도 영향을 준다.
  • 팁: 단순 꾸미기용 이미지라면 alt=""와 같이 비워두는 것이 좋다.

2. 지원하는 이미지 형식

브라우저에서 주로 사용하는 형식은 다음과 같다.

• GIF: 애니메이션 지원 (.gif)
• JPG/JPEG: 사진에 적합 (.jpg, .jpeg)
• PNG: 투명 배경 지원 (.png)
• WebP/AVIF: 고압축 효율의 최신 포맷 (.webp)
• SVG: 깨지지 않는 벡터 방식 (.svg)

---

3. 이미지맵: 하나의 이미지에 여러 링크 걸기

이미지 내의 특정 영역을 나누어 각각 다른 링크를 연결하는 기술이다. <img>, <map>, <area> 세 가지 태그가 조합되어 작동한다.

• 연결 방법: <img> 태그에 usemap="#이름"을 쓰고, <map> 태그에 name="이름"을 작성하여 서로 연결한다. (이름 앞에 # 붙이는 것 주의!)

4. <map>과 <area> 태그

• <map>: 이미지맵을 선언하는 컨테이너이다. name 속성이 필수이다.
• <area>: 실제 클릭할 영역의 모양과 좌표를 지정한다.
  • shape: 영역의 모양을 결정한다. (rect: 사각형, circle: 원, poly: 다각형)
  • coords: 모양에 따른 좌표값이다.
    • rect: 좌상단(x1, y1), 우하단(x2, y2) 좌표
    • circle: 중심점(x, y)과 반지름(radius)
    • poly: 각 꼭짓점의 좌표 (x1, y1, x2, y2...)
  • href & alt: 클릭 시 이동할 URL과 해당 영역에 대한 설명이다. href를 쓸 때는 alt를 반드시 함께 작성해야 한다.

---

핵심 요약 표

속성/태그	주요 역할	주의사항
src	이미지 파일 경로	파일명은 의미 있게(SEO 권장)
alt	대체 텍스트 제공	웹 접근성의 핵심, 필수 작성
usemap	이미지와 맵 연결	값 앞에 # 기호 포함 필수
shape	클릭 영역 모양	rect, circle, poly 중 선택
coords	영역 좌표값	포토샵이나 이미지맵 생성 도구 활용 권장