반응형
HTML로 마케팅용 메일 작성하기
HTML 이메일 : 이메일 본문에 스타일을 적용하거나, 이미지를 삽입하는 방법입니다.
HTML 이메일 기본 구조 : 이메일에 이미지를 추가하고, 텍스트 스타일을 설정하며, 배경색을 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Special Offer</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.email-container {
width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
}
h1 {
color: #333;
}
.offer {
background-color: #ff9800;
color: white;
padding: 10px;
text-align: center;
font-size: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="email-container">
<h1>Special Offer Just for You!</h1>
<p>Dear Customer,</p>
<p>We are excited to offer you a special discount on our premium products. Don't miss out!</p>
<div class="offer">
<p>Get 20% off your next purchase!</p>
</div>
<img src="offer-image.jpg" alt="Special Offer Image">
<p>Click below to shop now:</p>
<a href="https://www.example.com" style="background-color: #ff9800; color: white; padding: 10px 20px; text-decoration: none;">Shop Now</a>
</div>
</body>
</html>
See the Pen CSS practice by Cheolho Jang (@chiro-J) on CodePen.
- 주요 구성 요소:
- 배경색: 이메일의 배경을 설정하여 이메일이 더 시각적으로 매력적이게 만듭니다.
- 이미지 삽입: 마케팅 이메일에 이미지를 삽입하여, 더 매력적인 콘텐츠를 제공합니다.
- 버튼 스타일: a 태그를 사용하여 스타일링된 버튼을 생성할 수 있습니다.
- 반응형 디자인: 이메일 디자인이 다양한 화면 크기에서 잘 보이도록 CSS를 사용하여 스타일을 조정합니다.
반응형
'Front-End > HTML&CSS' 카테고리의 다른 글
| CSS 기초 #7 (column, table) (0) | 2025.06.19 |
|---|---|
| CSS 기초 #6 (box, position) (1) | 2025.06.18 |
| CSS 기초 #4 (배경, 그라디언트) (0) | 2025.06.17 |
| CSS 기초 #3 (color) (0) | 2025.06.17 |
| CSS 기초 #2 (font, text, paragraph, list) (0) | 2025.06.17 |
