HTML 및 CSS로 이메일 템플릿을 만드는 방법은 무엇입니까?
게시 됨: 2020-02-10디자이너이자 개발자로서 어느 날 클라이언트는 일종의 뉴스레터용 이메일 템플릿을 요청할 것입니다. HTML과 CSS에 대한 지원에 큰 격차가 있기 때문에 이메일 템플릿은 그다지 흥미롭지 않다고 말해야 합니다. 오늘날의 시대에는 HTML5와 CSS3를 추진하고 있기 때문에 그렇지 않을 것이라고 생각할 것입니다. 그러나 이메일을 렌더링할 때 그렇지 않다는 점을 유감스럽게 생각합니다.
HTML 이메일 템플릿을 생성할 때 가장 먼저 염두에 두어야 할 점은 모든 CSS 스타일링이 인라인으로 이루어져야 한다는 사실입니다. 다른 경우에는 이것은 매우 큰 금지 사항입니다. 그러나 외부 CSS에 대한 지원이 거의 없고 헤드에 있는 CSS도 있으므로 인라인이 이를 수행하는 방법입니다. 추가적으로 – 그리고 나는 당신이 이것에 대해 들어본 적이 있을 것이라고 확신합니다 – 템플릿은 DIV가 아니라 TABLE로 생성되어야 합니다. 다시 한번 말하지만 이것은 불행한 일이지만 가야 할 길입니다. 이메일이 전반적으로 그렇게 크지 않다는 점을 감안할 때 이메일을 디자인하고 만드는 것은 어렵지 않습니다. 웹이나 모바일 디자인에 비해 지루할 뿐입니다.
- 디자인
- 구조
- 스타일
- 콘텐츠
- 인라인 스타일
- 신체
- 테이블
- 첫 번째 행 – 머리글
- 두 번째 행
- 세 번째 행
- 네 번째 행
- 다섯 번째 행 – 바닥글
- 마지막 단어
디자인
추천: 최신 CSS 프레임워크를 사용하여 디자인 프로세스 속도를 높이는 방법은 무엇입니까?
구조
HTML 페이지의 본문 내에 아래 코드를 붙여넣습니다. 단순히 코드를 보면 이 이메일의 구조가 별로 중요하지 않다는 것을 알 수 있습니다. 이메일이 결코 복잡하지 않아야 하기 때문에 이는 실제로 매우 좋은 일입니다. 지금까지는 전체 표의 너비를 지정하고 표의 셀 사이에 아무 것도 지정하지 않는 것만으로도 스타일 지정이 매우 적습니다.
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>스타일
자, 이제 문서 내용에 CSS를 추가하겠습니다. 그것은 단지 재설정과 링크 색상 및 스타일 정의에 불과합니다. 이메일 클라이언트에서 종종 무시하는 CSS를 여기에 입력할 때 매우 주의할 것입니다.
<style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>콘텐츠
테이블을 콘텐츠로 채울 때가 왔습니다. 이 튜토리얼의 시작 부분에서 위에서 제공한 파일 내에서 이미지를 찾을 수 있습니다. 이제 이 이메일에 포함될 모든 텍스트와 이미지를 입력해야 합니다. 튜토리얼에서 하이퍼링크를 실제로 링크할 필요가 없으며 자신의 이미지도 자유롭게 사용할 수 있습니다. 지금까지 코드 내에서 크기가 설정되었는지 확인하기 위해 세 이미지 모두의 너비를 정의했습니다.
매우 알고 있어야 하는 것이 있습니다. 이미지는 크기가 작고 b: 이미지를 잘 설명하는 alt 태그가 있는 한 이메일에 적합합니다. 이메일에 이미지가 나타나려면 이 이메일을 받는 사람이 이미지가 표시되도록 허용해야 합니다. 그들이 그렇게 하지 않는다면 그들이 무엇을 기대해야 하는지 말할 것이 없습니다. 시각 장애인에 대한 설명을 제공하지 않는 경우에도 접근성 문제입니다. 그러나 그것은 또 다른 이야기입니다. 따라서 교훈은 다음과 같습니다. 항상 alt 태그가 있는 작은 이미지를 사용하십시오!
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>인라인 스타일
우리가 할 마지막 일은 이 HTML 이메일 템플릿에 인라인 CSS 스타일을 제공하는 것입니다. 그것은 당신이 지금까지 볼 수 있듯이 이메일의 모양을 만드는 것입니다. 이 부분은 너무 무리하지 않도록 작은 조각으로 나눌 것입니다.
당신은 또한 좋아할 수 있습니다: 당신의 이메일 제목 줄을 더 클릭하기 쉽게 만드는 7가지 유용한 팁.
신체
먼저 전체 이메일 페이지의 배경색과 기본 글꼴 크기 및 글꼴 색상을 설정해 보겠습니다.
<body bgcolor="#f7d973" ></body>테이블
다음으로 해야 할 일은 이메일 내용을 중앙에 배치하고 고유한 배경색을 제공하여 눈에 띄게 하는 것입니다.
첫 번째 행 – 머리글
첫 번째 행의 셀 내에서 많은 일이 진행되고 있습니다. 인라인 스타일은 <tr>이 아니라 <td>에 있습니다. 여기서 우리가 하고 있는 것은 로고와 일치하는 새로운 배경색입니다. 또한 패딩 및 정렬도 있습니다. 이제 대체 텍스트가 기본적으로 검은색이기 때문에 텍스트 색상을 흰색으로 변경하겠습니다. 이 배경에서는 볼 수 없으므로 텍스트의 색상을 변경하여 볼 수 있도록 하고 있습니다. 당신에게는 쓸모없게 보일지 모르지만 내가 말했듯이 이것은 기본적으로 허용되는 이미지가 없는 사람들에게 매우 중요합니다.
<tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>두 번째 행
행 내에는 다시 한 번 두 열에 걸쳐 있는 하나의 셀만 있습니다. 이 셀은 약간의 패딩을 추가하고 맨 아래에 있는 내용을 아래 행과 분리하기 위해 분리선을 추가하여 약간 조작되고 있습니다. 여백을 통해 공간을 확보하는 큰 헤드라인도 있습니다. 그리고, 그것이 이 행에 대한 것입니다.
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>세 번째 행
여기 두 셀에 대해 너비와 패딩을 모두 설정합니다. 세포가 반으로 고르게 분할되도록 정확히 동일합니다. 그 외에도 셀에 이미지와 그에 대한 텍스트가 채워져 있기 때문에 다른 것은 없습니다.
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>네 번째 행
이것은 지금까지 이 HTML 이메일 템플릿에서 가장 양식화된 섹션입니다. 아래 코드에서 볼 수 있듯이 많은 일이 진행 중입니다. 먼저 전체 행에 새로운 배경색과 텍스트 색상이 추가되어 헤더에서와 같이 텍스트가 잘 보이도록 합니다. 첫 번째 및 두 번째 셀과 해당 내용 모두 정확히 동일한 스타일 변경 사항을 가져옵니다. 첫째, 셀 자체에 새로운 배경과 텍스트 색상이 적용됩니다. 그런 다음 제목 내의 링크가 노란색으로 변경됩니다. 마지막으로 마지막 단락에 밑줄이 그어져 있고 일부 구분을 추가하기 위해 여백도 추가됩니다. 내가 말했듯이, 두 번째 셀과 그 내용은 정확히 같은 양식화되고 있습니다.
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider"><tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider">다섯 번째 행 – 바닥글
그리고 마지막으로 바닥글입니다. 여기에서는 거의 진행되지 않습니다. 패딩을 통해 약간의 간격을 두기만 하면 됩니다!
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>마지막 단어
이 튜토리얼은 조금 길지만 이제 HTML 이메일 템플릿을 처음부터 만드는 데 필요한 것이 무엇인지 이해하셨기를 바랍니다. 복잡한 개념은 아니지만 지루할 수 있습니다. 이제 나가서 멋진 고급 이메일을 만들 차례입니다! 이메일 템플릿을 만드는 몇 가지 기술을 결합하여 더욱 독특하게 만들 수 있습니다.
이 기사는 Hannah Butler가 작성했습니다. 그녀는 웹 개발자이자 디자이너로 일하고 있습니다. 게다가 그녀는 자신의 경험을 기사 형식으로 공유하는 것을 좋아합니다. 이 경우 그녀는 WriteMyPaper4Me.co 웹사이트에 자신의 섹션이 있습니다. 앞으로 그녀는 다른 사람들에게 자신의 작업 방식을 설명하기 위해 블로그를 쓰기 시작할 것입니다.