이메일 뉴스레터 구독 폼은 웹사이트 방문자를 정기적인 독자로 전환하는 가장 효과적인 도구입니다. CSS를 활용하면 디자인이 세련되고 사용성이 뛰어난 구독 양식을 간단한 코드만으로 완성할 수 있습니다. 아래에서 전체 예제 코드와 함께 주요 스타일링 포인트를 자세히 살펴보겠습니다.
CSS 이메일 뉴스레터 예제 코드
다음은 HTML과 CSS로 구현한 이메일 뉴스레터 구독 폼의 전체 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;}
h1{
text-align: center;
}
form {
border: 3px solid #f1f1f1;
padding: 20px;
background-color: #f3f3f3;
max-width: 800px;
margin:auto;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: rgb(236, 255, 61);
color: rgb(0, 0, 0);
border: none;
font-size: 25px;
font-weight: bolder;
}
input[type=submit]:hover {
background-color: rgb(255, 238, 0);
}
</style>
<body>
<h1>Email Newsletter Example</h1>
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
<div>
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
</label>
<input type="submit" value="Subscribe">
</div>
</form>
</body>
</html>
코드 핵심 포인트
- 폼 중앙 정렬:
max-width: 800px과margin: auto를 사용해 어떤 화면 크기에서도 구독 폼이 화면 중앙에 배치됩니다. - 입력 필드 스타일링:
width: 100%와box-sizing: border-box를 적용해 이름·이메일 입력란이 폼 너비에 맞춰 깔끔하게 정렬됩니다. - 구독 버튼 강조: 형광 노란색 계열의 배경색과 굵은 글씨체로 버튼의 시각적 존재감을 높여 클릭률을 끌어올립니다.
- 호버 효과:
:hover가상 클래스를 활용해 마우스를 올리면 버튼 색상이 진한 노란색으로 변하도록 하여 상호작용을 유도합니다. - 필수 입력 검증:
required속성으로 이름과 이메일 주소가 입력되지 않으면 제출되지 않도록 처리했습니다. - 구독 옵션 체크박스: 기본 선택된 'Daily Newsletter' 체크박스를 통해 사용자가 구독 빈도를 직접 조절할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 이메일 뉴스레터 구독 폼이 화면에 나타납니다.
