[HTML] 메일 본문에서 HTML 사용하기

#231

1. 메일 본문에서 HTML을 사용하게된 이유

메일에 포스터와 같은 이미지를 삽입해야하는 경우가 있었습니다.

보통의 경우 이미지 첨부 기능을 위해서 첨부만 하면 되지만 포스터의 특정 위치에 링크나 특별한 효과를 넣고 싶었습니다.

나름의 지식을 가지고 수정하겠다하면 싶어 알아보게 되었습니다.

 

2. 메일에서 HTML 지원여부

우선 메일에서 HTML을 지원하는지를 확인하였습니다.

대표적으로 자주 사용하는 두 개의 메일 서비스들이 지원하는지 알아보겠습니다.

 

1) NAVER

네이버의 경우 오른쪽 하단에 잘 보이실지 모르겠지만 HTML이라고 하여 작성된 글을 HTML 편집기를 이용하여 수정할 수 있습니다.

편집기가 잘 동작하는지 테스트로 버튼을 하나 만들어보겠습니다.

HTML 편집기에서 작성이 완료되면 다시 [Editor]를 통하여 다시 메일 본문을 작성하는 편집기로 돌아옵니다.

오! 버튼이 생성된걸 볼 수 있었습니다.

 

네이버의 경우 HTML 편집기를 통하여 쉽게 작성 및 수정할 수 있다는 것을 확인하였습니다.

 

2) GMAIL

GMAIL의 경우 여기저기를 찾아봐도 네이버와 같이 HTML을 편집할 수 있는 편집기는 보이지 않았습니다.

하지만 그렇다고 사용할 수 없는 것은 아닙니다.

 

우리에게는 개발자 도구가 있어 이를 이용하면 편집기가 없더라도 HTML을 작성 및 수정할 수가 있었습니다.

 

정확한 위치를 알기위해 본문에 글을 하나 작성하고 개발자 도구(F12)를 이용하여 메일 본문을 확인해보면 특정 위치에 작성한 메일 본문을 볼 수 있습니다

여기에 네이버 메일의 HTML 편집기와 같이 작성을하면 되는데요.

 

작성이나 수정을 하고 싶다면 F2 버튼을 누르거나 마우스 오른쪽 버튼을 눌러 Edit as HTML을 클릭하시면 됩니다.

그럼 네이버 메일과 마찬가지로 한 번 버튼을 추가해보도록 하겠습니다.

똑같이 코드를 작성하고 메일 본문을 확인해보니 버튼이 생성된 것을 볼 수 있습니다.

 

최종적으로 정리하자면 네이버 메일과 같이 HTML 에디터를 제공할 경우 이용하여 HTML 요소를 추가하거나 수정할 수 있고 GMAIL과 같이 HTML 에디터를 제공하지 않아도 개발자 도구를 이용하여 동일한 작업을 할 수 있습니다.

 

근데 저는 HTML 에디터를 제공하여도 개발자 도구를 이용하여 수정하는 편이 훨씬 편한 것 같습니다.

 

3. 메일에서 HTML의 한계

조금 더 나아가기 위해 메일 본문에 HTML을 작성하고 이런 저런걸 다 해봤지만 일반 HTML 작성하는 것과 다르게 제한되는 부분이 있었습니다.

 

1) HTML만 작성할 수 있고 CSS는 인라인으로만 작성 가능

2) 스크립트는 작성 불가능

3) onclick과 같은 이벤트 실행 불가능

 

아마 보안적인 이슈로 이렇게 제한이 되어있는 것으로 보였습니다.

 

혹시라도 이 부분에 대해 조금 더 잘 아시는 분이 계실 경우 연락주시면 감사하겠습니다.