[npm]이메일 템플릿 제작을 위한 inline-css 사용법

이메일 템플릿을 제작하기위해 주의해야할 점은 

 

 

 

1. css는 인라인으로 작성한다.

 

2. 이미지는 최대한 적게 사용하고 width, height, alt를 꼭 써준다

(이미지를 보여주지 않는 이메일 시스템이 많음)

 

3. <table> <td> <tr> 만을 사용해 레이아웃을 나눈다.

 

(이때 테이블은 다음과 같이 초기화해서 사용한다)

<table border="0" cellpadding="0" cellspacing="0" width="100%"></table>

 

 

4. css보다는 html태그를 먼저 사용한다. (font-weight : bold 대신 <b>태그 사용 등...)

 

5. 축약형 또는 단축형은 사용하지 않는다

   축약형   -   (#fff ===> #ffffff; )

   단축속성   -   (font: 16px / 1.4 Arial; ===> font-size:16px;line-height:1.4; font-family: Arial; )

 

 

 

 

 

https://www.npmjs.com/package/inline-css

 

inline-css

npm을 시작하고

>>npm init

 

필요한 아이들을 설치합니다.

>> npm install --save inline-css

>> npm install --save express

>> npm install --save fs

 

 

index.js 파일을 만들어 아래 코드를 입력합니다.

var express = require('express'); 
var http = require('http'); 
var app = express(); 
var inlineCss = require('inline-css');
var fs = require('fs');

        var html = "";

        // 변환할 파일을 읽어온다. 
        fs.readFile('./email.html' , 'utf8', function(error, data){
            if(error){throw error}
            console.log("sucees!");
            html=data;
            //읽어온 파일의 텍스트를 html 변수에 저장 
        });


        //읽어오는데 시간이 걸리므로 setTimeout 함수 이용 
        setTimeout(function(){

            // <style></styel> 에 있는 css inline으로 적용 
            inlineCss(html, {url: 'www.test.com'})
            .then(function(html) { 
                //변환한 결과를 html 파일로 저장한다.
                fs.writeFile('resultEmail.html',html, function(error, data){
                    if(error){throw error}
                });
            });
        },1000);

 

손쉽게 인라인으로 css를 변환할 수 있습니다. 

옵션설정을 하면 css파일도 함께 적용해 인라인으로 변환할 수 있습니다.