gmail용 email html 개발하기 | iueditor
TRANSCRIPT
![Page 1: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/1.jpg)
HTML 로 E-Mail 보내기JDLab, IUEditor Team
Lead Programmer, “S”
![Page 2: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/2.jpg)
“ 이메일을 보낼 때 HTML 을 사용하는 이유 ?”
![Page 3: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/3.jpg)
받고 싶은 이메일은 어느 쪽입니까 ?
VS
![Page 4: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/4.jpg)
– Download : http://static.iueditor.org/email/sample/email_sample.zip
- 추후 Templates 에 업로드 될 예정 !
“IUEditor E-Mail HTML 무료 템플릿”
![Page 5: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/5.jpg)
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)
![Page 6: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/6.jpg)
GMAIL 용 HTML• 메일용 HTML 은 웹 클라이언트 (Mac / Windows
Outlook / Naver 웹 / GMail 웹 ) 마다 보이는 것이 다릅니다 .
• 브라우져 파편화보다 더 심각• 그중에 Gmail 이 가장 심각 (CSS 태그를 마음대로 지웁니다 )
![Page 7: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/7.jpg)
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 동작하지 않음
![Page 8: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/8.jpg)
E-Mail HTML 만들기 (2/2)1. position 은 relative 로 고정2. Image 는 URL 로 입력3. Link 는 URL 로 입력
12
3
![Page 9: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/9.jpg)
IUEditor• Commercial License 에 한하여 Email HTML 제작 가능• Compiler 를 Email 로 선택해주세요
![Page 10: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/10.jpg)
웹 개발을 세 배 빠르게 해주는 IUEditor 는 전세계에서 사용되고
있습니다 .
![Page 11: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/11.jpg)
광고 하나 넣고
• IUEditor 2.0
• 그냥 쓰세요 . www.iueditor.org
• 용도 : 웹 사이트 개발 (Django/Angular/HTML) 이메일용 웹 개발 편집 / TV GUI 개발
![Page 12: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/12.jpg)
HTML 로 E-Mail Test (1/2)
IUEditor1. E-mail 컴파일러 선택2. Build
• PutsMail • HTML E-mail test 가 가능한 사이트• https://putsmail.com/tests/new
12
![Page 13: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/13.jpg)
HTML 로 E-Mail Test (2/2)
• html 내용을 전부 copy 해서 Body 에 넣은 후 • sample 파일에서 index.html 파일 복사
• [Send Email] 버튼
![Page 14: Gmail용 Email HTML 개발하기 | IUEditor](https://reader038.vdocuments.site/reader038/viewer/2022102612/58ef7aed1a28ab3a6a8b457d/html5/thumbnails/14.jpg)
E-Mail 확인 !
끝 ! 참 쉽죠 ?IUEditor 로 마음껏 E-mail 을 만들어 보세요