WARNING 정말 번거롭고 번거롭고 번거로움
시작 전 알아야 할 것
일반 웹사이트 코딩을 위한 HTML, CSS를 생각하면 절.대. 안되요...옛날 HTML (XHTML)으로 코딩해야 된다고 합니다. 그래서 <hea>안에 들어갈게 많아요!
JavaScript는 사용하지 않아서 어떻게 동작할지 모르겠네요.🤔
.
.
.
그럼 지금부터 설명 시작!!!
.
.
1
내부 CSS / 인라인 CSS 둘 다 작성해야 됩니다
이메일 플랫폼에 따라서 어떤곳(Gmail)은 인라인 CSS를
또 어떤곳(네이버/다음)은 내부 CSS를 삭제해서 둘 다 작성해야 안전해요! 안그럼 어디선가 깨집니다😭
참고로 내부 CSS는 html 안에서 <style></style>로 작성하고 인라인 CSS는 <p style=“color: red”></p> 이렇게 태그에 같이 작성됩니다.
.
.
2
어떤 CSS 속성은 적용되지 않아요
아무래도 XHML로 작성되야 하니 최신 CSS 속성들은 적용되지 않는것 같아요.
이것도 이메일 플랫폼에 따라 또 다른 것 같긴한데 저 같은 경우는 Gmail에서 align-self / justify-content가 적용되지 않아서 다른 속성으로 다시 작업했습니다.
.
.
3
Table 태그로 작업해야 됩니다
이것도 <div>를 지원하지 않는 이메일 플랫폼 태그 등을 지원하지 않아요.
<ul> 같은 다른 태그는 잘 모르겠네요.
그리고 Table태그가 margin도 안 먹고 좀 까다롭잖아요? 그래서 저는 <table> 안에 <div>를 추가하는 등의 방법으로 작업을 하기도 했습니다.
.
.
4
작업하면서 발견한 특이사항
네이버 이메일 플랫폼은 <span class=“optimized”></span>로 내가 만들어 놓은 태그를 자꾸 감싸서 제가 적은 font-size가 적용되지 않아서 <style></style> 안에 .optimized {font-size: inherit !important}를 추가로 넣어줬어요.
정말 웃긴게 네이버는 내부 CSS 적용하면 삭제하면서 왜 이거는..?🤦♀️
.
.
5
반응형 작업에 필수! Media Queries
일반적인 코딩과 동일하게 <style>안에 media queries를 설정하고 코드를 작성하는데, 모든 속성에 !important를 넣어줘야 인라인CSS 속성이 바뀌어요!
조금 어이가 없었던 점은 <style> 지울꺼면서 그 안에있는 media queries는 왜 되는거야..?
