반응형 배너 광고 만들기 | 3일차 | 중급 HTML 및 CSS 프로젝트 50일

HTML과 CSS로 반응형 배너 광고 만들기

🎯 계획하자

card_pic
card_describe

card_head
card_body
card_tail

card_coupon

🎯 HTML

<a href="https://dev.to/koustav/">
  <div class="card">
    <div class="card_pic">
      <img src="https://doodleipsum.com/150/flat?i=982653932eabcb86283b22f6dee0aec2" alt="advertising image">
    </div>
    <div class="card_describe">
      <div class="card_head">
          30% Off on all Courses... 🔥
      </div>
      <div class="card_body">
          50 days of Intermediate HTML and CSS Projects on dev.to
      </div>
      <div class="card_tail">
          Use Coupon Code: <span id="card_coupon">devkoustav</span>
      </div>
    </div>
  </div>
</a>

📢 팁 💡

Use <a> ... </a> over the whole card, so that the user can move to that page by clicking anywhere on the card. That's a good UX practice.

🎯 CSS

📌 광고 전체가 포함된 클래스card

.card {
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 7px;
  padding: 7px;
  margin: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
  font-family: "Nunito", sans-serif;
  z-index: 1;
}

📌클래스card_pic에는 광고 이미지가 포함되어 있습니다..

.card_pic {
  border-radius: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}

📌수업card_describe에 작성된 내용이 모두 포함되어 있습니다..

.card_describe {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

📌 클래스card_head 광고 제목 포함 [여기 30% 할인]

.card_head {
  color: red;
  font-size: 19px;
}

📌 class card_tail 광고 제목 포함 [Here- Use Coupon Code]

.card_tail {
  color: green;
  font-size: 17px;
  line-height: 25px;
}

📌 idcard_coupon에 쿠폰코드가 들어있습니다...

#card_coupon {
  background-color: red;
  padding: 4px;
  color: white;
  border-style: solid;
  border-radius: 4px;
  font-family: "Josefin Sans", sans-serif;
}

📌 이제 우리는 :hover 효과, :active 효과를 추가하여 카드를 더욱 생동감 있게 보이게 할 것입니다..

.card:hover {
  transform: scale(1.03);
}
.card:active { 
  color: red;
}

📌 <a>의 밑줄을 피하기 위해

a:link {
  text-decoration: none;
  color: #121212;
}     /* Unvisited links */
a:visited {
  color: purple;
}     /* Visited links */

🎯 오늘의 작업

👉🏻 만들어보세요-

2.
getbootstrap.com의 Carbon 광고 이미지

📢 오늘의 팁 💡

웹사이트에 멋진 색 구성표를 원하십니까?
이것을 사용하십시오-

ColorHunt

Adobe Color

👉🏻 적은 학점
글꼴 - fonts.google.com
이미지 - Doodleipsum


시리즈를 확인하세요!
❤️ 해피 코딩!
더 많은 것을 위해 팔로우하세요!