webworld888/resources/markup/email/element.html
2021-10-26 19:14:12 +09:00

276 lines
19 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>XepressEngine</title>
</head>
<body>
<!-- 공통 환경 구성 -->
<table style="padding:0;margin:0;border:0;width:100%;border-spacing: 0;border-collapse:collapse;table-layout:fixed;color:#333;font-family:'Malgun Gothic', sans-serif;font-size:15px;line-height:1.6em;letter-spacing:-.01em;word-break:break-all;">
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0 10px;margin:0;border:0;">
<table style="padding:0;margin:0 auto;border:0;max-width:536px;background:#fff;border-spacing:0;border-collapse:collapse;table-layout:fixed;">
<tbody>
<tr>
<td>
<!-- 이메일 레이아웃 -->
<table style="padding:0;margin:0 auto;border:0;max-width:536px;width:100%;background:#fff;border-spacing:0;border-collapse:collapse;table-layout:fixed;">
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;height:35px;"></td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;height:25px;text-align: center;">
<a href="https://www.xpressengine.io/" target="_blank" style="padding:0;margin:0;border:0;"><img style="padding:0;border:0;width:91px;height:30px;margin:0;" src="https://www.xpressengine.io/plugins/official_homepage/email/img/img-email-logo.png" alt="XE3 logo"/>
</a>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:10px 0 71px 0;margin:0;border:0;width:100%;height:10px;">
<hr style="margin:0;border:0;background:#DADCE0;height:1px;">
<strong style="display:inline-block;width:100%;font-size:14px;font-weight:normal;text-align:center;color: #757575;">신규 서비스 소식</strong>
</td>
</tr>
<!-- 내용 시작 -->
<!-- 제목 스타일 -->
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h2 style="padding:0;margin:0 0 20px 0;border:0;font-size:28px;line-height:36px;font-weight:bold;letter-spacing:-0.01em;word-break:keep-all;color:#333;">청개구리 이야기</h2>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<p style="padding:0;margin:0;border:0;">
옛날에 부모의 말이라면 덮어놓고 반대로만 하던 청개구리가 있었다. 어머니가 죽으면서 산에 묻히려고, 자식에게 반대로 냇가에 묻어달라고 하였다. 불효를 뉘우친 청개구리는 유언대로 냇가에 묻었다. 그 뒤 비가 올듯하면 무덤이 떠내려갈 것이 걱정되어 슬프게 운다.
</p>
<hr style="padding:32px 0;margin:0;border:0;">
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="padding:0;margin:0 0 20px 0;border:0;font-size:18px;line-height:24px;font-weight:bold;letter-spacing:-0.01em;word-break:keep-all">내용</h3>
<hr style="margin:0;border:0;background:#DADCE0;height:1px;">
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="margin:0;padding:40px 0 16px 0;font-size:15px;color:#313131;"><i style="display:inline-block;width:5px;height:5px;background-color:#313131;margin:0 16px 0 0;border-radius:5px;vertical-align:3px;"></i>속박물지(續博物志)</h3>
<p style="padding:0 0 0 20px;margin:0;border:0;">
중국 당나라 이석(李石)의 『속박물지(續博物志)』 권9, 은성식(殷成式)의 『유양잡조속집(酉陽雜俎續集)』 권4, 10세기말 송나라 때에 나온 『태평광기(太平廣記)』 권39 등에 실려 있다. 우리나라의 여러 지역에서 구전되고 있다.
</p>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="margin:0;padding:40px 0 16px 0;font-size:15px;color:#313131;"><i style="display:inline-block;width:5px;height:5px;background-color:#313131;margin:0 16px 0 0;border-radius:5px;vertical-align:3px;"></i>조선민족설화의 연구</h3>
<p style="padding:0 0 0 20px;margin:0;border:0;">
이 설화는 비가 오려고 할 때면 청개구리가 운다는 경험적 사실에 근거하여 이야기를 구성하고 있어서 기발한 예술적 착상이 두드러진다. 효(孝)를 주제로 하는 이 설화를 바탕으로, 말 안 듣는 아이를 ‘청개구리 같다.’라고 하는 관습적 비유가 이루어진 것을 보면, 이 설화는 우리 민족에게 깊은 뿌리를 내리고 있다 하겠다.
</p>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;text-align:center;">
<hr style="padding:20px 0;margin:0;border:0;">
<a href="#Link#" target="_blank" style="text-decoration:underline;color:#2684ff;font-size:15px;">한국민족문화대백과 </a>
<hr style="padding:32px 0;margin:0;border:0;">
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="padding:0;margin:0 0 20px 0;border:0;font-size:18px;line-height:24px;font-weight:bold;letter-spacing:-0.01em;word-break:keep-all">참고문헌</h3>
<hr style="margin:0;border:0;background:#DADCE0;height:1px;">
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="margin:0;padding:40px 0 16px 0;font-size:15px;color:#313131;">한국민족문화대백과</h3>
<ul style="padding:0 0 0 20px;margin:10px 0 0 0;">
<li style="padding:0;margin:5px 0 0 20px;border:0;list-style:disc;">태평광기</li>
<li style="padding:0;margin:5px 0 0 20px;border:0;list-style:disc;">한국구비문학대계</li>
<li style="padding:0;margin:5px 0 0 20px;border:0;list-style:disc;">
한일민담의 비교연구
<ul style="padding:0;margin:10px 0 0 0;">
<li style="padding:0;margin:5px 0 0 20px;border:0;list-style:circle;">오성과 한음설화</li>
<li style="padding:0;margin:5px 0 0 20px;border:0;list-style:circle;">백일홍설화</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="margin:0;padding:40px 0 16px 0;font-size:15px;color:#313131;">한국민족문화대백과</h3>
<ol style="padding:0 0 0 20px;margin:10px 0 0 0;">
<li style="padding:0 0 0 5px;margin:5px 0 0 15px;border:0;">순서 없는 목록은 각 리스트 상단 5px 여백이 있습니다.</li>
<li style="padding:0 0 0 5px;margin:5px 0 0 15px;border:0;">두번째 목록</li>
<li style="padding:0 0 0 5px;margin:5px 0 0 15px;border:0;">세번째 목록</li>
</ol>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<h3 style="margin:0;padding:40px 0 16px 0;font-size:15px;color:#313131;">한국민족문화대백과</h3>
<ul style="padding:0 0 0 8px;margin:10px 0 0 0;">
<li style="padding:0 0 0 30px;margin:4px 0 0 0;list-style:none;background:url(https://www.xpressengine.io/plugins/official_homepage/email/img/icon-email-blue-check.png) no-repeat left top 3px;background-size:18px;font-size:14px;">태평광기</li>
<li style="padding:0 0 0 30px;margin:4px 0 0 0;list-style:none;background:url(https://www.xpressengine.io/plugins/official_homepage/email/img/icon-email-blue-check.png) no-repeat left top 3px;background-size:18px;font-size:14px;">한국구비문학대계</li>
<li style="padding:0 0 0 30px;margin:4px 0 0 0;list-style:none;background:url(https://www.xpressengine.io/plugins/official_homepage/email/img/icon-email-blue-check.png) no-repeat left top 3px;background-size:18px;font-size:14px;">한일민담의 비교연구</li>
</ul>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;">
<hr style="padding:32px 0;margin:0;border:0;">
<hr style="margin:0;border:0;background:#DADCE0;height:1px;">
<hr style="padding:32px 0;margin:0;border:0;">
</td>
</tr>
<tr>
<td style="padding:0;margin:0;border:0;width:100%;">
<a href="#Link#" target="_blank" style="display:inline-block;padding:9px 52px;margin:0;border:0;border-radius:3px;font-size:15px;color:#fff;text-decoration:none;background:#345bd9;text-align: center;">바로가기 버튼</a>
<hr style="padding:32px 0;margin:0;border:0;">
</td>
</tr>
<tr>
<td style="padding:20px 0;margin:0;border:0;width:100%;background-color: #f4f5f7;">
<table style="padding:0;margin:0 auto;border:0;max-width:536px;width:100%;border-spacing:0;border-collapse:collapse;table-layout:fixed;">
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;width:120px;height:35px;text-align:center;font-size:14px;">제목</td>
<td style="padding:0 0 0 20px;color: #345bd9;">내용을 입력하세요</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;width:120px;height:35px;text-align:center;font-size:14px;">제목</td>
<td style="padding:0 0 0 20px;color: #345bd9;">내용을 입력하세요</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;width:120px;height:35px;text-align:center;font-size:14px;">제목</td>
<td style="padding:0 0 0 20px;color: #345bd9;">내용을 입력하세요</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0;margin:0;border:0;width:100%;">
<hr style="padding:32px 0;margin:0;border:0;">
<table style="padding:0;margin:0 auto;border:0;max-width:536px;width:100%;background:#fff;border-spacing:0;border-collapse:collapse;table-layout:fixed;font-size:14px;">
<thead style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;background-color:#f4f5f7;">
<td style="padding:0;margin:0;border: solid 1px #e5e5e5;width:60%;height:35px;text-align:center;">사이트 정보</td>
<td style="padding:0;border: solid 1px #e5e5e5;width:20%;border-left:none;text-align:center;">익스텐션</td>
<td style="padding:0;border: solid 1px #e5e5e5;width:20%;border-left:none;text-align:center;">테마</td>
</tr>
</thead>
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:10px 0 10px 20px;margin:0;border:solid 1px #e5e5e5;width:60%;height:35px;font-size:14px;">
XE3 공식홈페이지 <br />
<a href="#">www.xpressengine.io</a>
</td>
<td style="padding:0;border: solid 1px #e5e5e5;width:20%;border-left:none;text-align:center;">2</td>
<td style="padding:0;border: solid 1px #e5e5e5;width:20%;border-left:none;text-align:center;">1</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0;margin:0;border:0;width:100%;">
<hr style="padding:32px 0;margin:0;border:0;">
<table style="padding:0;margin:0 auto;border:0;max-width:536px;width:100%;background:#fff;border-spacing:0;border-collapse:collapse;table-layout:fixed;">
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border: solid 1px #e5e5e5;width:120px;height:35px;background-color:#f4f5f7;text-align:center;font-size:14px;">아이디</td>
<td style="padding:0 0 0 20px;border: solid 1px #e5e5e5;border-left:none;">junmh@xpressengine.com</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- 푸터 -->
<table style="padding:0;border:0;width:100%;border-spacing: 0;border-collapse:collapse;table-layout:fixed;color:#4a4a4a;font-family:'Malgun Gothic', sans-serif;">
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;">
<table style="padding:0;margin:0;border:0;max-width:536px;width:100%;margin:0 auto;border-spacing:0;border-collapse:collapse;table-layout:fixed;">
<tbody style="padding:0;margin:0;border:0;">
<tr style="padding:0;margin:0;border:0;">
<td style="padding:68px 0 28px 0;margin:0;border:0;width:100%;height:1px;">
<hr style="margin:0;border:0;background:#DADCE0;height:1px;">
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;text-align:center;">
<a href="#"><img src="https://www.xpressengine.io/assets/core/common/img/email/ico-xe.png" style="padding:0;margin:0 5px;border:0;width:36px;height:36px;" /></a>
<a href="#"><img src="https://www.xpressengine.io/assets/core/common/img/email/ico-facebook.png" style="padding:0;margin:0 5px;border:0;width:36px;height:36px;" /></a>
<a href="#"><img src="https://www.xpressengine.io/assets/core/common/img/email/ico-medium.png" style="padding:0;margin:0 5px;border:0;width:36px;height:36px;" /></a>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;height:20px;"></td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;text-align:center;">
<p style="padding:0;margin:0;border:0;font-size:13px;line-height:1.5em;color:#777;">본 메일은 발신 전용 메일입니다.</p>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;height:10px;"></td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;text-align:center;">
<p style="padding:0;margin:0;border:0;font-size:13px;line-height:1.5em;color:#777;">Copyright © 2019 엑스이팩토리 Co. All Rights Reserved.</p>
</td>
</tr>
<tr style="padding:0;margin:0;border:0;">
<td style="padding:0;margin:0;border:0;width:100%;height:55px;"></td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</body>
</html>