email 튜토리얼
이메일 시작하기
수색…
비고
HTML 전자 메일은 HTML, CSS의 하위 집합을 사용하여 색상, 그래픽, 테이블 열 및 링크를 사용하여 전자 메일 메시지를 웹 페이지처럼 형식화합니다.
유용한 링크:
HTML과 일반 텍스트
HTML 전자 메일은 HTML, CSS의 하위 집합을 사용하여 색상, 그래픽, 테이블 열 및 링크를 사용하여 전자 메일 메시지를 웹 페이지처럼 형식화합니다.
전자 메일을 보낼 때는 일반 텍스트와 HTML을 모두 보내야합니다. 전자 메일을 여러 부분으로 구성된 MIME으로 보내이 작업을 수행 할 수 있습니다. 대부분의 이메일 서비스 제공 업체는 자동으로 MIME을 구성 할 수있는 도구를 제공합니다. 일부는 HTML 버전을 기반으로 일반 텍스트 버전을 생성하며 타사 도구 도 있습니다.
텍스트 전용 이메일의 예 :
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Apple Watch의 최근 출시와 함께 새로운 MIME 부분 인 text/watch-html 이 등장했습니다. 이 콘텐츠는 Apple Watch (및이 MIME 유형을 지원하는 다른 모든 클라이언트)에서만 표시됩니다.
이메일 클라이언트 및 렌더링 엔진
이메일 클라이언트는 다른 렌더링 엔진을 사용하여 HTML 이메일을 렌더링합니다.
- Apple Mail, Mac 용 Outlook, Android Mail 및 iOS Mail은 WebKit을 사용합니다.
- Outlook 2000/02/03은 Internet Explorer 6을 사용합니다.
- Outlook 2007/10/13은 Microsoft Word를 사용합니다.
- 웹 클라이언트는 브라우저의 해당 엔진을 사용합니다 (예 : Safari는 WebKit, Chrome은 Blink 사용)
일부 고객은 자신의 스타일을 자신의 스타일 위에 추가합니다. 예 : Gmail은 모든 <td> 글꼴을 font-family: arial,sans-serif; 이는 이메일 렌더링 방식에 영향을 줄 수 있습니다.
2016 년 이전에는 모든 Gmail 제품에서 <link> 태그, <style> 태그 안에있는 모든 CSS 및 인라인되지 않은 다른 CSS가 삭제되었습니다. 2016 년 말에 Gmail은 대부분의 제품에서 <style> 태그 및 미디어 쿼리를 지원하기 시작했습니다. 2016 년 11 월 23 일 현재의 업데이트입니다 .
기본 사항 (표 및 인라인 CSS)
레이아웃 용 테이블
HTML 이메일 파일의 구조는 웹 페이지의 구조와 비슷합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
그러나 <div> 기반 CSS 레이아웃은 웹 에서처럼 이메일에서 작동하지 않습니다. 주요 이메일 클라이언트는 수레 (float)와 플렉스 박스 (flexbox)와 같은 것을 지원하지 않거나 다른 방식으로 그것을 조종한다. <div> 에는 다른 고객, 특히 Outlook에서 위치 및 상자 모델 문제가 있습니다. <div> 만 사용하여 이메일을 코딩하는 몇 가지 기술 이 있지만 레이아웃 용 테이블을 사용하는 것이 더 안전합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
인라인 CSS
스타일을 인라인으로 적용하면 웹 메일 클라이언트 스타일과 같은 스타일보다 우선 순위가 높아지며 머리글 또는 외부 CSS 파일에서 CSS를 제거하는 전자 메일 클라이언트가 작동합니다. 인라인 CSS는 모든 이메일 클라이언트에서 일관된 표시를 보장하는 가장 좋은 방법입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
CSS 인라이닝을위한 몇 가지 옵션이 있습니다.
- 이동 중에 CSS 인라인을 작성하십시오.
- 에디터에서 로컬 스 니펫 사용
- 웹 기반 CSS의 inliner를 사용하여 이와 같은
- 이와 같은 프로그래밍 방식의 CSS 인라이너를 사용하십시오.
- 이 같은 빌드 프로세스 또는 템플릿 언어 사용
- 전자 메일 서비스 공급자가 사용자를 위해 인라인을 처리하도록하십시오 (지원하는 경우).
모든 전자 메일 클라이언트에 대한 전자 메일 코딩
사용 된 코딩 방법 : Hybrid / Spongy
div에서 이메일에 사용할 수 없다는 것은 영원한 신화입니다. div를 올바르게 렌더링 할 수있는 전자 메일 클라이언트가 있습니다 (Outlook과 달리). 아래 예는 Gmail 앱 (업데이트가 아직 출시되지 않은 상태), 삼성 기기 및 미디어 쿼리를 읽지 않는 다른 이메일 클라이언트에서 작동하는 이메일을 코딩하는 방법을 보여줍니다.
Outlook 조건문 소개
Outlook 조건문은 전자 메일을 렌더링하거나 Outlook의 후퇴와 같은 특정 항목을 표시 할 때 매우 유용합니다.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
위의 코드 는 Microsoft Outlook 9 또는 IE보다 큰 경우를 읽습니다.
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
조건문에 대한 버전이 나열되었습니다.
하이브리드 전자 메일 템플릿 시작
각 단계는 기본 HTML 지식을 가진 사람이 쉽게 이해할 수있는 방식으로 설명되었습니다.
먼저 화면 전체와 컨테이너 클래스로 확장되는 래퍼 테이블로 시작합니다.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
그 다음에는 최대 너비는 읽지 않지만 헤더의 CSS는 읽는 전자 메일 클라이언트에 대한 미디어 쿼리를 추가합니다. 미디어 쿼리는 모든 화면을 대상으로하며 700 픽셀 너비로 컨테이너를 표시합니다.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
다음으로 클래스 컨테이너가있는 테이블을 너비가 700 픽셀로 유지하는 전망 조건문을 추가합니다.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
위의 코드는 이제 너의 템플릿을 700px 너비의 Outlook에 보관해야합니다.
자. 아래 코드는 두 개의 동일한 열을 모두 350px 너비의 템플릿에 만듭니다.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
이 후에는 한계가 당신의 상상력이나 디자이너 일뿐입니다. 설계가 완료되면 와이어 프레임 스테이지에 참여하는 것이 중요하므로 설계가 코딩 단계에 들어가면 아무런 이점도 없습니다.
노트 :
- 망막 이미지는 스타일이 아닌 요소 레벨에서 설정된 이미지가 필요합니다. <img src = ""width = ""...
- 인라인 CSS를 선택하거나 모든 클라이언트가 CSS를 머리에 지원하는 경우 에만 CSS를 머리로 선택할 수 있습니다.
