취업/E-mail HTML

[Email] 이메일 HTML 폼 양식 만들기.

카슈밀 2023. 5. 8. 14:38
반응형

별건 없고 그냥 

table 안에 테이블 호출 같은 중첩구조 쓰지말고(꼬이기 딱 좋다.),

한줄에 하나의 테이블로 그려주는 게 최고 좋다.

아니면 그 안에서 tr, td로만...

간단하게 테이블 한번 호출하고, 여러 태그 사용하지 말기.

span으로만 작성하길 권장한다.

 

이미지의 경우 구글 이미지 호스팅 서버가 막아서 SVG파일은 사용을 지양해야한다.

일반 HTML 양식이 아니라 XHTML이라 해당 부분 반드시 메일 수신체크로 확인해봐야 함.

발송시 멀쩡해도 실제로 HTML이 수신하는 경우 깨짐이 발생해서 계속 체크해봐야한다.

 

링크해준 사이트의 경우 중첩구조라서, 그냥 놔두고 썼는데 이거때문에 엄격한 메일 회사인 지메일의 수신시 깨져버렸다.

네이버는 멀쩡했다....

 

center 태그는 가운데 정렬태그라 해당 코드 사용하면 중앙 정렬된다.

<!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" />
      <title>HTML Email Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
    	<div style="width: 100%; max-width: 700px; margin: 0 auto;">
        	<center>
              <!-- OUTERMOST CONTAINER TABLE -->
              <table border="0" cellpadding="0" cellspacing="0" style="width:700px;" id="bodyTable">
                <tr>
                  <td>

                    <!-- 600px - 800px CONTENTS CONTAINER TABLE -->
                    <table border="0" cellpadding="0" cellspacing="0" width="700">
                      <tr>
                        <td>

                        </td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>
      		</center>
      	</div>
    </body>
</html>

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

 

HTML Email Template 만들기

서비스 이메일 푸쉬에 사용할 HTML Email Template를 제작하기 위해 필요한 내용들을 살펴봅니다. 표준 코딩이 아니기 때문에 주의해야 하는 중요한 개념들을 정리합니다.

heropy.blog

 

728x90