방법 - 이메일 뉴스레터
CSS로 이메일 뉴스레터를 만드는 방법을 알아보세요.
뉴스레터 구독
뉴스레터 blabla를 구독해야 하는 이유에 대한 Lorem ipsum 텍스트입니다. 뉴스레터 blabla를 구독해야 하는 이유에 대한 Lorem ipsum 텍스트입니다. 뉴스레터 blabla를 구독해야 하는 이유에 대한 Lorem ipsum 텍스트입니다.
뉴스레터를 만드는 방법
1단계) HTML 추가
<form> 요소를 사용하여 입력을 처리합니다. PHP 튜토리얼 에서 이에 대해 자세히 알아볼 수 있습니다 . 그런 다음 "제출" 버튼과 함께 각 필드에 대한 입력을 추가합니다.
예시
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<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>
</div>
<div class="container">
<input type="submit"
value="Subscribe">
</div>
</form>
2단계) CSS 추가:
예시
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
팁: HTML 양식 에 대해 자세히 알아보려면 HTML 양식 자습서 로 이동하십시오 .
팁: 양식 요소의 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 양식 자습서 로 이동하십시오 .