
w3.css
카드
CSS로 “카드”를 만드는 방법을 알아보자.
카드 만드는 방법
1단계) HTML 추가
<div class="card"> <img src="img_avatar.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>John Doe</b></h4> <p>Architect & Engineer</p> </div> </div>
2단계) CSS 추가
.card { /* Add shadows to create the "card" effect */ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } /* Add some padding inside the card container */ .container { padding: 2px 16px; }
기본 예시
예제 보기모서리가 둥글게 처리됨
.card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; /* 5px rounded corners */ } /* Add rounded corners to the top left and the top right corner of the image */ img { border-radius: 5px 5px 0 0; }
기본 예시
예제 보기참고
W3C School - How TO - Cards