이미지 및 디자인 도구

이미지 맵 생성기

이미지를 선택하고 라벨과 안전한 URL이 있는 직사각형을 추가한 뒤 반응형 HTML을 복사하세요.

브라우저에서 로컬 처리가입 불필요개인정보 안내 ↗

원본 이미지 픽셀 좌표로 직사각형 영역을 최대 50개 추가할 수 있습니다.

사용 방법

사용 방법

  1. 이미지를 선택하고 대체 텍스트를 입력합니다.
  2. 직사각형 좌표, 라벨, 대상 URL을 추가합니다.
  3. 접근 가능한 이름이 붙은 맵을 확인하고 HTML을 복사합니다.

원본 픽셀 기준 직사각형

각 영역은 원본 이미지의 왼쪽, 위쪽, 너비, 높이를 픽셀 좌표로 사용합니다. CSS로 이미지를 조정해도 HTML 이미지 맵 좌표가 표시된 이미지에 맞춰 함께 조정됩니다.

안전하고 접근 가능한 출력

라벨은 area의 대체 텍스트가 됩니다. 이미지에는 비어 있지 않은 대체 텍스트가 필요하고 URL은 http(s) 또는 같은 페이지의 상대 경로만 허용됩니다. 내보내기 전에 HTML을 이스케이프합니다.

제한된 로컬 처리

이미지는 브라우저에서 읽습니다. 이미지 20MB, 영역 50개, 출력 10,000자 제한이 있습니다.

자주 묻는 질문

더 알아보기

이미지가 업로드되나요?

아니요. 이미지 정보와 생성 HTML은 브라우저에 남습니다.

어떤 모양을 지원하나요?

현재 버전은 직사각형 영역만 내보냅니다.

좌표가 픽셀인 이유는 무엇인가요?

원본 이미지에서 위치를 재현하기 쉽고 반응형 크기 변경 시 브라우저가 좌표도 맞춰 조정하기 때문입니다.