gmail용 email html 개발하기 | iueditor
TRANSCRIPT
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 을 만들어 보세요