HTML은 <table> 태그로 마크업할 것
네이버, 다음, 구글 등 이메일 클라이언트들은 각각 다른 이메일 렌더링 버전을 가지고 있다.
보안상의 이유로 일부 코드를 막아두거나 쓸 수 있는 태그와 속성, css 속성에 제한을 두고 있으며, 그로 인해 작성한 코드가 적용되지 않는 경우도 있다. 또한 기존 자주 사용하는 <div> 태그로 웹표준 방식의 마크업을 하게 되면 구조가 틀어지게 된다.
그러므로 대부분의 이메일 클라이언트에서 잘 나오는 <table>태그가 크로스 브라우징에도 적합하다.
CSS는 인라인 스타일로 작성할 것
css를 정의하는 방법은 아래와 같이 3가지가 있다.
외부문서 작성(Linked Style)
문서내부 작성(Embedded Style)
태그에 직접 지정(Inline Style)
이메일 클라이언트는 보안상의 이유로 <head>나 <style> 태그를 막아버리기 때문에 메일 폼을 마크업할 때는 인라인 스타일로 작성해야 하며, 이러한 이유로 미디어쿼리는 사용할 수 없다.
* css를 인라인 스타일로 바꿔주는 툴
메일 폼 작성 시 처음부터 인라인으로 css를 작성하고 추후 수정하는 것은 매우 번거로운 일이다.
템플릿 전체 마크업이 완성된 후 css를 HTML 내부에 <style>로 정의한 후, css를 인라인 스타일로 병합해주면 된다.
아래의 툴은 참고용이므로 css를 인라인 스타일로 변경해주는 툴은 많으니 검색을 통해 본인에게 잘 맞는 툴을 선택하기 바란다.
https://templates.mailchimp.com/resources/inline-css/
CSS Inliner Tool | Email Design Reference
©2001-2021 All Rights Reserved. Mailchimp® is a registered trademark of The Rocket Science Group.
templates.mailchimp.com
Margin, Float 속성을 사용하지 말 것
메일 폼 마크업 시 <table><tr><td>외 다른 코드의 사용을 최소화하고 margin이나 float같은 값은 적용안되는 경우가 있으므로 사용하지 않는 것을 권장한다.
'개념 정리' 카테고리의 다른 글
| terminal 명령어 모음 (0) | 2022.01.25 |
|---|---|
| git 명령어 모음 (0) | 2022.01.21 |
| <wbr> vs <br> (0) | 2022.01.18 |
| polyfill(폴리필)이란? (0) | 2022.01.13 |
| [MAC] 사용 중인 포트 찾아서, Kill (0) | 2022.01.11 |