이미지 맵 태그 - 쉽고 빠르게 이메일 광고 버튼만들기
May 12, 2019
이메일 광고용 템플릿 제작하기
회사에서 매달마다 이메일로 광고를 보내기 위해 이메일 템플릿을 제작해달라는 의뢰가 있었다. 간단한 이미지에 버튼 몇개만 추가하면 되는 기능인데, 문제는 그 복잡도가 점점 증가하면서 원치 않는 부작용이 생기기 시작했다.
특히 position: absolute가 안먹힌다든지, 또는 같은 템플릿을 작성해서 테스트해보면, 네이버에서는 잘 나오는데 Gmail에서는 깨진다든지 등등… 이러한 이슈들이 참 고통스러웠다.
다른회사들의 광고메일을 보면, table을 통해서 직접 다 템플릿을 만들던데, 특이하게 스타벅스 메일광고만 통짜이미지로 보내는 것이였다. 스타벅스의 광고를 보면, 통 이미지 하나에, 여러개의 버튼기능을 구현해 놓았는데, 이 점이 너무 신기해서 코드를 까봤다.
Table을 통해서 이미지를 쌓고, 그 밑에보면 map이라는 태그와 area 태그가 있다.
문서를 보면, 이미지 맵(클릭 가능한 링크 영역)을 정의하기 위해 와 함께 사용한다고 나와있다.
HTML - area 태그는 오직
태그의 속성 중 shaped에는 클릭할 버튼의 모양(ex : 네모 - rect)을 넣어주면 해당 위치에 링크를 만들수 있게 된다. coords에는 영역의 좌표를 지정해줌으로써 좌표값 내에 영역을 만들어 준다.
예시
결론
- 복잡하게 CSS를 쓰는거 보다, 이런식으로 통 이미지 내에서 링크를 만들어서 사용하는것이 서로의 정신건강에 이로울 것 같다.
