<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>[회사명입력] 이메일 인증</title>
<style>
/* 전체 영역 스타일링 */
body {
background-color: #f9f9f9;
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
line-height: 1.6;
margin: 0;
padding: 0;
text-align: center;
}
/* 로고 이미지 스타일링 */
.logo img {
width: 120px;
margin: 40px auto;
}
/* 인증코드 영역 스타일링 */
.code {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
padding: 40px;
max-width: 500px;
}
.code h2 {
font-size: 24px;
font-weight: 700;
margin-top: 0;
}
.code p {
font-size: 16px;
margin: 20px 0;
}
.code .highlight {
background-color: #ffc107;
border-radius: 4px;
color: #fff;
display: inline-block;
font-size: 28px;
font-weight: 700;
padding: 10px 20px;
margin: 20px 0;
}
/* 링크 영역 스타일링 */
.link {
color: #999;
font-size: 14px;
margin: 40px auto;
}
</style>
</head>
<body>
<div class="logo">
<img src="img/text=Logo" alt="로고">
</div>
<div class="code">
<h2>[회사명입력] 이메일 인증</h2>
<p>안녕하세요, 고객님!</p>
<p>아래의 인증코드를 확인해 주세요.</p>
<div class="highlight">123456</div>
<p>감사합니다.</p>
</div>
<div class="link">
<p>[회사명입력] | 12345 서울시 강남구 테헤란로 1234 | Tel. 02-123-4567</p>
</div>
</body>
</html>
위의 방법으로 해도되고, 만약에 Java 메일같은것을 사용 할땐 HTML 태그안에 style 속성이 추가가 되어야 하기때문에 아래와 같은방법으로 작성하면됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>[회사명입력] 이메일 인증</title>
</head>
<body style="background-color: #f9f9f9; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.6; margin: 0; padding: 0; text-align: center;">
<div style="width: 100%; max-width: 640px; margin: 0 auto;">
<div style="text-align: center;">
<img src="img/Logo" alt="로고" style="width: 120px; margin: 40px auto;">
</div>
<div style="background-color: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.2); margin: 40px auto; padding: 40px; max-width: 500px;">
<h2 style="font-size: 24px; font-weight: 700; margin-top: 0;">[회사명입력] 이메일 인증</h2>
<p style="font-size: 16px; margin: 20px 0;">안녕하세요, 고객님!</p>
<p style="font-size: 16px; margin: 20px 0;">아래의 인증코드를 확인해 주세요.</p>
<div style="background-color: #ffc107; border-radius: 4px; color: #fff; display: inline-block; font-size: 28px; font-weight: 700; padding: 10px 20px; margin: 20px 0;">123456</div>
<p style="font-size: 16px; margin: 20px 0;">감사합니다.</p>
</div>
<div style="color: #999; font-size: 14px; margin: 40px auto;">
<p style="margin: 0;">[회사명입력] | 12345 서울시 강남구 테헤란로 1234 | Tel. 02-123-4567</p>
</div>
</div>
</body>
</html>
하지만, 스타일링코드가 HTML 태그에 직접 작성되기때문에 가독성이 떨어지고 수정이 어렵지만 사용목적에 맞춰서 개발하면 좋을것같습니다.
'HTML5+CSS3 > HTML5😊' 카테고리의 다른 글
| [HTML5] 아이폰 input file 사용시 카메라 호출방법 (0) | 2023.01.26 |
|---|---|
| <textarea> 태그 공백 오류 (0) | 2021.12.03 |
