반응형 HTML 이메일 템플릿 만들기:단계별 초보자 가이드

초보자에게 적합한 이 가이드에서는 반응형 이메일 템플릿을 만드는 방법을 알아봅니다. 코드 조각이 포함된 단계별 지침에 따라 모든 장치에서 멋지게 보이는 이메일 템플릿을 디자인하게 됩니다.

이 프로젝트는 이메일 디자인의 기초를 익히고 싶어하는 신규 이민자에게 적합합니다!

1단계:기본 구조 설정

이메일 템플릿을 작성하려면 기본 HTML 구조부터 시작할 수 있습니다. 여기에는 DOCTYPE이 포함됩니다. 이메일 선언, head 정의 그리고 body 섹션 및 head에서 메타 태그 사용 섹션을 참조하여 적절한 모바일 렌더링 및 확대/축소를 확인하세요.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Responsive Email Template</title>
</head>
<body>
 <!-- Email content goes here -->
</body>
</html>

2단계:이메일 구조 만들기

표를 사용하여 이메일의 기본 구조를 만드세요. 이렇게 하면 다양한 이메일 클라이언트 간의 호환성이 보장됩니다.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="center">
 <table width="600" cellpadding="0" cellspacing="0" border="0">
 <!-- Email content goes here -->
 </table>
 </td>
 </tr>
</table>

3단계:콘텐츠 및 인라인 스타일 추가

이메일 클라이언트는 CSS를 렌더링하는 방법이 다양하므로 인라인 스타일을 사용하는 것이 더 안전합니다. 다음은 간단한 이메일 본문의 예입니다:

<body style="font-family: 'Poppins', Arial, sans-serif">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td align="center" style="padding: 20px;">
 <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
 <!-- Header -->
 <tr>
 <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
 Responsive Email Template
 </td>
 </tr>
 <!-- Body -->
 <tr>
 <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
 Hello, All! <br>
 Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
 <br><br>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis. 
 </td>
 </tr>
 <!-- Call to action Button -->
 <tr>
 <td style="padding: 0px 40px 0px 40px; text-align: center;">
 <!-- CTA Button -->
 <table cellspacing="0" cellpadding="0" style="margin: auto;">
 <tr>
 <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
 <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. 
 </td>
 </tr>
 <!-- Footer -->
 <tr>
 <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
 Copyright &copy; 2024 | Your brand name
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
</body>

주요 요소와 기능은 다음과 같습니다.

본문 태그 및 글꼴 설정

<body style="font-family: 'Poppins', Arial, sans-serif">

그러면 이메일의 기본 글꼴이 'Poppins'로 설정되고 'Poppins'를 사용할 수 없는 경우 Arial 및 sans-serif로 대체됩니다.

테이블 구조

<table width="100%" border="0" cellspacing="0" cellpadding="0">

이는 이메일 너비의 100%를 차지하는 가장 바깥쪽 테이블입니다. border , cellspacing 및 cellpadding 기본 스타일과 간격을 제거하려면 0으로 설정됩니다.

이 테이블 안에 또 다른 <table class="content">가 중첩되어 있습니다. 600px의 고정 너비를 가지며 td align="center"가 있는 상위 요소를 중심으로 합니다. .

이 내부 테이블에는 테두리와 특정 스타일이 포함되어 있으며 이를 주요 콘텐츠 영역으로 정의합니다.

헤더는 인라인 CSS(#345C72), 흰색 텍스트 색상 및 더 큰 텍스트 크기(24px)를 사용하여 진한 파란색 배경으로 스타일이 지정되었습니다. 이메일 시작 부분에서 바로 주의를 끌 수 있도록 설계되었습니다.

참고 : 대신 브랜드 이름이나 로고로 이 섹션을 맞춤 설정할 수 있습니다.

본문 내용

본문 섹션에는 이메일의 주요 메시지가 포함되며, 가독성을 높이기 위해 글꼴 크기 16px, 줄 높이 1.6으로 설정됩니다. 내용은 왼쪽으로 정렬되며 <br>을 사용합니다. 태그는 줄 간격을 두는 데 도움이 됩니다.

CTA(행동 유도) 버튼

<!-- Call to action Button -->
 <tr>
 <td style="padding: 0px 40px 0px 40px; text-align: center;">
 <!-- CTA Button -->
 <table cellspacing="0" cellpadding="0" style="margin: auto;">
 <tr>
 <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
 <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>

여기 CTA 버튼은 헤더와 어울리는 배경색, 둥근 모서리(border-radius: 5px)로 눈에 띄도록 디자인되었습니다. ) 및 굵은 흰색 텍스트입니다.

<a> 버튼 내의 태그는 기본 밑줄(text-decoration: none)을 제거하도록 스타일이 지정되었습니다. ) 수신자가 "무료 상담 예약"을 할 수 있는 웹페이지로 연결됩니다.

