노드로 메일발송 api를 구현했다.
근데 퍼블리셔한테 받은 코드를 그대로 보내니까 안 되는 거 있지~~
그래서 찾아봄.
🚨 NodeMailer로 HTML 메일 발송 시 CSS가 깨지는 문제 해결 🚨
NodeMailer를 사용해서 HTML 메일을 보낼 때, 일부 이메일 클라이언트(Gmail, Outlook 등)에서 CSS가 깨지는 문제가 발생할 수 있다. 이런 문제는 보통 외부 CSS가 적용되지 않거나, 일부 스타일이 무시되는 것 때문.
✅ 해결 방법 2가지
1️⃣ @import 대신 인라인 스타일 사용
이메일 클라이언트들은 @import 또는 <link> 태그를 통한 외부 CSS 적용을 차단하는 경우가 많아.
👉 해결 방법: 모든 CSS를 <style> 태그 대신 인라인 스타일로 변환하기.
❌ 잘못된 예시 (@import 사용, 일부 메일 클라이언트에서 적용 안 됨)
<style> @import url("https://cdn.jsdelivr.net/npm/some-font.css"); .button { background: blue; color: white; padding: 10px; } </style>✅ 올바른 예시 (인라인 스타일 적용)
<table style="width: 100%; border-collapse: collapse;"> <tr> <td style="background: blue; color: white; padding: 10px; text-align: center;"> 버튼 텍스트 </td> </tr> </table>✔ 이렇게 하면 대부분의 이메일 클라이언트에서 스타일이 깨지지 않음!
2️⃣ <style> 태그는 <head> 안이 아니라 <body> 안에 넣기
- 일부 이메일 클라이언트(특히 Gmail)는 <head> 안의 <style> 태그를 무시함.
- 👉 CSS를 <body> 내부에 추가하면 적용될 가능성이 높아짐.
✅ 올바른 코드
<body> <style> .title { font-size: 20px; font-weight: bold; color: red; } </style> <p class="title">이메일 제목</p> </body>
✔ 이렇게 하면 Gmail에서도 CSS가 정상 적용됨.
이제 되겠지?????????
큰일났다. 테이블이 깨져버린다.
<수정 전>
<div class="table" >
<div class="tr">
<div class="th">성명</div>
<div class="td">홍길동</div>
</div>
</div>
이런 코드였는데 ....
<수정 후>
<tr>
<td>
<table width="100%" style="border-collapse: collapse;">
<tr>
<td style="padding: 13px 10px; font-weight: 500; color: #1F1F1F; width: 130px;border-bottom: 1px solid #eee;">성명</td>
<td style="padding: 13px 10px; font-weight: 500; color: rgb(132, 132, 132);border-bottom: 1px solid #eee;">홍길동</td>
</tr>
</table>
</td>
</tr>
<div class="table" > 이게 안 먹는 거 같아서
아예 <table> 을 사용하면 된다고 피티샘께서 알려주심.
클래스도 안먹힌다니
완성!
'삼분공부 > node.js' 카테고리의 다른 글
| [Node.js] Node.js에서 node-schedule로 작업 예약 (1) | 2025.04.10 |
|---|