<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>유튜브 카드</title>
<style>
body{
margin:0;
padding:30px;
background:#f5f5f5;
font-family:Arial, sans-serif;
}
/* 카드 전체 영역 */
.video-list{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
/* 카드 */
.video-card{
width:320px;
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}
/* hover 효과 */
.video-card:hover{
transform:translateY(-10px);
}
/* 썸네일 */
.thumbnail-box img{
width:100%;
height:180px;
object-fit:cover;
}
/* 영상 정보 */
.video-info{
padding:15px;
}
/* 제목 */
.title{
font-size:18px;
margin-bottom:10px;
line-height:1.4;
}
/* 채널명 */
.channel{
color:gray;
margin-bottom:5px;
}
/* 조회수 */
.meta{
color:#888;
font-size:14px;
}
</style>
</head>
<body>
<h1>유튜브 영상 카드</h1>
<div class="video-list">
<!-- 카드 1 -->
<div class="video-card">
<div class="thumbnail-box">
<img src="https://picsum.photos/400/250?1">
</div>
<div class="video-info">
<h3 class="title">
부산 골프장 추천 TOP5
</h3>
<p class="channel">
커사맨 골프
</p>
<p class="meta">
조회수 12만회 · 3일 전
</p>
</div>
</div>
<!-- 카드 2 -->
<div class="video-card">
<div class="thumbnail-box">
<img src="https://picsum.photos/400/250?2">
</div>
<div class="video-info">
<h3 class="title">
50대 웹퍼블리셔 현실 이야기
</h3>
<p class="channel">
커사맨 TV
</p>
<p class="meta">
조회수 3.2만회 · 1주 전
</p>
</div>
</div>
<!-- 카드 3 -->
<div class="video-card">
<div class="thumbnail-box">
<img src="https://picsum.photos/400/250?3">
</div>
<div class="video-info">
<h3 class="title">
JavaScript 회원 카드 만들기
</h3>
<p class="channel">
코딩 배우는 50대
</p>
<p class="meta">
조회수 8천회 · 5시간 전
</p>
</div>
</div>
</div>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>유튜브 카드</title>
<style>
body{
margin:0;
padding:30px;
background:#f5f5f5;
font-family:Arial, sans-serif;
}
/* 카드 전체 영역 */
.video-list{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
/* 카드 */
.video-card{
width:320px;
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}
/* hover 효과 */
.video-card:hover{
transform:translateY(-10px);
}
/* 썸네일 */
.thumbnail-box img{
width:100%;
height:180px;
object-fit:cover;
}
/* 영상 정보 */
.video-info{
padding:15px;
}
/* 제목 */
.title{
font-size:18px;
margin-bottom:10px;
line-height:1.4;
}
/* 채널명 */
.channel{
color:gray;
margin-bottom:5px;
}
/* 조회수 */
.meta{
color:#888;
font-size:14px;
}
</style>
</head>
<body>
<h1>유튜브 영상 카드</h1>
<div class="video-list">
<!-- 카드 1 -->
<div class="video-card">
<div class="thumbnail-box">
<img src="https://picsum.photos/400/250?1">
</div>
<div class="video-info">
<h3 class="title">
부산 골프장 추천 TOP5
</h3>
<p class="channel">
커사맨 골프
</p>
<p class="meta">
조회수 12만회 · 3일 전
</p>
</div>
</div>
<!-- 카드 2 -->
<div class="video-card">
<div class="thumbnail-box">
<img src="https://picsum.photos/400/250?2">
</div>
<div class="video-info">
<h3 class="title">
50대 웹퍼블리셔 현실 이야기
</h3>
<p class="channel">
커사맨 TV
</p>
<p class="meta">
조회수 3.2만회 · 1주 전
</p>
</div>
</div>
<!-- 카드 3 -->
<div class="video-card">
<div class="thumbnail-box">
<img src="https://picsum.photos/400/250?3">
</div>
<div class="video-info">
<h3 class="title">
JavaScript 회원 카드 만들기
</h3>
<p class="channel">
코딩 배우는 50대
</p>
<p class="meta">
조회수 8천회 · 5시간 전
</p>
</div>
</div>
</div>
</body>
</html>
#유튜브 카드 구조