바닥글은 머리글의 스타일 지정 방식을 반복하지만 더 어두운 배경(#333333)과 더 작은 글꼴 크기(14px)를 사용합니다. 여기에는 저작권 정보, 링크 또는 기타 연락처 정보가 포함될 수 있습니다.

그림

반응형 HTML 이메일 템플릿 만들기:단계별 초보자 가이드 템플릿의 다양한 부분에 대한 그림:머리글, CTA 버튼 및 바닥글

4단계:반응형으로 만들기

이메일이 모바일 장치에서 보기 좋게 보이도록 하려면 CSS 미디어 쿼리를 사용할 수 있습니다. 대부분의 스타일은 인라인이지만 반응형 동작을 위해서는 <style>을 추가해야 합니다. head의 블록 .

미디어 쿼리는 기기의 너비에 따라 스타일을 조정합니다.

<style>
 @media screen and (max-width: 600px) {
 .content {
 width: 100% !important;
 display: block !important;
 padding: 10px !important;
 }
 .header, .body, .footer {
 padding: 20px !important;
 }
 }
</style>

다음은 이 특정 CSS 스니펫에 대한 분석입니다:

@media screen and (max-width: 600px) { ... }

이 미디어 쿼리는 최대 너비가 600픽셀인 화면을 대상으로 합니다. 일반적으로 스마트폰과 일부 소형 태블릿을 포함하여 화면 너비가 600px 이하인 장치에서 이메일을 볼 때만 다음 스타일을 적용합니다.

미디어 쿼리 클래스 내의 스타일:

.콘텐츠

width_: 100% !important;_ :이 스타일은 .content의 너비를 변경합니다. HTML에 지정된 600px 대신 화면의 전체 너비를 사용하려면 테이블을 사용하세요. !important 규칙은 다른 충돌하는 스타일을 재정의하는 데 사용됩니다.
display: block !important; :<table>이지만 요소는 기본적으로 블록 수준 요소이며 display: block로 설정됩니다. 일부 이메일 클라이언트에서 요소가 예상대로 작동하는지 확인하는 데 명시적으로 도움이 될 수 있습니다.
padding: 10px !important; :.content 내의 콘텐츠 주위에 패딩을 추가합니다. 표를 HTML의 원래 40픽셀에서 줄여 소형 기기에서 축소된 화면 공간을 더 잘 활용할 수 있도록 했습니다.

.header, .body, .footer

padding: 20px !important; :이 스타일은 머리글, 본문, 바닥글의 패딩을 균일하게 설정합니다. 섹션을 20px로 작은 화면에 맞게 간격을 최적화합니다. 이는 HTML에 정의된 다양한 패딩 설정을 재정의하며 경우에 따라 더 큰 값을 포함합니다.

이메일 디자인의 맥락에서 !important 사용 스타일이 의도한 대로 적용되도록 하는 것은 매우 일반적이며, 기본 스타일과 전자 메일 클라이언트 자체에 의해 적용될 수 있는 기타 잠재적으로 충돌하는 스타일을 모두 재정의합니다.

5단계:이메일 클라이언트 전체에서 테스트

호환성과 응답성을 보장하려면 다양한 이메일 클라이언트(Gmail, Outlook, Apple Mail 등)와 장치에서 이메일 템플릿을 테스트하는 것이 중요합니다. Litmus나 Email on Acid와 같은 도구가 도움이 될 수 있습니다.

6단계:Google 글꼴 추가

Google Fonts를 HTML 이메일 템플릿에 통합하면 시각적 매력이 크게 향상될 수 있습니다.

그러나 모든 이메일 클라이언트가 웹 글꼴을 지원하는 것은 아니라는 점에 유의하는 것이 중요합니다. Apple Mail과 같은 일부는 Google Fonts를 지원하지만 Gmail과 같은 일부는 지원하지 않습니다. 이메일이 모든 수신자에게 보기 좋게 보이도록 하려면 항상 대체 글꼴을 제공하세요.

이메일 템플릿에 Google 글꼴을 추가하는 방법과 이를 지원하지 않는 클라이언트를 위한 대체 옵션은 다음과 같습니다.

Google 글꼴 선택

먼저 Google Fonts 웹사이트를 방문하여 글꼴을 선택하세요. 이 예에서는 "Poppins"를 사용하겠습니다.

이메일 헤드에 글꼴 링크 추가

<head>에 Google 글꼴에 대한 링크를 포함합니다. HTML 문서의 모든 이메일 클라이언트에서 지원되지 않을 수 있으므로 스타일에 적합한 대체 글꼴이 있는지 확인하세요.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

스타일에 글꼴 적용

인라인 CSS를 사용하여 Google 글꼴을 HTML 요소에 적용하고 항상 일반 대체 글꼴을 포함하세요. 이메일 템플릿에서는 <style>에 대한 다양한 지원으로 인해 스타일을 인라인으로 적용하는 것이 더 안전합니다. 이메일 클라이언트 전체에 태그를 추가합니다.

body에 글꼴을 적용하는 방법은 다음과 같습니다. 이메일을 삭제하고 대체 내용을 포함하세요.

<body style="font-family: 'Poppins', Arial, sans-serif;">
 <table width="100%" cellspacing="0" cellpadding="0">
 <!-- Email content -->
 </table>
</body>

우리가 만든 것

아래는 우리가 디자인한 이메일 템플릿의 스크린샷입니다. 로고 자리 표시자가 포함된 헤더, 메시지의 본문 섹션, 연락처 및 구독 관리 링크가 포함된 어두운 바닥글이 포함된 전문적인 레이아웃이 특징입니다.

반응형 HTML 이메일 템플릿 만들기:단계별 초보자 가이드 이메일 템플릿 스크린샷

추가 팁:

많은 이메일 클라이언트가 <style>를 지원하지 않으므로 가능한 한 CSS를 인라인으로 유지하세요. 태그.
텍스트가 모든 이메일 클라이언트에 올바르게 표시되도록 웹 안전 글꼴을 사용하세요.
HTML을 지원하지 않거나 HTML을 비활성화한 고객에게는 항상 일반 텍스트 버전의 이메일을 제공하세요.

이 가이드가 반응형 이메일 템플릿을 만들기 위한 기본 프레임워크를 제공하기를 바랍니다. 이메일 디자인에 익숙해지면 더 복잡한 레이아웃과 스타일을 실험해 볼 수 있습니다.

즐거운 코딩하세요!

무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요