
w3.css
제품 카드
CSS로 제품 카드를 만드는 방법을 알아보자.
제품 카드를 만드는 방법
1단계) HTML 추가
<div class="card"> <img src="jeans3.jpg" alt="Denim Jeans" style="width:100%"> <h1>Tailored Jeans</h1> <p class="price">$19.99</p> <p>Some text about the jeans..</p> <p><button>Add to Cart</button></p> </div>
2단계) CSS 추가
.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; } .price { color: grey; font-size: 22px; } .card button { border: none; outline: 0; padding: 12px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; font-size: 18px; } .card button:hover { opacity: 0.7; }
기본 예시
예제 보기참고
W3C School - How TO - Product Card