HTML 이메일 배경색 및 그라디언트를 코딩하는 가장 좋은 방법

게시 됨: 2021-04-22

배경색 코딩은 간단한 작업처럼 들립니까? 진실? 이 사소한 스타일에도 몇 가지 함정이 있으며 이메일 클라이언트에서 일관된 렌더링을 얻으려면 몇 가지 고려 사항이 필요합니다.

그리고 받은 편지함의 신을 달래야 하는 것은 개발자만이 아닙니다. 다크 모드가 추진력을 얻으면서 인식해야 할 환경이 훨씬 더 많아지고, 그 중 일부는 이메일 디자이너가 디자인에 배경색을 적용할 때 더 많은 주의를 기울여야 합니다.

이 블로그 게시물에서는 다음을 배우게 됩니다.

배경색의 장점
단색 배경 코딩 방법(+ 이메일 클라이언트 지원)
그라데이션 배경을 코딩하는 방법(+ 이메일 클라이언트 지원)
다크 모드 최적화를 위한 팁

이메일에 배경색을 사용하는 이유는 무엇입니까?

배경색 전략을 적용하면 이메일 프로그램을 향상시킬 때 몇 가지 요구 사항을 충족할 수 있습니다. 기술적인 관점에서 배경색을 구현하면 이메일에 로드 시간이 추가되지 않으며 이미지가 꺼진 경우에도 여전히 표시됩니다. 콘텐츠를 분리하거나, 메시지를 표시하거나, 구독자의 받은 편지함에서 이메일을 다른 사람과 구분하여 잠재적으로 잠재고객의 참여를 높일 수 있습니다.

받은 편지함에서 눈에 띄게

Blurb에서 보낸 이 이메일과 같이 임팩트 있는 오프닝 경험을 만들 수 있습니다.

영웅 영역은 펀치를 포장합니다. 대담한 오렌지색 배경은 로고의 파란색과 대비되어 임팩트가 있어 브랜드 아이덴티티를 높입니다. 독자가 영웅 영역을 스크롤하면 흰색 배경에 보조 콘텐츠가 표시되어 더 큰 본문에 이상적인 읽기 환경을 제공합니다.

섹션 분리

이메일이 긴 경우 색상을 사용하면 다양한 콘텐츠 블록을 시각적으로 구분하여 더 쉽게 이해할 수 있습니다.

대형 커피 전문점 스타벅스의 프로모션 이메일은 하나의 이메일에 여러 프로모션이 포함되어 매우 길 수 있습니다. 섹션이 서로 구분되도록 돕기 위해 다른 배경색이 사용됩니다.

브랜드 아이덴티티 향상

그라디언트는 Marketing Agency 1973 Ltd의 브랜드 아이덴티티의 일부이므로 이메일 배경에서 굵은 선형 그라디언트를 자주 볼 수 있습니다. 배경 그라디언트는 컴포지션을 보다 동적으로 보이게 하고 구독자가 스크롤하도록 유도할 수도 있습니다.

그라데이션 배경의 1973 Ltd 이메일 예 — 출처: 정말 좋은 이메일

그렇다면 이러한 기술을 이메일 개발에 적용하는 가장 좋은 방법은 무엇입니까? 저는 동료이자 Litmus 이메일 개발자인 Carin Slater에게 단색 및 그라데이션 배경 코딩에 대한 정보를 요청했습니다.

단색 HTML 이메일 배경색을 코딩하는 방법

배경색은 여러 방법과 여러 위치에서 코딩할 수 있습니다. 그러나 각 방법은 이메일 클라이언트 간에 동일하게 지원되지 않습니다. 다음은 상위 이메일 클라이언트에 적합한 배경 스타일 코드 및 색상 코드 방법에 대한 빠른 차트입니다.

배경색에 대한 이메일 클라이언트 지원

