각 메일러의 CSS 대응 상황

CSS Support Guide for Email Clients | Campaign Monitor
htps //w w. ㅇㅇㅎㅎㅎㅎㅎ r. 이 m/cs/

oulook에 있어서는 height가 효과가 없다, margin도 요소에 따라서는 효과가 없다, 의사 요소나 position, float등도 물론 사용할 수 없다, 라고 하는 상황이므로, 테이블 코딩에서의 (경우에 따라서는 spacer를 사용하거나) 레이아웃 조정 필요

제약이 많다는 것을 미리 디렉터 씨, 디자이너 씨에게 알 필요가 있습니다

표시 확인은 litmus.com을 활용

Litmus: Email Marketing, Email Design & Email Testing Tools
h tps : // ぃt む s. 코m/
여기에서 다양한 메일러에서의 표시를 에뮬레이트할 수 있다. (무료 체험 기간은 7일간)


또한 코딩을 시작하기 전에 이 사이트를 참고하여
작업 대상이 되는 메일러를 짜내는 것이 좋다.

코딩 포인트

기본은 안전을 기하기 위해, table 코딩

CSS는 인라인으로 쓰지 않으면 읽을 수 없는 메일러가 많다.

실제 인라인은 gulp로 자동화됩니다

미디어 쿼리는 html 안의 style 태그 안에!important 로 기술

다른 스타일은 인라인으로 작성되었기 때문에

h tps : // ぃt む s. 코m/ 에서 표시 확인하면서 작업을 진행

Gulp 작업

import gulp from 'gulp';
import plumber from 'gulp-plumber';
import stylus from 'gulp-stylus';
import pug from 'gulp-pug';
import inlineCss from 'gulp-inline-css';
import runSequence from 'run-sequence';
import browserSync from 'browser-sync';
import rename from 'gulp-rename';
import autoprefixer from "autoprefixer";
import postcss from "gulp-postcss";
import paths from '../config';

gulp.task('server', () => {
    browserSync({
        server: {
            baseDir: paths.dist_dir,
        },
        open: 'external',
        online: true
    })
});

gulp.task('pug', () => {
    return gulp.src(paths.pug_src)
    .pipe(plumber())
    .pipe(pug({
        pretty: true
    }))
    .pipe(gulp.dest(paths.pug_dist));
});

gulp.task('stylus', () => {
    return gulp.src(paths.stylus_src)
    .pipe(plumber())
    .pipe(stylus({
            'include css': true
        }
    ))
    .pipe(postcss([
        autoprefixer({
            remove: false,
            "browsers": ["last 4 versions"]
        })
    ]))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(rename({
        basename: 'style',
    }))
    .pipe(gulp.dest(paths.pug_dist));
});

gulp.task('inlineCss', () => {
    return gulp.src(paths.html_src)
    .pipe(plumber())
    .pipe(inlineCss())
    .pipe(gulp.dest(paths.html_dist))
    .pipe(browserSync.stream());
});

gulp.task('htmlMailBuild', () => {
    runSequence(['pug', 'stylus', 'inlineCss']);
});

gulp.task('default', ['htmlMailBuild', 'server'], () => {
    gulp.watch(paths.pug_src, ['htmlMailBuild']);
    gulp.watch(paths.stylus_src, ['htmlMailBuild']);
    gulp.watch(paths.img, ['imagecopy']);
});