빠른 참조

Premailer 치트시트

HTML 이메일용 CSS 인라이너 Premailer 빠른 참조 가이드: 커스텀 CSS 속성, CLI 명령어, Ruby API.

· 게시일

Premailer는 모든 이메일 클라이언트에서 일관된 렌더링을 보장하기 위해 CSS 스타일을 HTML 이메일 템플릿에 인라인으로 삽입합니다.

커스텀 속성 확장

Premailer는 HTML 테이블 속성을 제어하기 위한 특수 -premailer- CSS 속성을 지원합니다:

table, th, td {
  /* table 및 cell 태그에 width 속성 설정 */
  -premailer-width: 600px;
}

table, tr, th, td {
  /* 요소에 height 속성 설정 */
  -premailer-height: 50px;
}

table {
  /* table 태그에 HTML 속성 설정 */
  -premailer-cellpadding: 0;
  -premailer-cellspacing: 0;
  -premailer-border: 0;
}

CLI 사용법

# 입력 HTML 파일을 인라인 처리하여 출력
premailer input.html > output.html

# 원격 HTML 템플릿 가져오기 및 처리
premailer https://example.com/newsletter.html > inlined.html

Ruby API

require 'premailer'

premailer = Premailer.new('email.html', warn_level: Premailer::Warnings::SAFE)

# 인라인 처리된 HTML 출력
File.open("output.html", "w") do |file|
  file.puts premailer.to_inline_css
end

# 일반 텍스트 대체 버전 출력
File.open("output.txt", "w") do |file|
  file.puts premailer.to_plain_text
end

관련 주제