이 쿡북에는 계정에서 보낸 이메일의 모양을 사용자 지정할 수 있는 HTML 사용법이 포함되어 있습니다. 이메일의 모양을 사용자 지정하면 브랜드 일관성을 개선하고 고객 참여를 높이는 데 도움이 될 수 있습니다. 예를 들어 회사 브랜드 아이덴티티와 일치하거나 헬프 센터 디자인과 더 일치하게 회사 로고나 클릭 유도 문안 배너를 이메일 레이아웃에 추가할 수 있습니다.
Zendesk 계정에서 보낸 이메일 알림의 디자인은 주로 관리 센터의 두 기본서식인 HTML과 일반 텍스트에 의해 결정됩니다. 일반 텍스트 기본서식은 이 쿡북에서 설명된 사용자 지정 종류를 지원하지 않습니다. 자세한 내용은 알림을 위한 이메일 기본서식 사용자 지정하기를 참조하세요.
이 쿡북에는 다음 주제가 포함되어 있습니다.
사용법은 HTML 및 CSS를 사용하여 이메일 알림을 사용자 지정합니다. CSS에 대한 소개 및 참고자료는 Mozilla Developer Network에서 CSS: Cascading Style Sheets를 참조하세요.
알림 이메일의 일반적인 디자인 패턴
일반적인 디자인 패턴을 이해하면 브랜드와 일치하는 일관되고 효과적인 이메일 레이아웃을 만드는 데 도움이 될 수 있습니다.
대부분의 알림 이메일은 다음과 같은 몇 개의 요소로만 구성됩니다.
- 로고: 로고 이미지
- 회사 배너: 로고만 사용하는 데 대한 대안
- 콘텐츠: 이메일 본문
- 클릭 유도 문안 배너: 커뮤니티 참여, 헬프 센터 사용, 신제품 사용해 보기 등을 위한 클릭 유도 문안
- 바닥글: 연락처 정보, 소셜 미디어 링크 등을 포함한 다양한 정보를 포함할 수 있습니다.
이메일 기본서식에서는 콘텐츠를 제외한 모든 구성 요소가 선택 사항입니다.
이 쿡북의 사용법은 이메일 기본서식에서 디자인 요소를 만들고 삽입하는 방법에 대해 설명합니다. 여러 요소를 혼합하고 일치시켜 나만의 이메일 디자인을 만들 수 있습니다. 다음은 몇 가지 일반적인 디자인 패턴입니다.
회사 로고 | 바닥글이 있는 회사 로고 |
![]() |
![]() |
바닥글이 있는 회사 배너 | CTA 배너와 바닥글이 있는 회사 배너 |
![]() |
![]() |
Lotus Themes 블로그에서 일부 이메일 디자인을 참조하여 영감을 얻으세요.
이메일을 위한 HTML 가이드라인 및 성공 사례
이메일 애플리케이션에 따라 HTML과 CSS가 서로 다르게 렌더링될 수 있기 때문에 이메일의 모양을 디자인하는 일이 어려울 수 있습니다. 특정 유형의 서식은 스팸으로 인식될 수도 있습니다.
이메일 디자인 시 다음과 같은 일반 가이드라인을 따르세요.
- 단순하게 유지: 디자인을 단순하게 유지하고 복잡한 레이아웃을 피하세요.
- 레이아웃을 위한 테이블 사용: 일부 이메일 애플리케이션은 CSS 기반 레이아웃을 안정적으로 렌더링하지 못할 수도 있습니다. HTML 테이블로 레이아웃을 만들면 더 안정적입니다.
-
인라인 CSS 스타일 사용:
<p style="width=400px;">
같은 HTML 요소의style
속성에 정의된 스타일인 인라인 스타일을 사용하세요. 가져온 스타일시트나<style>
태그에 정의된 스타일은 모든 이메일 애플리케이션에서 지원되지 않을 수 있습니다. - 웹 안전 글꼴 사용: Arial, Verdana 또는 Georgia와 같은 웹 안전 글꼴을 사용하세요. 사용자 지정 글꼴은 모든 이메일 애플리케이션에서 지원되지 않거나 올바르게 렌더링되지 않을 수 있습니다.
- 텍스트 서식을 최소한으로 유지: 텍스트 서식을 최소화하면 레이아웃을 산만하지 않고 깔끔하게 유지하는 데 도움이 됩니다. 또한 굵은 텍스트가 많으면 스팸 필터가 작동할 수 있습니다.
이미지를 위한 다음 가이드라인을 따르세요.
- 이미지를 적게 사용: 이미지를 적게 사용할수록 레이아웃을 산만하지 않고 깔끔하게 유지하는 데 도움이 됩니다. 또한 이미지가 많으면 스팸 필터가 작동할 수 있습니다.
- CSS로 이미지 크기 설정: 인라인 스타일을 사용하여 레이아웃에서 이미지 크기를 조정하세요. 정해진 크기가 없는 이미지는 종종 이메일의 레이아웃을 왜곡합니다. 걱정을 줄이려면 리샘플링을 사용하여 이미지 크기를 물리적으로 조정하세요.
- 모든 이미지에 ALT 태그 사용: ALT 태그는 사용자가 이미지 표시를 허용하기 전에 이미지에 대한 설명을 표시합니다.
- 종료된 Zendesk 계정에 있는 이미지에 링크를 걸지 않기: 의도된 수신자가 등록 및 로그인하지 않은 경우 이미지가 손상될 수 있습니다.
사용법: 회사 로고 추가
이 사용법은 이메일 기본서식에 회사 로고를 추가하는 방법을 보여줍니다. 예:
내용
- 회사 로고 이미지의 URL
사용법
- HTML 또는 텍스트 편집기에 다음 코드 블록을 붙여 넣습니다.
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;"> </td> </tr> </tbody> </table>
- 로고를 사용자 지정하려면 다음 중 하나를 변경합니다.
변경 로고 이미지
요소: img > src
src
속성의 자리 표시자 값을 로고 이미지의 URL로 바꿉니다.예:
img src="https://www.example.com/images/logo_acme.png"
로고 크기
요소: img > style > width
width
값을 변경하여 로고의 크기를 조정합니다.예:
img style="width: 120px; height: auto; ..."
로고 주변 간격
로고 주변에 공간이 너무 많으면 이미지 편집 도구를 사용하여 이미지 주변의 여백을 잘라내야 할 수도 있습니다.
이미지 주변에 공간이 너무 없으면 테이블 셀의 패딩을 늘릴 수 있습니다.
요소: td > style
padding
을style
속성에 추가하고 값을 조정합니다.예:
td style="padding: 10px; ..."
로고의 가로 정렬
요소: td > align
center, left 또는 right를 선택합니다.
예:
td align="left"
로고의 세로 간격
요소: td > style > padding-top
padding-top
값을 변경하여 로고 위에 간격을 추가합니다.요소: td > style > padding-top
padding-bottom
값을 변경하여 로고 아래에 간격을 추가합니다.예:
td style="padding-top: 15px; padding-bottom: 5px; ..."
- 필요에 따라 다른 값을 조정합니다.
- 파일을 .html 확장자로 저장하고 브라우저에서 변경 내용을 자주 미리 봅니다.
- 계정의 이메일 기본서식에 로고를 추가하기 전에 테스트 이메일 기본서식에서 미리 봅니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 HTML 이메일 기본서식의 다음 위치에 로고 코드 블록을 삽입합니다.
사용법: 회사 배너 추가
이 사용법은 이메일 기본서식에 회사 배너를 추가하는 방법을 보여줍니다. 회사 배너는 보통 배경 색과 함께 회사의 로고와 이름으로 구성됩니다. 예:
내용
- 회사 로고 이미지의 URL
- 브랜드 아이덴티티의 색 값
사용법
- HTML 또는 텍스트 편집기에 다음 코드 블록을 붙여 넣습니다.
<table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p> </td> </tr> </tbody> </table>
- 회사 배너를 사용자 지정하려면 다음 중 하나를 변경합니다.
변경 로고 이미지
요소: img > src
src
속성의 자리 표시자 값을 로고 이미지의 URL로 바꿉니다.예:
img src="https://www.example.com/images/logo_acme.png"
로고 크기
요소: img > style > width
width
값을 변경하여 로고의 크기를 조정합니다.예:
img style="width: 120px; height: auto; ..."
로고 주변 간격
로고 주변에 공간이 너무 많으면 이미지 편집 도구를 사용하여 이미지 주변의 여백을 잘라내야 할 수도 있습니다.
이미지 주변에 공간이 충분하지 않으면 테이블 셀의 패딩을 늘릴 수 있습니다.
요소: td > style
padding
을style
속성에 추가하고 값을 조정합니다.예:
td style="padding: 10px; ..."
회사 이름의 형식
요소: p > style
텍스트 스타일을 변경하거나 자체 스타일을 추가합니다.
예:
p style="font-size: 30px; color: #553e3e; ..."
로고와 회사 이름 사이의 간격
요소: img > style > margin-right
margin-right
값을 늘리거나 줄여 로고와 이름 사이의 간격을 늘리거나 줄입니다.예:
img style="margin-right: 15px; ..."
로고에 대한 회사 이름의 세로 정렬
요소: p > style > margin-top
margin-top
값을 늘리거나 줄여 로고를 기준으로 회사 이름을 위 아래로 조절합니다.예:
p style="margin-top: 40px; ..."
배너의 배경 색
요소: table > style > background-color
background-color
스타일의 16진수 값 #d3d3d3을 원하는 값으로 바꿉니다. 브랜딩 가이드라인이나 html-color.codes와 같은 온라인 색 선택기를 참조하세요.예:
table style="background-color: #d8e3fb; ..."
- 필요에 따라 다른 값을 조정합니다.
- 파일을 .html 확장자로 저장하고 브라우저에서 변경 내용을 자주 미리 봅니다.
- 계정의 이메일 기본서식에 배너를 추가하기 전에 테스트 이메일 기본서식에서 미리 봅니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 HTML 이메일 기본서식의 다음 위치에 배너 코드 블록을 붙여 넣습니다.
사용법: 클릭 유도 문안 배너 추가
이 사용법은 이메일 기본서식에 클릭 유도 문안(CTA) 배너를 추가하는 방법을 보여줍니다. 클릭 유도 문안 배너는 일반적으로 이메일 본문 뒤에 있습니다. 보통 사용자가 커뮤니티에 가입하고, 헬프 센터를 이용하고, 새로운 제품을 사용해 보라는 등의 작업을 하도록 초대합니다. 배경 색과 함께 그래픽, 텍스트 및 링크로 구성됩니다. 예:
내용
- 클릭 유도 문안의 텍스트
- 클릭 유도 문안 이미지의 URL
- 사용자들이 클릭 유도 문안을 수행하는 데 도움이 되는 링크의 URL
- 브랜드 아이덴티티의 색 값
사용법
- HTML 또는 텍스트 편집기에 다음 코드 블록을 붙여 넣습니다.
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;"> <div id="cta-text" style="width: 300px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p> </div> <div id="cta-image" style="padding-left: 20px;"> <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;"> </div> </td> </tr> </tbody> </table>
- 세 단락 태그에 클릭 유도 문안을 추가합니다. 필요에 따라 단락을 추가하거나 제거합니다.
- 클릭 유도 문안을 사용자 지정하려면 다음 중 하나를 변경합니다.
변경 클릭 유도 문안 이미지
요소: img > src
src
속성의 자리 표시자 값을 클릭 유도 문안 이미지의 URL로 바꿉니다.예:
img src="https://www.example.com/images/cta_image.png"
이미지 크기
요소: img > style > width
width
값을 변경하여 이미지의 크기를 조정합니다.예:
img style="width: 120px; height: auto; ..."
클릭 유도 문안 메시지의 형식
요소: p > style
텍스트 스타일을 변경하거나 자체 스타일을 추가합니다.
예:
p style="font-size: 30px; color: #553e3e; ..."
메시지와 이미지 사이의 간격
요소: div id="cta-image" > style > padding-left
padding-left
값을 늘리거나 줄여 메시지와 이미지 사이의 간격을 늘리거나 줄입니다.예:
div id="cta-image" style="padding-left: 30px; ..."
배너의 배경 색
요소: table > style > background-color
background-color
스타일의 16진수 값 #d8e3fb를 원하는 값으로 바꿉니다. 브랜딩 가이드라인이나 html-color.codes와 같은 온라인 색 선택기를 참조하세요.예:
table style="background-color: #d3d3d3; ..."
- 필요에 따라 다른 값을 조정합니다.
- 파일을 .html 확장자로 저장하고 브라우저에서 변경 내용을 자주 미리 봅니다.
- 계정의 이메일 기본서식에 배너를 추가하기 전에 테스트 이메일 기본서식에서 미리 봅니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 HTML 이메일 기본서식의 다음 위치에 배너 코드 블록을 붙여 넣습니다.
사용법: 바닥글 추가
이 사용법은 이메일 기본서식에 바닥글을 추가하는 방법을 보여줍니다. 바닥글에는 연락처 정보, 소셜 미디어 링크 등을 포함한 다양한 정보가 포함될 수 있습니다. 소셜 미디어 링크의 경우에는 다음 사용법인 사용법: 바닥글에 소셜 미디어 링크 추가를 참조하세요.
표준 이메일 기본서식은 이미 다음과 같은 바닥글 자리 표시자를 제공합니다.
-
{{footer}}
: 다음 줄을 표시합니다. "Acme의 이메일 서스입니다." 여기서 "Acme"는 회사 이름입니다. -
{{footer_link}}
: 이메일에 "Zendesk에서 전송했습니다."라는 줄을 표시합니다. zendesk.com으로 돌아가는 링크가 "Zendesk"에 있습니다.
이러한 자리 표시자를 자체 바닥글로 바꾸거나 보완할 수 있습니다.
이 사용법에서는 연락처 정보를 제공하는 바닥글을 만듭니다. {{footer}}
및 {{footer_link}}
자리 표시자를 바꿉니다. 예:

