티스토리 뷰

공부 노트

[올해까치] 이메일 보내기 2. 이메일 html 만들기

2021bong 2023. 6. 21. 00:28

회의 끝에 간단한 배너와 이미지가 들어가는 형태로 이메일을 보내기로 했다. 찾아보니 이메일을 html로 마크업 해서 보내면 된다길래 그렇게 진행하기로 했다!

 

먼 옛날에는 table 태그로 마크업을 하곤 했단다...

 

처음엔 html 마크업이니 div 태그로 뚝딱뚝딱 만들면 될 것이라고 생각했다. 하지만 찾아보니 이메일 도메인마다 html과 css를 지원하는 형식이 달라 이메일을 보낼 땐 table 태그로 마크업을 해야 똑같은 메일을 보장할 수 있다는 사실을 알게 되었다.

소문의.. 테이블 코딩을 내가 하게 되는구나...🥺 정말로 div 태그로 했을 때는 원하는 모양이 나오지 않았다..

div태그에 스타일도 다 정해줬는데 의도한데로 전혀 나오지 않은 이메일

 

 

서비스에 사용한 폰트도 적용해 메일을 보내고 싶었으나 gmail에서는 외부 글꼴을 지원하지 않아서 폰트 적용은 불가한 것으로 결정 났다.

