쿠폰 생성 방법

CSS를 사용하여 '쿠폰'을 생성하는 방법을 배우세요.

회사 로고
럭킨 커피
구매 20% 할인

Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.

프로모션 코드 사용: BOH232

만료: 2025년 1월 3일

직접 시도해 보세요

쿠폰 생성 방법

第一步 - HTML 추가:

<div class="coupon">
  <div class="container">
    <h3>회사 로고</h3>
  </div>
  <img src="hamburger.jpg" alt="아바타" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>구매 20% 할인</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>프로모션 코드 사용: <span class="promo">BOH232</span></p>
    <p class="expire">만료: 2021년 1월 3일</p>
  </div>
</div>

第二步 - CSS 추가:

.coupon {
  border: 5px dotted #bbb; /* 점선 경계선 */
  width: 80%;
  border-radius: 15px; /* 둥글은 경계선 */
  margin: 0 auto; /* 중앙에 할인 쿠폰 */
  max-width: 600px;
{}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
{}
.promo {
  background: #ccc;
  padding: 3px;
{}
.expire {
  color: red;
{}

직접 시도해 보세요