스타일 코드	CSS 속성 '배경' 및 '배경색'				HTML 속성 'bgcolor'
색상 코드	6자리 16진수	3자리 16진수	RGB	RGBA	6자리 16진수	3자리 16진수	RGB	RGBA
애플 메일 14	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아웃룩 2016(macOS 10.12.6)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아웃룩 13, 16, 19(윈도우 10)	✓ 예	✓ 예	✓ 예	✘ 아니요	✓ 예	✘ 아니요	✘ 아니요	✘ 아니요
아웃룩 오피스 365(윈도우 10)	✓ 예	✓ 예	✓ 예	✘ 아니요	✓ 예	✘ 아니요	✘ 아니요	✘ 아니요
아웃룩 오피스 365(맥 OS 10.15)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
윈도우 10 메일	✓ 예	✓ 예	✓ 예	✘ 아니요	✓ 예	✘ 아니요	✘ 아니요	✘ 아니요
지메일 앱(안드로이드 10)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
지메일 앱(iOS 13.4.1)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아웃룩(안드로이드 7.0)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아웃룩(iOS 12.0)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
삼성 메일(안드로이드 7.0)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아이패드 11 에어(4세대 iOS 14.2)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아이폰 12(iOS 14.2)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
AOL 메일(에지)	✓ 예	✓ 예	✓ 예	✘ 아니요	✓ 예	✘ 아니요	✘ 아니요	✘ 아니요
컴캐스트(에지)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
지메일(크롬)	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
오피스 365	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
아웃룩닷컴	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✓ 예	✘ 아니요	✘ 아니요
Web.de	✓ 예	✓ 예	✓ 예	✘ 아니요	✓ 예	✘ 아니요	✘ 아니요	✘ 아니요
야후! 우편	✓ 예	✓ 예	✓ 예	✘ 아니요	✓ 예	✘ 아니요	✘ 아니요	✘ 아니요

우리는 이메일 클라이언트가 약간 까칠할 수 있다는 것을 알고 있습니다. 모든 이메일 클라이언트에서 작동하도록 배경색을 코딩하는 가장 좋은 방법은 무엇입니까? 권장 사항과 그 이유를 안내해 드리겠습니다.

1. 표와 표 셀 사용

HTML에는 배경색을 추가할 수 있는 네 곳이 있습니다.

<본체>
<div>
<표>
<td>

배경색을 추가하는 가장 안전한 위치는 표 또는 표 셀입니다.

<body> 태그는 Yahoo 및 AOL에서 삭제되므로 여기에 적용된 배경색은 해당 이메일 클라이언트에 표시되지 않습니다. 그리고 본문 뒤의 래핑 <div>에 색상을 배치하면 이메일에서 <div> 태그를 지원하지 않기 때문에 Outlook 클라이언트를 제외한 모든 곳에서 작동합니다.

가장 광범위한 이메일 클라이언트 지원을 받으려면 전체 이메일을 100% 너비의 <table> 태그로 감싸고 배경색을 거기에 넣으십시오. 그리고 이메일 섹션에 표 셀 <td>를 사용하여 특정 콘텐츠 블록을 보다 유연하게 색칠할 수 있습니다.

2. CSS 속성과 HEX 색상 코드 또는 RGB 값으로 색상 추가

배경색은 여러 가지 방법으로 코딩할 수 있습니다.

bgcolor HTML 속성 사용
CSS 속성 background-color 사용
CSS 약식 속성 배경 사용
6자리 16진수 색상 코드 사용
3자리 16진수 색상 코드 사용
RGB 색상 값 사용

테이블이나 테이블 셀에 배경색을 넣는 방법은 CSS 속성을 사용해야 합니다.

두 가지 CSS 속성 메서드인 background-color 및 background를 테스트한 결과 색상만 추가(이미지 없음)하는 한 둘 다 동일하고 일관된 결과를 얻을 수 있음을 발견했습니다. caniemail.com에 따르면 색상을 추가하는 것 외에 background 속성을 사용하면 색상이 표시되지 않을 수 있습니다.

