메일 템플릿 : 반응형 웹 템플릿

메일 템플릿 : 반응형 웹 템플릿 - Minty

썬더메일 활용방안/메일 템플릿
2019. 3. 7.

메일 템플릿 : 반응형 웹 템플릿 - Minty

미리보기는 하단을 참고하세요.

<title>Minty-Multipurpose Responsive Email Template</title>

/* Client-specific Styles */

#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */

#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}

a img {border:none;}

.image_fix {display:block;}

p {margin: 0px 0px !important;}

table td {border-collapse: collapse;}

table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

/*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/

/*STYLES*/

table[class=full] { width: 100%; clear: both; }

/*################################################*/

/*IPAD STYLES*/

/*################################################*/

@media only screen and (max-width: 640px) {

a[href^="tel"], a[href^="sms"] {

text-decoration: none;

color: #ffffff; /* or whatever your want */

pointer-events: none;

cursor: default;

}

.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {

text-decoration: default;

color: #ffffff !important;

pointer-events: auto;

cursor: default;

}

table[class=devicewidth] {width: 440px!important;text-align:center!important;}

table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}

table[class="sthide"]{display: none!important;}

img[class="bigimage"]{width: 420px!important;height:219px!important;}

img[class="col2img"]{width: 420px!important;height:258px!important;}

img[class="image-banner"]{width: 440px!important;height:106px!important;}

td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}

td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}

img[class="logo"]{padding:0!important;margin: 0 auto !important;}

}

/*##############################################*/

/*IPHONE STYLES*/

/*##############################################*/

@media only screen and (max-width: 480px) {

a[href^="tel"], a[href^="sms"] {

text-decoration: none;

color: #ffffff; /* or whatever your want */

pointer-events: none;

cursor: default;

}

.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {

text-decoration: default;

color: #ffffff !important;

pointer-events: auto;

cursor: default;

}

table[class=devicewidth] {width: 280px!important;text-align:center!important;}

table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}

table[class="sthide"]{display: none!important;}

img[class="bigimage"]{width: 260px!important;height:136px!important;}

img[class="col2img"]{width: 260px!important;height:160px!important;}

img[class="image-banner"]{width: 280px!important;height:68px!important;}

}

</style>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

If you cannot read this email, please <a class="hlite" style="color: rgb(13, 185, 234); text-decoration: none;" href="#">click here</a>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</div>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<a style="color: rgb(255, 255, 255); text-decoration: none;" href="#">ABOUT</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div><div class="block">

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

LOREM IPSUM

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

NICE HEADING HERE

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<a style="text-align: center; color: rgb(255, 255, 255); text-decoration: none;" href="#">Download</a>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

LOREM IPSUM

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

LOREM IPSUM

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

NICE HEADING HERE

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

LOREM IPSUM

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum.

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

LOREM IPSUM

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum.

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

</td>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

Lorem Ipsum

</td>

</tr>

<tr>

</tr>

<tr>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</td>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

Lorem Ipsum

</td>

</tr>

<tr>

</tr>

<tr>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</td>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

Lorem Ipsum

</td>

</tr>

<tr>

</tr>

<tr>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

LOREM IPSUM

</td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tbody>

<tr>

</span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

If you don't want to receive updates. please <a class="hlite" style="color: rgb(13, 185, 234); text-decoration: none;" href="#">unsubscribe</a>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

Minty-Multipurpose Responsive Email Template

If you cannot read this email, please click here

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

NICE HEADING HERE

Lorem ipsum dolor sit amet

Download

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

NICE HEADING HERE

Lorem ipsum dolor sit amet

LOREM IPSUM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum.

LOREM IPSUM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum.

Lorem Ipsum

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem Ipsum

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem Ipsum

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

LOREM IPSUM

If you don't want to receive updates. please unsubscribe

안녕하세요. 썬더메일입니다. 영업문의: 070-7095-9792 , 기술문의: 070-7095-9794 , 메일문의처
지원 서비스: 대량ㆍ자동메일(API포함), 대량ㆍ자동SMS, 카카오톡 알림톡, 설문조사(와이즈서베이)

썬더메일 블로그

메일 템플릿 : 반응형 웹 템플릿 - Minty

티스토리툴바

Copyright © Andwise Inc. All Rights Reserved Tel: 070-7095-9792

티스토리툴바

'썬더메일 활용방안/메일 템플릿' 관련 글

메일 마케팅을 위한 메일 본문 작성 방법 소개

메일 템플릿 - 사각박스 뉴스레터 형

메일 템플릿 : 일반형 - 공지_이미지포함_1단

메일 템플릿 : 반응형 -공지_이미지포함_1단

Copyright © Andwise Inc. All Rights Reserved Tel: 070-7095-9792

티스토리툴바