메일의 CSS를 인라인으로 바꾸기
Outlook과 여러 웹메일은 <style> 블록을 무시하거나 제거합니다. 인라인화는 브라우저에서는 잘 보이던 디자인을 받은편지함에서도 그대로 보이게 만드는, 지루하지만 기계적인 작업입니다.
- 브라우저 안에서 전부 처리됩니다
- 오프라인에서도 작동합니다
- 업로드 없음
- 가입 없음
- 워터마크 없음
도구를 불러오는 중…
작동 방식
- <style> 블록이 포함된 HTML을 붙여넣으세요.
- “Inline the CSS”(CSS 인라인화)를 누르세요.
- 결과를 복사하거나 다운로드하고, 아래 미리 보기에서 확인하세요.
왜 아무것도 업로드되지 않는가
이 페이지가 하는 모든 작업은 브라우저 탭 안에서 도는 코드가 처리합니다. 웹 페이지를 그리는 그 엔진을 그대로 씁니다. 파일은 디스크에서 탭의 메모리로 읽어 들여 거기서 변환한 뒤 다시 다운로드 파일로 내보냅니다. 어디로도 전송되지 않습니다. 우리에게도, 제3자에게도.
직접 확인해 보세요
- 브라우저 개발자 도구(F12)를 열고 네트워크(Network) 탭을 선택합니다.
- 파일을 올리고 도구를 실행합니다.
- 보이는 요청은 도구 자체의 코드를 받아 오는 것뿐입니다. 무거운 몇몇 도구는 공개 CDN에서 오픈소스 엔진을 함께 받아 옵니다. 여기에 loreatec.jp로 가는 작은 방문 집계 신호 하나(페이지 주소와 제목, 그 이상은 없습니다)가 더해집니다. 어느 것도 당신의 파일을 실어 나르지 않습니다.
자주 묻는 질문
미디어 쿼리는 왜 인라인으로 옮길 수 없나요?
인라인 스타일에는 조건을 붙일 수 없고 항상 적용되기 때문입니다. 미디어 쿼리는 조건이므로 <style> 블록 안에서만 존재할 수 있습니다. 그래서 반응형 메일에는 둘 다 필요합니다. 기본 디자인은 인라인 스타일로, 휴대폰용 레이아웃은 <style> 블록으로 만들고, <style>을 제거하는 프로그램에서는 기본 디자인만 보인다는 점을 받아들이는 것입니다.
:hover는 어떻게 되나요?
같은 문제, 같은 답입니다. <style> 블록 안에 그대로 남습니다. 호버 효과는 지원하는 프로그램에서만 누리는 보너스로 여기고, 메시지가 거기에 의존하게 만들지 마세요.
이미 있던 인라인 스타일과 스타일시트 중 어느 쪽이 우선하나요?
당신이 이미 넣어둔 스타일입니다. style 속성에 이미 있던 내용은 그대로 유지되고 스타일시트에서 온 규칙 뒤에 배치되어, 브라우저에서와 마찬가지로 계속 우선 적용됩니다.
제가 쓰는 뉴스레터 도구가 하는 작업과 같은 건가요?
대부분의 뉴스레터 도구도 발송 시점에 인라인화를 합니다. 이 도구는 HTML을 다른 사람에게 넘기거나, API로 직접 발송하거나, 어떤 규칙이 왜 사라졌는지 디버깅할 때를 위한 것입니다.