신규 세팅 시 주의사항!
1. 아래 태그로 시작!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
2. css를 inline 으로 작성! (로드하지말고 태그에 작성)
※ Tip
body에 margin, padding: 0으로 설정
body 태그의 스타일은 어차피 적용되지 않기 때문에 이렇게 하면 이메일에서 진짜 body 태그처럼 동작함!
만약, 이메일의 body에 배경색을 입히고 싶다? -> 아래 테이블에 관련 코드 작성!
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</body>
Tip: 모든 테이블 속성에 border="1"을 작성하고 작업!
작업을 진행하면서 레이아웃 윤곽을 알 수 있음!
마지막에 치환 기능으로 이 속성 삭제!
여기서 테이블 너비를 최대 600px 안으로 설정하는게 좋음! (이메일의 가장 안전한 최대 너비)
border-collapse 값을 collapse로 지정하는 인라인 스타일 속성도 추가!
추가하지 않으면 border와 테이블 사이에 미세한 공간이 생김!
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td>
Hello!
</td>
</tr>
</table>
※ padding을 사용할 땐 아래 코드처럼 항상 모든 값을 명시해줘야 함!
<div style="padding: 10px, 10px, 8px, 5px;"></div>이래도 오류가 생긴다?
그럼 더 길게 작성!
<div style="padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left:5px;"></div>
만약 padding으로 다른 문제가 발생(ex. 전송 플랫폼에서 css를 제거)하면 사용하지 말기!
이럴 땐, 아래 코드처럼 공간 만들어주기!
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>해당 태그에 style="line-height: 0; font-size: 0;", 세팅 후 원하는 빈 공간의 높이, 너비 값 지정!
꾸르팁~
P 태그나 DIV가 아닌 TD 태그에 padding을 사용하면 안전!!
P 태그와 DIV의 경우에는 예상을 넘어 더 크게 보입니다.
공간을 메울 용도로 GIF 만들기는 노노!
작성 진행 중~~
혹시 모르니까 개발자도구로 검수 하면 css 나오니까
css 중복 및 사라짐 체크!
참조: webdesign.tutsplus.com/ko/articles/build-an-html-email-template-from-scratch--webdesign-12770
HTML 이메일 템플릿 처음부터 제작하기
모든 과정을 이해하는 최고의 방법은 처음부터 끝까지 직접 제작해보는 것입니다. 오늘은 HTML 이메일 템플릿을 처음부터 구축하면서 이메일 디자인에 그 방법을 실행해 보도록 하죠. 시작 시작
webdesign.tutsplus.com
'Dev > Temp' 카테고리의 다른 글
| KB국민카드 (0) | 2021.08.02 |
|---|---|
| 잔여백신 신청 함수화 (0) | 2021.07.20 |
| 세이브존 스크레치, 룰렛 이벤트 (0) | 2021.02.23 |
| reset.css (0) | 2020.12.15 |
| 파라미터를 사용 해보자 (2) | 2020.11.30 |