간혹 이메일 코딩을 하게 됩니다.
하지만 이 이메일폼 퍼블리싱의 경우 몇가지(꽤나..) 제약 사항들이 있습니다. ㅠㅠ
해당 사항들을 지키지 않으면 저처럼 수십번 테스트 메일을 보내다가
멘붕에 빠지게 될수 있어요.
그래서, 메일폼 퍼블리싱 할때 꼭! 알아야 할 유의 사항 3가지로 정리해 봤습니다.
1. 테이블로 코딩
아웃룩에선 div 사용이 안됩니다.
테이블을 중첩해서 사용해줘야 해요.
아래처럼 초기화 후 작업 합니다.
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> </table>
2. 여백은 패딩으로
여백을 주기 위해 마진과 패딩을 사용하지만, 메일폼에서는 패딩만 하용합니다..
(네이버 메일은 마진이 사용되긴 하는데, 아웃룩안 안돼요.. 😭)
<padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left:5px;>
*단축속성(padding: 10px 10px 8px 5px;) 보다는 풀어서 써주는게 확실해요.
3.스타일링은 인라인으로
td에 스타일링을 해줍니다. ( tr태그는 감싸는 역할입니다).
<td style="font-size: 22px; color:#555; text-align:center"></td>
이메일 리더기 마다 허용하는 css가 다 다릅니다.
지메일 : 웹폰트, flexbox, cssgrid, transform, position 제한
삼성 : line-height, font-size 제한
등등...
샘플 html
<!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>이메일 템플릿</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table border="1" height="500" cellpadding="0" cellspacing="0" width="650px" style="background: #f4f4f4;">
<tr>
<td style="padding-left:25px; padding-right:25px;">
<table border="1" height="400" cellpadding="0" cellspacing="0" width="600" style="background: #d8f0d8;">
<tr>
<td style="font-size: 22px; color:#555; text-align:center">
테이블 중첩 해서 사용합니다.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>*확실한 방법
이미지를 잘라서, 테이블에 맞게 넣어서
링크를 걸어 줍니다..ㅋㅋ ^^; 이미지로 잘라서 넣어요..
참고
'퍼블리싱' 카테고리의 다른 글
| [JS 활용]버튼을 누르면 보이기/감추기. 토글 함수를 사용 (0) | 2020.12.13 |
|---|---|
| [JS 활용]이미지 맵 클릭시 새창 팝업 띄우기 (0) | 2020.12.11 |
| [JS 활용]티스토리 카테고리 별로 갤러리형/리스트형 목록 다르게 출력 (0) | 2020.07.24 |
| css background (0) | 2020.06.18 |
| SVG <라인> (0) | 2020.05.07 |
댓글