HTML 로 E-Mail 보내기JDLab, IUEditor Team

Lead Programmer, “S”

“ 이메일을 보낼 때 HTML 을 사용하는 이유 ?”

받고 싶은 이메일은 어느 쪽입니까 ?

VS

– Download : http://static.iueditor.org/email/sample/email_sample.zip

- 추후 Templates 에 업로드 될 예정 !

“IUEditor E-Mail HTML 무료 템플릿”

HTML E-mail 제약 사항• Javascript 사용 불가 == > 어떤 자바스크립트도 동작을 보장 못함

• IUEditor 내 animation 이 들어간 위젯 사용 불가• Webfont 사용 불가 ==> 예쁜 폰트 못써요• 외부 style 사용 불가 <link rel=“stylesheet”

href=“external.css”>

• style tag : <style></style>

• Gmail 에서 동작안함• Inline style 을 사용할 것 (Automatically generated by

IUEditor)

GMAIL 용 HTML• 메일용 HTML 은 웹 클라이언트 (Mac / Windows

Outlook / Naver 웹 / GMail 웹 ) 마다 보이는 것이 다릅니다 .

• 브라우져 파편화보다 더 심각• 그중에 Gmail 이 가장 심각 (CSS 태그를 마음대로 지웁니다 )

E-Mail HTML 만들기 (1/2)- Gmail 에서 동작하지 않는 CSS

• position : absolute 의 경우 동작하지 않음• top, left, bottom, right 동작하지 않음• margin-top/left/bottom/right 를 사용

• negative value 는 동작하지 않음• width / height 는 min-width, min-height 로 각각 변경됨

• height 는 % 가 동작하지 않음 ( internal-link 의 경우 100% height 가 안됨 ->0 으로 동작 )

• background-image 는 동작• background-position, background-size 동작하지 않음

E-Mail HTML 만들기 (2/2)1. position 은 relative 로 고정2. Image 는 URL 로 입력3. Link 는 URL 로 입력

12

3

IUEditor• Commercial License 에 한하여 Email HTML 제작 가능• Compiler 를 Email 로 선택해주세요

웹 개발을 세 배 빠르게 해주는 IUEditor 는 전세계에서 사용되고

있습니다 .

광고 하나 넣고

• IUEditor 2.0

• 그냥 쓰세요 . www.iueditor.org

• 용도 : 웹 사이트 개발 (Django/Angular/HTML) 이메일용 웹 개발 편집 / TV GUI 개발

HTML 로 E-Mail Test (1/2)

IUEditor1. E-mail 컴파일러 선택2. Build

• PutsMail • HTML E-mail test 가 가능한 사이트• https://putsmail.com/tests/new

12

HTML 로 E-Mail Test (2/2)

• html 내용을 전부 copy 해서 Body 에 넣은 후 • sample 파일에서 index.html 파일 복사

• [Send Email] 버튼

E-Mail 확인 !

끝 ! 참 쉽죠 ?IUEditor 로 마음껏 E-mail 을 만들어 보세요