이미지 맵 태그


이메일 광고용 템플릿 제작하기

회사에서 매달마다 이메일로 광고를 보내기 위해 이메일 템플릿을 제작해달라는 의뢰가 있었다. 간단한 이미지에 버튼 몇개만 추가하면 되는 기능인데, 문제는 그 복잡도가 점점 증가하면서 원치 않는 부작용이 생기기 시작했다.

특히 position: absolute가 안먹힌다든지, 또는 같은 템플릿을 작성해서 테스트해보면, 네이버에서는 잘 나오는데 Gmail에서는 깨진다든지 등등…. 이러한 이슈들이 참 고통스러웠다.

다른회사들의 광고메일을 보면, table을 통해서 직접 다 템플릿을 만들던데, 특이하게 스타벅스 메일광고만 통짜이미지로 보내는 것이였다. 스타벅스의 광고를 보면, 통 이미지 하나에, 여러개의 버튼기능을 구현해 놓았는데, 이 점이 너무 신기해서 코드를 까봤다.

starbuck email template

Table을 통해서 이미지를 쌓고, 그 밑에보면 map이라는 태그와 area 태그가 있다.

HTML - map

문서를 보면, 이미지 맵(클릭 가능한 링크 영역)을 정의하기 위해 와 함께 사용한다고 나와있다.

HTML - area

태그는 오직 <map>태그 요소의 내부에서만 사용할 수 있다.

태그의 속성 중 shaped에는 클릭할 버튼의 모양(ex : 네모 - rect)을 넣어주면 해당 위치에 링크를 만들수 있게 된다. coords에는 영역의 좌표를 지정해줌으로써 좌표값 내에 영역을 만들어 준다.


예시 example


결론

  • 복잡하게 CSS를 쓰는거 보다, 이런식으로 통 이미지 내에서 링크를 만들어서 사용하는것이 서로의 정신건강에 이로울 것 같다.

참고자료






© 2017. by isme2n

Powered by aiden