bgcolor HTML 속성은 3자리 HEX 코드에 대한 일관되지 않은 지원으로 Outlook에서 제대로 작동하지 않았습니다. 그리고 RGB 및 RGBA 값을 사용하면 잘못된 색상이 발생하거나 색상이 완전히 떨어집니다.

다음은 Outlook의 다양한 방법을 사용하여 직접 확인할 수 있는 배경색 테스트입니다.

Outlook의 HTML 이메일에서 배경색이 렌더링되는 방식에 대한 Litmus 테스트 — Litmus에서 이 테스트 보기 →

다른 이메일 클라이언트에서는 3자리 HEX 코드가 잘 렌더링되었지만 RGB 및 RGBA 값이 bgcolor HTML 속성에 적용될 때 잘못된 색상이 발생했습니다.

Apple Mail의 HTML 이메일에서 배경색이 렌더링되는 방식에 대한 Litmus 테스트 — Litmus에서 이 테스트 보기 →

모든 테스트 후에 우리는 한 가지 결론에 이르렀습니다. CSS 속성을 고수하고 3자리 또는 6자리 HEX 코드 또는 RGB 값을 사용하는 것입니다. 모든 이메일 클라이언트에서 작동했습니다.

RGBA 값에 대한 알파로 불투명도를 도입하는 것은 Outlook, Web.de 또는 GMX.de에서 지원되지 않았지만 그렇지 않은 경우 적절한 지원을 받았습니다.

따라서 최종 코드는 테이블의 전체 배경을 색칠하기 위해 다음과 같아야 합니다.

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #427CA9;">

또는 특정 표 셀에 색상 추가:

<td style="background-color: #427CA9;">

그리고 그게 정말이야!

QA는 이메일의 배경색 등을 테스트합니다.

제대로 했어? 가장 인기 있는 이메일 클라이언트에서 이메일이 어떻게 보이는지 확인하여 브랜드와 오류 없는 구독자 경험을 보장할 수 있습니다.

방법 알아보기 →

그라데이션 배경을 만드는 방법

배경색을 한 단계 높이려면 그라디언트를 추가해 보세요.

CSS 그라디언트가 모든 곳에서 지원되는 것은 아니지만 거의 모든 이메일 클라이언트에서 그라디언트를 렌더링할 수 있도록 하는 대체가 있습니다.

그라데이션 배경에 대한 이메일 클라이언트 지원

이메일 클라이언트	CSS 선형 그라디언트 지원	CSS 선형 그라디언트, VML 그라디언트 및 이미지 폴백 지원
애플 메일 14	✓ 예	✓ 예
아웃룩 2016(macOS 10.12.6)	✓ 예	✓ 예
아웃룩 13, 16, 19(윈도우 10)	✘ 아니요	✓ 예
아웃룩 오피스 365(윈도우 10)	✘ 아니요	✘ 아니요
아웃룩 오피스 365(맥 OS 10.15)	✓ 예	✓ 예
윈도우 10 메일	✘ 아니요	✘ 아니요
지메일 앱(안드로이드 10)	✓ 예	✓ 예
지메일 앱(iOS 13.4.1)	✓ 예	✓ 예
아웃룩(안드로이드 7.0)	✘ 아니요	✓ 예
아웃룩(iOS 12.0)	✘ 아니요	✓ 예
삼성 메일(안드로이드 7.0)	✓ 예	✓ 예
아이패드 11 에어(4세대 iOS 14.2)	✓ 예	✓ 예
아이폰 12(iOS 14.2)	✓ 예	✓ 예
AOL 메일(에지)	✘ 아니요	✓ 예
컴캐스트(에지)	✓ 예	✓ 예
지메일(크롬)	✓ 예	✓ 예
오피스 365	✘ 아니요	✓ 예
아웃룩닷컴	✘ 아니요	✓ 예
Web.de	✘ 아니요	✘ 아니요
야후! 우편	✘ 아니요	✓ 예

시작하는 방법은 다음과 같습니다.

1. 표 또는 표 셀에 CSS 선형 그라데이션 배경 적용