웹 글꼴에 대한 이메일 클라이언트 지원 표 (출처 : 어도비 https://helpx.adobe.com/kr/fonts/using/html-email.html)

 

 

gmail과 naver메일을 기준으로 두고 진행했는데 똑같은 내용으로 보내도 화면이 다르게 나왔다.

css를 클래스로 적용했는데 gmail에서는 잘 되었으나 naver에서는 적용되지 않았다. naver에 맞추기 위해 인라인으로 스타일링해야 했다. 또 first-child와 같은 가상 클래스도 적용되지 않아서 맨 앞과 뒤에는 손수 스타일을 다르게 넣어주기로 했다.

그 밖에도 body 태그에 인라인 스타일로 배경색을 주었을 때 gmail에서는 적용되었으나 naver에서는 적용되지 않는 걸 볼 수 있었다.

body에 배경색이 적용된 지메일
body에 배경색이 적용되지 않은 네이버 메일

 

 

중간에 스타일 수정할 일이 잦아서 구획별로 나눈 다음 구구절절 인라인 스타일로 스타일링 해 메일을 완성했다. 😀 이메일 전송할 때 텍스트를 받아서 html 형식으로 변환한 다음 전송하면 된다!

def make_html_text(name, fortune, list):
    head = '''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>안녕하세요! {0}님 새해를 맞이하면서 세웠던 계획들 기억하시나요?</title>
  </head>
  <body style="background-color: #E8F1F6;">
    <table
      border="0"
      cellpadding="0"
      cellspacing="0"
      style="text-align: center; color: #000; width: 100%;
      margin: 0 auto;
      max-width: 350px;
      background-color: #E8F1F6;"
    >
      <tr>
        <td style=" width: 100%;
        max-width: 350px;
        height: 100px;
        padding-top: 36px;"><img style=" max-width: 350px;" src="배너url" alt="올해까치 배너"></td>
      </tr>
'''.format(name)
    greeting = '''<tr>
        <td style="padding: 24px 16px 36px 16px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;">
          <p style="margin: 0;">안녕하세요! {0}님.
            <br />
            새해에 세웠던 계획들 기억하시나요?<br />약속드린 데로 까치가 {0}님의 목표를 다시 알려드리기 위해 찾아왔어요!
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="까치 이미지 url" style="width: 34px;
          height: auto;
          margin-top: 12px;
          margin-bottom: 12px;"
          ></img>
        </td>
      </tr>'''.format(name)
    fortune_for_kor = ''
    fortune_desc = ''
    card_img = ''
    # 1 : love, 2 : money, 3 : relationship, 4 : ego, 5 : health
    if int(fortune) == 1:
        fortune_for_kor = "연애/결혼"
        fortune_desc = '내 운명반쪽을 찾아서'
        card_img = '연애까치 이미지 url'
    elif int(fortune) == 2:
        fortune_for_kor = "재물/돈"
        fortune_desc = '올해는 주머니 두둑한 부자'
        card_img = '재물까치 이미지 url'
    elif int(fortune) == 3:
        fortune_for_kor = "대인관계"
        fortune_desc = '넓게 두텁게 다양하게 평화롭게'
        card_img = '대인관계까치 이미지 url'
    elif int(fortune) == 4:
        fortune_for_kor = "자아실현"
        fortune_desc = '보람차고 성장하는 한 해'
        card_img = '자아실현까치 이미지 url'
    else:
        fortune_for_kor = "건강"
        fortune_desc = '건강한 몸 건강한 정신'
        card_img = '건강까치 이미지 url'
    fortune = ''' <tr>
        <td>
          <img src="{0}" style=" width: 311px;
          height: 447px;
          margin-top: 24px;
          "></img>
        </td>
      </tr>
      <tr>
        <td>
          <p style="margin: 0; margin-top: 24px;
          font-weight: 800;
          font-size: 16px;
          line-height: 24px;">까치에게 바랬던 새해 복 : {1}</p>
          <p style="margin: 0; margin-top: 4px;
          margin-bottom: 36px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;">{2}</p>
        </td>
      </tr>
      <tr><td><div style="width: 4px;
        height: 4px;
        margin: 0 auto;;
        background: #1B395F;
      border-radius: 4px;"></div></td></tr>'''.format(card_img, fortune_for_kor, fortune_desc)
    goal_list = ''
    for i, text in enumerate(list):
        if (i == 0 and len(list) > 1):
            goal_list += '''<li style="margin: 0;
            padding: 0;
            list-style: none;
            margin: 0 28px;
            padding: 12px 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
            border-bottom: 1px solid #79A8D6; padding-top: 0;">{0}</li>'''.format(
                text)
        elif (i == len(list) - 1 and len(list) > 1 or len(list) == 1):
            goal_list += '''<li style="margin: 0;
            padding: 0;
            list-style: none;
            margin: 0 28px;
            padding: 12px 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
            margin-bottom: 36px;
            padding-bottom: 0;
            border: none;">{0}</li>'''.format(text)
        else:
            goal_list += '''<li style="margin: 0;
            list-style: none;
            margin: 0 28px;
            padding: 12px 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
            border-bottom: 1px solid #79A8D6;">{0}</li>'''.format(text)
    goals = '''
      <tr>
        <td>
          <ul style="margin: 0;
          padding: 0;
          list-style: none;">
            <h2 style="margin-top: 36px;
            margin-bottom: 24px;
            padding: 0 15px;
          font-weight: 800;
          font-size: 16px;
          line-height: 24px;">{0}님의 올해 목표</h2>
            {1}
          </ul>
        </td>
      </tr>'''.format(name, goal_list)
    saygoodbye = '''
          <tr><td><div style="width: 4px;
        height: 4px;
        margin: 0 auto;;
        background: #1B395F;
      border-radius: 4px;"></div></td></tr>
      <tr>
        <td style="padding: 36px 16px 56px 16px;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;">혹시나 바쁜 일상 속에서 잠시 잊고 계셨다면<br />이 메일이 도움이 되셨길 바랍니다. <br />남은 한 해 계획한 것 모두 이루시길 바라며<br />까치가 응원합니다!</td>
      </tr>
      <tr>
        <td style="padding-bottom: 24px;">
        <div style="margin: 0 16px;
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #79A8D6;
        color: #757575;
font-weight: 400;
font-size: 12px;
line-height: 18px;">
        <p style="margin: 0; margin-bottom: 12px;">본 메일은 1회에 한하여 전송되는 이메일 입니다.<br />이후 저장된 정보는 모두 폐기됩니다.</p>
          <p style="margin: 0;">올해까치<br /><a href="mailto:10004team@gmail.com" target="_blank" style="text-decoration: none; color: #757575;">10004team@gmail.com</a></p>
        </div>
      </td>
      </tr>
    </table>
  </body>
</html>
    '''

    mytext = head + greeting + fortune + goals + saygoodbye
    return mytext

 

728x90
저작자표시

'공부 노트' 카테고리의 다른 글

[올해까치] 이메일 보내기 1. 파이썬 이메일 자동화  (0) 2023.06.12
React에서 import 할 때 ../ 안쓰고 절대 경로 쓰기  (0) 2023.03.28
[TS] React로 진행한 프로젝트를 중간에 Typescript로 변경하기 2  (1) 2023.02.27
[JS] toLocaleString()  (0) 2023.01.12
[Git] 레포 포크하고 잔디심기  (0) 2022.11.29
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함