제조 방법: 제품 카드

CSS를 사용하여 제품 카드 생성 학습

Jeans
제조된 Denim

$19.99

Denim에 대한 일부 텍스트. 매우 얇고 편안한 lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

직접 시도해보세요

제품 카드 생성 방법

첫 번째 단계 - HTML 추가:

<div class="카드">
  <img src="jeans3.jpg" alt="Denim" style="width:100%">
  <h1>제조된 Denim</h1>
  <p class="가격">$19.99</p>
  <p>Denim에 대한 일부 텍스트...</p>
  <p><button>장바구니에 담기</button></p>
</div>

第二步 - CSS 추가:

.카드 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}
.가격 {
  color: grey;
  font-size: 22px;
}
.카드 버튼 {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}
.카드 버튼:hover {
  빛의 투명도: 0.7;
}

직접 시도해보세요