카드 디자인을 만들고 스타일링하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명하겠습니다.
예제 1: 기본 카드 디자인
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>This is a basic card design.</p>
</div>
</body>
</html>
이 예제에서는 기본적인 카드 디자인을 만들었습니다. width, padding, border, box-shadow, border-radius 등의 속성을 사용하여 카드를 스타일링했습니다.
예제 2: 카드 이미지
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.card img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="card">
<img src="image.jpg" alt="Card Image">
<h2>Card Title</h2>
<p>This card includes an image.</p>
</div>
</body>
</html>
이 예제에서는 카드에 이미지를 추가한 카드 디자인을 만들었습니다. 이미지의 최대 너비를 설정하여 이미지가 카드에 적절하게 맞도록 했습니다.
예제 3: 카드 버튼
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.card button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>This card includes a button.</p>
<button>Click Me</button>
</div>
</body>
</html>
이 예제에서는 카드에 버튼을 추가한 카드 디자인을 만들었습니다. 버튼의 배경색, 글자색, 패딩 등의 속성을 사용하여 버튼을 스타일링했습니다.
예제 4: 카드 그라디언트 배경
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
border-radius: 8px;
background: linear-gradient(to bottom, #3498db, #e74c3c);
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>This card has a gradient background.</p>
</div>
</body>
</html>
이 예제에서는 카드의 배경에 그라디언트를 적용한 카드 디자인을 만들었습니다. background 속성을 사용하여 그라디언트 배경을 설정하였습니다.
예제 5: 카드 아이콘
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.icon {
font-size: 48px;
color: #3498db;
}
</style>
</head>
<body>
<div class="card">
<i class="icon">⭐</i>
<h2>Card Title</h2>
<p>This card includes an icon.</p>
</div>
</body>
</html>
이 예제에서는 카드에 아이콘을 추가한 카드 디자인을 만들었습니다. 아이콘의 크기와 색상을 설정하여 아이콘을 스타일링했습니다.
예제 6: 카드 그림자 효과
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>This card has a shadow effect on hover.</p>
</div>
</body>
</html>
이 예제에서는 카드에 마우스 호버 시 그림자 효과를 주는 카드 디자인을 만들었습니다. box-shadow 속성과 :hover 선택자를 사용하여 그림자와 확대 효과를 추가했습니다.
'CSS' 카테고리의 다른 글
| 블러 효과: 요소에 블러 효과 추가. (0) | 2023.12.23 |
|---|---|
| 풀스크린 배경 이미지: 전체 화면 배경 이미지. (0) | 2023.12.23 |
| 미리보기 이미지 갤러리: 이미지 갤러리 스타일링. (0) | 2023.12.23 |
| 테이블 스타일링: HTML 테이블 스타일 변경. (0) | 2023.12.23 |
| 텍스트 그라데이션: 텍스트에 그라데이션 효과. (0) | 2023.12.23 |