👻 etc.
✏ 뉴스레터 코딩할 때 주의사항
유림(예또누나)
2024. 2. 22. 17:41
✔ max width : 800px로 작업. 꼭 그래야하는건 아니지만 너무 크면 안되니까..
✔ 영역을 table로 짜야만 메일서버에서 접근할 수 있고 원활한 UI가 그려지게 됨.
✔ css 자체는 외부 css를 쓰면 메일서버가 걸러냄. inline 스타일로 html 자체에다가 코드를 넣어야함
ex) <td style="max-width: 800px;" align="center">
✔ 반드시 상대경로가 아닌 절대경로를 넣어야 함. 풀 도메인을 넣을 것. 안그러면 엑박이 기다린다....
|
1
2
3
4
5
6
7
8
9
10
|
<body>
<table border="0" style="border-spacing: 0; border-collapse: collapse; font-size: 0;">
<tr>
<td style="padding: 0;"><img src"https://drive.google.com/file/d/1VZdR7yhcQ3stV1bjxJYiblgxQbe9-lh5/view?usp=sharing">
</tr>
<tr>
<td style="padding: 0;"><a href="https://drive.google.com/file/d/1VZdR7yhcQ3stV1bjxJYiblgxQbe9-lh5/view?usp=sharing" target="_blank"><img src="https://drive.google.com/file/d/1VZdR7yhcQ3stV1bjxJYiblgxQbe9-lh5/view?usp=sharing" alt=""></a>
</tr>
</table>
</body>
|
cs |
✔ 들어가는 코드는 table, tr, td, img, a 밖에 없음 그 외에는 메일서버가 다 걸러내므로 다른 코드는 필요없다
✔ table 코드는 표를 만드는 코드이기 때문에 뉴스레터를 만들 때 'border-spacing', 'border-collapse', 'font-size' 신경써주자
💡 border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정한다.
💡 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다.