이메일 폼 구조

https://webdesign.tutsplus.com/ko/build-an-html-email-template-from-scratch--webdesign-12770a

https://heropy.blog/2018/12/30/html-email-template/

해당 링크 두개 참고해서 800px 고정픽셀로 제작

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>메일 알림</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style type="text/css">
    /* GENERAL STYLE RESETS */
    body, #bodyTable { width:100% !important; height:100% !important; margin:0; padding:0; }
    #bodyTable { padding: 20px 0 30px 0; background-color: #ffffff; }
    img, a img { border:0; outline:none; text-decoration:none; }
    .imageFix { display:block; }
    table, td { border-collapse:collapse; }

    /* CLIENT-SPECIFIC RESETS */
    /* Outlook.com(Hotmail)의 전체 너비 및 적절한 줄 높이를 허용 */
    .ReadMsgBody{ width: 100%; }
    .ExternalClass{ width: 100%; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    /* Outlook 2007 이상에서 Outlook이 추가하는 테이블 주위의 간격을 제거 */
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    /* Internet Explorer에서 크기가 조정된 이미지를 렌더링하는 방식을 수정 */
    img { -ms-interpolation-mode: bicubic; }
    /* Webkit 및 Windows 기반 클라이언트가 텍스트 크기를 자동으로 조정하지 않도록 수정 */
    body, table, td, p, a, li, blockquote { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
  </style>
  
  <body>
  <table border="0" cellpadding="0" cellspacing="0" width="100%"
      id="bodyTable">
      <tr>
        <td>
          <table align="left" border="0" cellpadding="0" cellspacing="0" width="800">
          ...
  </body>

코드는 이렇게 기본 세팅해서 사용했다

[네이버]

PC : align: center 적용 x -> margin: 0 auto

모바일: font-size 오류나서 각각 사용

[공통]

- SVG태그가 구글 메일에서 보이지 않는다

blob 가상경로로 이미지 넣어주거나 이것도 오류가 있을 수 있어서 로고이미지 부분을 간소화처리/삭제함

저작자표시 (새창열림)

'Programming' 카테고리의 다른 글

라즈베리파이 압축풀기 (0)	2020.02.11
Raspberrypi apache2 자동실행 명령어 (0)	2020.02.11
패스워드 암호화 관련 (0)	2019.04.02
서버 도메인 구매 (0)	2017.05.06