단색 배경을 사용할 때와 마찬가지로 CSS 선형 그라데이션 배경을 테이블이나 테이블 셀 또는 포함하는 div(곧 Outlook 해결 방법에 대해 설명함)에 적용하여 다음과 같이 만듭니다.

CSS 선형 그라데이션 배경의 리트머스 이메일 예 — Litmus Builder에서 이 그라디언트를 어떻게 생성했는지 확인하세요.

이 예에서 그라디언트는 보라색, 마젠타색 및 주황색의 세 가지 색상을 포함합니다. 스타일은 bgcolor 속성에 적용된 단색 대체로 HTML 내에서 시작됩니다. 그런 다음 인라인 CSS 스타일 내에서 background 속성과 RGB 메서드를 사용하여 해당 대체를 반복합니다.

선형 그라디언트를 생성하기 위해 background 속성을 다시 포함하고 선형 그라디언트 스타일을 적용합니다. 우리가 생성하는 그라디언트는 왼쪽 위에서 오른쪽 아래로 대각선으로 렌더링되므로 그라디언트 각도 구문(315deg)으로 시작합니다. 그런 다음 색상을 표시하려는 순서대로 RGBA 메서드를 사용하여 각 색상을 선언합니다.

RGBA 색상 스타일링 후 해당 색상을 표시할 위치를 포함합니다. 이렇게 하면 색상을 멋지게 혼합하는 데 도움이 됩니다. 색상 위치를 선택하는 방법에 대한 아이디어를 얻으려면 CSS 그라디언트 온라인 생성기를 사용할 수 있습니다.

다음과 같은 코드로 끝나야 합니다.

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">

2. VML 그래디언트를 사용하여 Outlook에 대한 대체 만들기

많은 구독자가 Outlook을 사용합니까? 그런 다음 벡터 마크업 언어(VML)를 사용하여 배경 그라데이션을 추가해야 합니다.

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="gradient" color="#e37b46" color2="#56328b" />
</v:background>
<![endif]-->

VML 그라디언트는 두 가지 색상에서 가장 잘 작동합니다. 세 가지 이상의 색상을 만들 수 있는 옵션이 있지만 1990년대 초반과 매우 흡사한 것으로 밝혀졌으며 이를 길들이기 위해 무엇을 할 수 있는지에 대한 제어가 많지 않습니다. 3개 이상의 색상 그라디언트를 원하면 이미지를 사용하는 것이 가장 좋습니다(다음 단계에서 방법을 알려 드리겠습니다).

이미지 기반 VML 그라디언트의 경우 이미지 크기를 조정하여 공간을 채우는 가장 좋은 방법을 찾아야 합니다. type=”frame” 또는 type=”tile” 속성을 사용할 수 있습니다. 정말 긴 스키니 그라디언트는 type="tile"에 잘 작동하는 반면 짧고 넓은 그라디언트 이미지는 type="frame"에 더 잘 작동합니다.

무엇이 작동하는지 보는 가장 좋은 방법은 이미지를 넣고 리트머스에서 어떻게 보이는지 보는 것입니다.

3. Outlook, Yahoo 및 AOL용 이미지 기반 대체 생성

Yahoo, AOL, Outlook(iOS 및 Android) 및 Outlook.com에 구독자가 있는 경우 해당 구독자에 대한 이미지 기반 대체를 만들 수 있습니다.

그라디언트를 적용할 셀이나 표에 "그라디언트" 클래스를 추가합니다. 그런 다음 다른 타겟팅 방법을 사용하여 CSS 배경 이미지를 할당하여 그래디언트가 표시되지 않는 그래디언트 CSS 스타일을 재정의할 수 있습니다.

Outlook.com을 대상으로 지정하려면 다음과 같이 사용합니다.

