이메일에 html 적용하기

이메일에 html 적용하기

이메일은 기본 텍스트를 입력하는 것을 기반으로 만들어졌기 때문에 이메일 서비스 업체에 따라 html이 제대로 작동하지 않는 경우가 많으며, CSS 또한 사용이 불가능하다.

그 때문에 굳이 이메일에 디자인을 입혀주려면 90년대처럼 테이블로 레이아웃을 잡아줘야 하며, CSS는 인라인으로 태그마다 일일히 때려박아서 만들어야 한다.

1. 테이블로 레이아웃 잡기

1) cell 경계선 여백 없애주기

cellspacing="0" cellpadding="0"이나 style="border-collapse:collapse;" 사용

2) cell 패딩 여백 없애주기

td style="padding:0;"

3) vertical-align 여백 없애주기

valign="top" 이나 style="vertical-align:top;" 으로 여백 없애기

4) line-height

메일업체마다 텍스트 간격 다름. 폰트 크기에 2~3px 더한 만큼 line-height 값 주어줌.

5) background

background="" 이렇게 입력. (style="background: " 안먹는 곳 많음) 아웃룩은 background 지원 안함.

2. CSS를 html에 인라인으로 때려박기

이미 만들어진 css와 html을 합치는 사이트는 다음과 같다.

1) inline styler

https://inlinestyler.torchbox.com/styler/

2) emogrifier

https://www.myintervals.com/emogrifier.php

3. 중앙정렬

중앙정렬을 위해서는 가장 바깥 태그에 <div align="center"> 이렇게 감싸주자.

4. 폰트

메일 서비스 업체마다 기본 폰트가 달라 반드시 style="font-family:Nanum;" 이렇게 넣어줘야 함.