-
[CSS] Email에 CSS 적용하기 (inline-email)코딩/CSS 2021. 12. 27. 13:11
최근 어플 프로젝트를 진행함에 있어 인증메일을 보내야해서 작업하며 nodemailer와 관련한 포스팅도 했는데요, 디자이너분께서 인증메일 디자인을 넘겨주셔서 css 작업을 하고 메일을 보냈더니 css가 적용되지 않는 이슈가 발생했습니다. 저는 메일의 html 안에 <style>태그를 사용했는데요, 이 태그는 적용이 안되는 것 같습니다. (email 서비스 마다 다르다고 합니다. 네이버 메일로 열었을 때는 style태그를 무시했습니다.) 다만, 각 html 태그 안에 style="" 속성을 적용시키면 작동합니다.
이와 같은 상황에 사용할 수 있는 npm 패키지가 있습니다! 바로 inline-email이라는 패키지인데요, 아래는 해당 패키지 페이지입니다.
https://www.npmjs.com/package/inline-email
inline-email
CLI for Merging HTML and CSS to inline for emails. Supports Inky Templates.
www.npmjs.com
위 페이지에 자세히 설명이 나와있지만 요약해보겠습니다.
- 먼저, 패키지를 설치해주세요. ($npm install -g inline-email)
- 해당 폴더로 가서 inline-email 코드를 실행해주세요. ($inline-email 바꿀파일.html --out 저장할파일.html)