[class~="x_gradient"] { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

Yahoo 및 AOL을 타겟팅하려면 다음을 사용하십시오.

.& .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

두 Outlook 모바일 클라이언트를 모두 대상으로 지정하려면 다음을 사용하십시오.

body[data-outlook-cycle] .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

예제 그래디언트에 대한 이미지 기반 폴백을 만들었습니다. 이를 반복하려면 그라디언트 각도에 작별 인사를 하고 색상이 위에서 아래로 표시되도록 정렬해야 했습니다.

대체 이미지 기반 그라데이션 배경의 리트머스 이메일 예 — Litmus Builder에서 이 그라디언트를 어떻게 생성했는지 확인하세요.

4. 다른 모든 이메일 클라이언트에 단색 대체 색상 사용

수정 사항을 지원하지 않는 이메일 클라이언트의 경우 단색 대체 색상을 제공해야 합니다.

이 경우 bgcolor 특성을 6자리 HEX 색상과 함께 사용하여 Windows 10 및 Office 365 데스크톱 클라이언트에 대한 대체 색상을 제공합니다. Web.de는 CSS 배경 속성을 폴백으로 사용합니다.

따라서 테이블의 전체 배경에 색상을 지정하려는 경우 이메일에 인라인으로 사용할 최종 코드는 다음과 같습니다.

<table class="gradient" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
</v:background>
<![endif]-->

또는 특정 테이블 셀에만 색상을 지정하려면 다음 코드를 사용하십시오.

<td class="gradient" align="left" valign="top" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[width]px; height: [height]px;">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
<v:textbox inset="0,0,0,0">
<![endif]-->

VML에 익숙하지 않고 올바른지 확인하려는 경우 Campaign Monitor에는 이메일에 배경 이미지를 추가하기 위해 Stig에서 개발한 편리한 도구가 있습니다. 동일한 도구를 사용하고 v:fill type=”tile” 을 v:fill type=”gradient” 로 교체하여 그라디언트 를 생성할 수 있습니다. color=”” 및 color2=””를 사용 하여 시작 및 끝 그라디언트 색상을 모두 선언하고 src=”” 속성을 제거해야 합니다. 위의 예에서 v:fill type="frame" 을 사용하여 이미지가 전체 프레임에 걸쳐 있고 반복되지 않도록 합니다. 이것은 또한 망막 배경 이미지에 대한 훌륭한 수정 사항이지만 Courtney Fantinato에게 맡기겠습니다.

다크 모드를 잊지 마세요

배경색 지원이 개선되자 바로 다크 모드가 도입되었습니다.

구독자의 대비 선호도를 기반으로 맞춤형 독서 경험을 만들 수 있는 이 기회는 접근성 측면에서 큰 이점이지만 이메일 디자이너와 개발자에게는 또 다른 장애물입니다.

다크 모드 이메일에 대한 궁극적인 가이드

다크 모드에 대한 이메일 최적화는 까다로울 수 있습니다. 최고의 온브랜드 다크 모드 이메일 구독자 경험을 만들기 위한 코딩 및 디자인 팁에 대한 궁극의 가이드를 확인하십시오.

사용 방법 안내 받기 →

Apple Mail, iPad, iPhone 기본 메일 앱, HEY 및 Outlook 앱과 같은 이메일 클라이언트는 CSS 스타일이 포함된 대상이 될 수 있지만 자체 기본 렌더링을 사용하여 다크 모드 솔루션을 제공하는 이메일 클라이언트도 있습니다.

Outlook.com, Office 365, iOS 및 Android용 Gmail 앱은 모두 부분적으로 또는 완전히 색상을 반전하여 다크 모드 환경을 생성하며 때로는 끔찍한 결과를 초래합니다.

아직 이 색상 반전을 덮어쓸 방법이 없습니다 . 그러나 이러한 환경에서 이메일 렌더링을 개선하기 위해 고려할 수 있는 몇 가지 사항이 있습니다.

팁 #1: 색상 테스트를 통해 정보에 입각한 디자인 선택

의도하지 않은 방식으로 색상이 조정되는 것을 보면 마음이 조금 아플 수 있습니다. 색상은 변경되지 않지만 글꼴 색상은 변경되고 모든 접근성 고려 사항이 창 밖으로 사라지면 다소 걱정스럽습니다.

다크 모드의 색상을 반전시키는 이메일 클라이언트에서 브랜드 색상을 테스트하여 색상이 어떻게 변경되는지 확인하는 것이 좋습니다. 색상이 렌더링되는 방식에 대한 아이디어가 있으면 디자인 단계에서 정보에 입각한 색상을 선택할 수 있습니다.

우리는 우리가 통제할 수 없는 이메일 클라이언트에서 일부 색상과 톤이 어떻게 조화를 이루는지 알아보기 위해 유사한 테스트를 실행했습니다.

다크 모드에서 Litmus HTML 이메일 배경색 테스트 — Litmus에서 이 테스트 보기 →

우리는 밝은 톤을 사용하면 배경과 텍스트 색상이 상당히 잘 반전된다는 것을 발견했습니다. 반전된 색상은 색상 팔레트의 일부가 아니지만 이러한 이메일 클라이언트에서 액세스 가능한 읽기 환경을 제공할 수 있습니다.

밝은 모드와 어두운 모드의 배경색에 대한 Litmus HTML 이메일 예

팁 #2: Gmail 앱에 부분 수정 사용

이메일 커뮤니티의 끊임없는 노력 덕분에 Gmail 앱 내에서 색상 반전을 길들이는 방법이 밝혀졌습니다.

macOS/iOS 다크 모드 색상 재정의:
배경색의 경우 단색 그라디언트를 사용합니다.
배경 이미지: 선형 그라데이션(#ffffff,#ffffff)
이것이 작동한다는 것이 믿기지 않지만 작동합니다 ... 심지어 내 버튼도 브랜드에 있습니다.
@ThiesBW #emailgeeks 덕분에
— Annett Forcier(@The_Annett) 2019년 12월 11일

배경색이 포함된 선형 그래디언트를 컨테이너 요소에 적용하면 선택한 색상이 Gmail의 밝은 모드 및 어두운 모드 환경에 나타나도록 강제할 수 있습니다.

이렇게 하려면 HEX 색상 방법을 사용하여 background-image CSS 속성에 선형 그래디언트를 추가해야 합니다. 그런 다음 그라디언트의 두 색상을 다음과 같이 Gmail에서 사용할 색상으로 지정합니다.

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background-image: linear-gradient(#e37b46, e37b46);">

Remi Parmentier는 CSS 혼합 모드를 사용하는 Gmail 앱에서 텍스트 색상이 반전되는 것을 방지하기 위해 이 해결 방법을 확장했습니다.

이러한 수정 사항을 사용하면 반전 렌더링의 일부 측면을 제어하는 데 도움이 될 수 있습니다. 그러나 이것은 Gmail에서만 가능하며 가입자가 선택한 대비 모드에 따라 이메일 색상을 유연하게 변경할 수 없습니다.

색상을 반전시키는 이메일 클라이언트를 대상으로 할 수 없다는 것이 답답하지만 색상 팔레트를 테스트하고 테스트 결과를 기반으로 색상을 선택하고 이러한 부분 수정 작업을 통해 약간의 제어를 다시 얻을 수 있습니다.

색상으로 구독자 와우

색상은 구독자 경험에 약간의 매력을 더하고 이메일 콘텐츠를 체계적으로 유지하는 좋은 방법입니다. 그리고 이미지보다 시간과 리소스가 덜 걸립니다! 그것은 모두 윈-윈입니다.

따라서 이 가이드를 시작하고 받은 편지함에서 다채로운 배경을 보고 싶습니다.

색상이 올바르게 표시되는지 확인

구독자가 귀하의 이메일을 의도한 대로 볼 수 있습니까? Litmus Email Previews를 사용하여 90개 이상의 이메일 클라이언트, 앱 및 장치에서 이메일이 어떻게 보이는지 미리 봅니다.

Litmus 무료 평가판 시작 →

Justine Jordan이 2018년 3월 27일에 처음 출판했습니다. 2021년 4월 21일에 마지막으로 업데이트되었습니다.