CSS 인라인
CSS 인라인은 왜 필요한가
메일 클라이언트는 브라우저 탭이 아닙니다. Gmail, Outlook, 네이버·다음 메일, 기업용 솔루션마다 `<link rel="stylesheet">` 를 무시하거나 `<head>` 안 `<style>` 을 잘라내는 경우가 흔합니다. 비교적 안정적인 방법은 필요한 태그의 `style` 속성에 글꼴·색·여백을 직접 쓰는 것입니다. CSS Inliner는 웹에서 하듯 HTML은 구조, CSS는 스타일로 나눠 작업한 뒤, 한 번에 선언을 요소에 옮깁니다. Mailchimp, Stibee(스티비), 자체 발송 시스템에 넣는 파일은 여전히 HTML이지만, 별도 스타일시트 로딩에 의존하지 않습니다. 이 페이지는 발송 직전 마무리용입니다. 왼쪽에서 HTML/CSS 탭으로 편집하거나 .html·.css 두 파일을 가져온 다음 CSS 인라인화를 실행하고, 오른쪽 출력을 확인하세요. 괜찮으면 복사·다운로드하거나 HTML 미리보기로 홈 Playground에서 레이아웃을 눌러 본 뒤 테스트 메일을 내면 됩니다.
외부 CSS와 HTML 안 style, 둘 다 입력으로 받음
많은 온라인 인라이너는 CSS가 이미 HTML 안에 있다고 가정합니다. 보통 디자인 툴에서 나온 `<style>` 만 바꿉니다. 실무에서는 `template.html` 과 `email.css` 가 분리된 채로 빌드·Figma 전달·정적 생성기 결과로 오는 경우가 많아, 매번 손으로 합치거나 연 2번 쓰는 CLI를 깔기도 부담스럽습니다. 이 CSS Inliner는 외부 .css 와 HTML 내 `<style>` 을 같은 수준으로 처리합니다. HTML 탭에 마크업, CSS 탭에 규칙. .html 과 .css 를 한꺼번에 가져올 수도 있습니다. CSS 탭 규칙은 HTML에 남아 있는 `<style>` 과 함께 적용되고, 결과는 요소마다 `style` 속성이 붙은 HTML입니다. 인라인된 `<style>` 태그는 제거됩니다. 대부분 ESP가 기대하는 형태입니다. 뉴스레터든 트랜잭션 메일이든 마찬가지입니다. 버튼·타이포는 공용 CSS에 두고 HTML 조각은 담당자별로 나뉩니다. 앱에서 모듈을 복사하고 디자인 시스템 시트를 더하는 흐름에서, HTML에 박혀 있는 CSS만 읽는 도구로는 막힙니다.
처리는 브라우저 안에서만 이뤄집니다. 계정·업로드 없음. `:hover`, `::before` 처럼 인라인으로 못 쓰는 규칙은 건너뛰고 출력 위 안내에 적습니다. 단순 `@media` 는 펼치려 시도하지만 수신함 반응형은 웹과 다르니, 반드시 실제 클라이언트로 테스트하세요. 여백이나 클래스 누락을 눈으로 보려면 HTML 미리보기로 인라인 결과를 홈 Playground에 보냅니다. ESP에 붙이기 전에 테이블 너비 등을 잡기 좋습니다.
CSS 인라이너 열기HTML + CSS 탭
저장소에서 파일 두 개로 나누듯 편집하고, 발송용이 되면 인라인화합니다.
파일 두 개 한 번에
.html 과 .css 를 동시에 가져와 붙여넣기 누락을 줄입니다.
홈에서 미리보기
인라인 후 새 탭 Playground로 보내 시각 확인 뒤 ESP에 붙입니다.
외부 스타일시트까지 되는 이메일용 CSS 인라인
HTML 안에 이미 있는 <style>만 다루는 도구가 많은데, 여기서는 별도 .css 파일과 마크업 속 style을 한 번에 인라인화합니다. 복사·다운로드·미리보기까지 같은 화면에서.
외부 .css를 그대로 넘길 수 있음
`template.html` 옆에 `email.css` 를 두고 있다면 가져오기나 두 탭 붙여넣기만 하면 됩니다. 선택자에 맞는 선언이 요소 `style` 에 씁니다. 인라이너 때문에 먼저 스타일시트를 HTML에 손합칠 필요가 없습니다. HTML 안 `<style>` 블록도 같은 실행에서 처리해 공용 head + 모듈 body 템플릿도 한 번에 됩니다. 오른쪽은 읽기 전용 전체 출력. 헤더 아이콘으로 복사, 툴바에서 inlined.html 저장, HTML 미리보기로 홈 Playground 이동. 변환은 전부 로컬입니다.
- CSS 전용 탭, 실제 프로젝트 분리 구조
- 외부 CSS + 내장 style 한 번에
- 건너뛴 규칙 안내 표시
- 로컬 처리, 업로드 없음
메일 HTML 템플릿 CSS 인라인 방법
HTML과 CSS 넣기
템플릿은 HTML 탭, 버튼·제목·유틸은 CSS 탭. 또는 .html·.css 동시 가져오기. head에 <style>이 있어도 그대로 인라인 대상입니다.
CSS 인라인화 실행
맞는 스타일이 style 속성에 반영됩니다. 안내에서 건너뛴 항목을 확인하세요. 왼쪽은 계속 수정, 오른쪽에서 결과를 보며 다시 실행할 수 있습니다.
확인 후 발송
복사·저장하거나 미리보기로 홈 Playground 확인. ESP에 붙인 뒤 Gmail·Outlook 등으로 테스트하고, 통과한 .html 을 보관하세요.
CSS 인라인 FAQ
다음 발송, 인라인은 끝냈나요?
HTML 붙이고 외부·내장 CSS 더한 뒤 인라인화. 테스트 수신과 비교해 저장·복사하세요.
CSS 인라인
- 외부 .css와 HTML 동시 처리
- HTML 내 <style>도 함께 인라인
- 홈 Playground 미리보기
- No signup; use the tool in the browser
인라인 후 실제 테스트 메일을 보내세요. 미리보기만으로는 부족합니다.
ESP용 HTML 한 벌
한 번 인라인화해 캠페인에 붙이고 승인본을 보관.