내용
- 회사의 연락처 정보
- 브랜드 아이덴티티의 색 값
사용법
- HTML 또는 텍스트 편집기에 다음 코드 블록을 붙여 넣습니다.
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>
- 세 단락 태그에서 연락처 정보를 변경합니다.
- 바닥글을 사용자 지정하려면 다음 중 하나를 변경합니다.
변경 바닥글의 배경 색
요소: table > style > background-color
background-color
스타일의 16진수 값 #d8e3fb를 원하는 값으로 바꿉니다. 브랜딩 가이드라인이나 html-color.codes와 같은 온라인 색 선택기를 참조하세요.예:
table style="background-color: #d3d3d3; ..."
텍스트 색
요소: p > style > color
color
값을 변경합니다.예:
p style="color: #553e3e; ..."
텍스트 서식
요소: p > style
텍스트 스타일을 변경하거나 자체 스타일을 추가합니다.
예:
p style="font-family: Georgia, sans-serif; ..."
상단 및 하단 테두리의 간격
요소: td > style > padding-top
padding-top
값을 늘리거나 줄여 상단 테두리와 텍스트 사이의 간격을 변경합니다.예:
td style="padding-top: 8px; ..."
요소: td > style > padding-bottom
padding-bottom
값을 늘리거나 줄여 텍스트와 하단 테두리 사이의 간격을 변경합니다.예:
td style="padding-bottom: 8px; ..."
- 필요에 따라 다른 값을 조정합니다.
- 파일을 .html 확장자로 저장하고 브라우저에서 변경 내용을 자주 미리 봅니다.
- 계정의 이메일 기본서식에 바닥글을 추가하기 전에 테스트 이메일 기본서식에서 미리 봅니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 HTML 이메일 기본서식의 다음 위치에 코드 블록을 붙여 넣습니다.
사용법: 바닥글에 소셜 미디어 링크를 추가합니다.
이 사용법은 사용자 지정 바닥글에 소셜 미디어 링크를 추가하는 방법을 보여줍니다.
{{footer}}
자리 표시자를 설정할 수 있습니다. 이메일에 소셜 미디어 버튼 추가하기를 참조하세요. 예:
내용
- 버튼으로 사용할 소셜 미디어 이미지의 URL
- 소셜 미디어 계정에 대한 링크
사용법
- HTML 또는 텍스트 편집기에 다음 코드 블록을 붙여 넣습니다.
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>
연락처 정보로 바닥글을 만드는 사용법입니다(사용법: 바닥글 추가).
- HTML의 첫 번째 단락 태그 앞에 소셜 아이콘을 추가합니다. 예:
<div style="padding-top: 12px; padding-bottom: 0px;"> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a> <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a> </div>
- 각 소셜 미디어 링크에 대해 링크의 URL(
href="..."
)과 각 소셜 미디어 링크의 아이콘 이미지(src="..."
)를 변경합니다. - 아이콘을 사용자 지정하려면 다음 중 하나를 변경합니다.
변경
아이콘의 크기
요소: img > style > width
모든 아이콘의 너비 값이 동일해야 합니다.
예:
img style="width: 24px; ..."
아이콘 사이의 간격
요소: img > style > padding-right
마지막 것을 제외한 각 소셜 미디어 링크에 대한
padding-right
스타일의 값을 변경합니다.예:
img style="padding-right: 8px; ..."
아이콘 위와 아래의 간격
요소: div > style > padding-top
padding-top
값을 늘리거나 줄여 아이콘 위의 간격을 조정합니다.예:
div style="padding-top: 8px; ..."
요소: div > style > padding-bottom
padding-bottom
값을 늘리거나 줄여 아이콘 아래의 간격을 조정합니다.예:
div style="padding-bottom: 10px; ..."
- 필요에 따라 다른 값을 조정합니다.
- 파일을 .html 확장자로 저장하고 브라우저에서 변경 내용을 자주 미리 봅니다.
- 계정의 이메일 기본서식에 바닥글을 추가하기 전에 테스트 이메일 기본서식에서 미리 봅니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 HTML 이메일 기본서식의 다음 위치에 코드 블록을 붙여 넣습니다.
사용법: 이메일 본문 사용자 지정
이 사용법은 이메일 본문을 사용자 지정하는 방법을 보여줍니다. 이메일 본문 주변의 간격은 물론 텍스트의 서체 및 크기를 변경할 수 있습니다.
이메일은 알림 메시지와 이메일 대화로 구성됩니다. 이메일 기본서식에서 이메일 본문은 {{content}}
자리 표시자로 나타납니다. Zendesk는 이메일을 보내기 전에 자리 표시자를 HTML로 바꿉니다. 예:
Zendesk에서 삽입한 일부 HTML에는 수정하거나 무시할 수 없는 스타일이 포함되어 있습니다. 자세한 내용은 이메일 본문 사용자 지정의 제한 사항을 참조하세요.
사용법
-
{{content}}
자리 표시자와 상위 div 태그를 HTML이나 텍스트 편집기에 붙여 넣습니다. 예:<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;"> {{content}} </div>
- 이메일 본문을 사용자 지정하려면 상위 div의 스타일을 다음 중 원하는 대로 변경합니다.
변경 메시지 텍스트의 크기
요소: div > style > font-size
font-size
값을 변경합니다.이 변경 내용은 사용자 이름이나 이메일이 전송된 시간의 텍스트 크기에는 영향을 미치지 않습니다.
예:
div style="font-size: 11px; ..."
텍스트 글꼴
요소: div > style > font-family
글꼴을 제한 내에서 변경할 수 있습니다. Trebuchet MS, Verdana 또는 Georgia와 같은 웹 안전 글꼴을 사용하세요. 다른 글꼴들은 이메일 애플리케이션에 따라 지원되지 않을 수도 있습니다.
예:
div style="font-family: 'Trebuchet MS', sans-serif; ..."
이메일 본문 주변의 간격
요소: div > style > padding
padding
값을 늘리거나 줄여 이메일 본문 주변의 간격을 변경합니다.예:
div style="padding: 15px; ..."
왼쪽과 오른쪽의 간격을 가령, 25픽셀로 변경하려면
padding
스타일에 두 개의 값을 지정합니다. 첫 번째 값은 상하의 패딩이고 두 번째 값은 좌우의 패딩입니다.예:
div style="padding: 15px 25px; ..."
- 필요에 따라 다른 인라인 스타일을 추가하거나 다른 값을 조정합니다.
이메일 본문의 일부 특성은 변경될 수 없습니다. 이메일 본문 사용자 지정의 제한 사항을 참조하세요.
- 파일을 .html 확장자로 저장하고 브라우저에서 변경 내용을 자주 미리 봅니다.
- 계정의 이메일 기본서식에 추가하기 전에 테스트 이메일 기본서식에서 변경 내용을 미리 봅니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 HTML 이메일 기본서식의 다음 위치에 코드 블록을 붙여 넣습니다.
이메일 본문 사용자 지정의 제한 사항
Zendesk는 이메일을 보내기 전에 {{content}}
자리 표시자를 자체 HTML로 바꿉니다. 단, 시스템이 생성한 HTML에는 이메일 본문의 특정 요소에 대한 인라인 스타일이 포함되어 있습니다. 안타깝게도 이러한 스타일을 수정할 수 없습니다. 이메일 기본서식에서 인라인 스타일을 사용하여 무시할 수도 없습니다. CSS에서는 하위 요소의 인라인 스타일이 div와 같은 상위 요소의 인라인 스타일보다 우선합니다.
이 섹션에서는 이메일 본문을 사용자 지정하는 데 있어 몇 가지 제한 사항을 설명합니다. 이메일 본문의 나머지 부분에 대한 디자인 결정을 내릴 때는 이러한 설정을 반드시 고려하세요.
본문 텍스트
본문 텍스트의 다음 스타일은 변경할 수 없습니다.
- 글꼴 색
- 선 높이
- 텍스트 주변 여백
이러한 스타일의 설정은 다음과 같습니다.
color: #2b2e2f; line-height: 22px; margin: 15px 0
이름 및 보낸 날짜 텍스트
이름 및 보낸 날짜 텍스트의 다음 스타일은 변경할 수 없습니다.
- 글꼴 색
- 글꼴 패밀리
- 글꼴 크기
- 선 높이
- 텍스트 주변 여백
이름 텍스트의 설정은 다음과 같습니다.
color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"
보낸 날짜 텍스트의 설정은 다음과 같습니다.
font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px;
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"
변경 내용 테스트하기
이 사용법에 첨부된 테스트 이메일 기본서식으로 변경 내용을 테스트할 수 있습니다.
관리 센터에서 이메일 기본서식에 직접 변경한 내용은 즉시 실행됩니다. 따라서 계정의 이메일 기본서식에 추가하기 전에 테스트 기본서식의 변경 내용이 예상대로 작동하는지 철저히 테스트해야 합니다.
변경 내용을 테스트하려면 다음과 같이 하세요.
- 아래에 첨부된 test_email_template.html 테스트 이메일 기본서식을 다운로드하여 HTML이나 텍스트 편집기에 엽니다.
- 테스트 이메일 기본서식의 표시된 위치에 구성 요소에 대한 코드 블록을 붙여 넣습니다. 예:
<!-- Paste logo or company banner code block here -->
- 브라우저에서 테스트 기본서식을 열면 브라우저 창이 더 좁아지면서 이메일 애플리케이션을 에뮬레이트합니다.
- 테스트 기본서식에서 코드를 조정한 후 브라우저 페이지를 새로 고치면 변경 내용의 효과를 볼 수 있습니다.
- 디자인이 마음에 들 때까지 계속해서 변경합니다.
- 실행할 준비가 되면 관리 센터(관리 센터 > 채널 > 이메일)에서 이메일 기본서식의 동일한 위치에 구성 요소에 대한 코드 블록을 붙여 넣습니다.
댓글 0개