<!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;
}
h1{
text-align:center;
}
/* 전체 카드 영역 */
.video-list{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
/* 카드 */
.video-card{
width:320px;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}
.video-card:hover{
transform:translateY(-10px);
}
/* 썸네일 */
.thumbnail 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" id="videoList"></div>
<script>
// 1. 데이터 만들기
const videos = [
{
title:"부산 골프장 추천 TOP5",
channel:"커사맨 골프",
view:"조회수 12만회 · 3일 전",
img:"https://picsum.photos/400/250?1"
},
{
title:"50대 웹퍼블리셔 현실",
channel:"커사맨 TV",
view:"조회수 3.2만회 · 1주 전",
img:"https://picsum.photos/400/250?2"
},
{
title:"JavaScript 회원 카드 만들기",
channel:"코딩 배우는 50대",
view:"조회수 8천회 · 5시간 전",
img:"https://picsum.photos/400/250?3"
},
{
title:"AI 크리에이터 시작법",
channel:"커사맨 AI",
view:"조회수 9만회 · 2일 전",
img:"https://picsum.photos/400/250?4"
}
];
// 2. HTML 가져오기
const videoList = document.querySelector("#videoList");
// 3. 반복문
for(let i = 0; i < videos.length; i++){
// 4. 카드 자동 생성
videoList.innerHTML += `
<div class="video-card">
<div class="thumbnail">
<img src="${videos[i].img}">
</div>
<div class="video-info">
<h3 class="title">
${videos[i].title}
</h3>
<p class="channel">
${videos[i].channel}
</p>
<p class="meta">
${videos[i].view}
</p>
</div>
</div>
`;
}
</script>
</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;
}
h1{
text-align:center;
}
/* 전체 카드 영역 */
.video-list{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
/* 카드 */
.video-card{
width:320px;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}
.video-card:hover{
transform:translateY(-10px);
}
/* 썸네일 */
.thumbnail 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" id="videoList"></div>
<script>
// 1. 데이터 만들기
const videos = [
{
title:"부산 골프장 추천 TOP5",
channel:"커사맨 골프",
view:"조회수 12만회 · 3일 전",
img:"https://picsum.photos/400/250?1"
},
{
title:"50대 웹퍼블리셔 현실",
channel:"커사맨 TV",
view:"조회수 3.2만회 · 1주 전",
img:"https://picsum.photos/400/250?2"
},
{
title:"JavaScript 회원 카드 만들기",
channel:"코딩 배우는 50대",
view:"조회수 8천회 · 5시간 전",
img:"https://picsum.photos/400/250?3"
},
{
title:"AI 크리에이터 시작법",
channel:"커사맨 AI",
view:"조회수 9만회 · 2일 전",
img:"https://picsum.photos/400/250?4"
}
];
// 2. HTML 가져오기
const videoList = document.querySelector("#videoList");
// 3. 반복문
for(let i = 0; i < videos.length; i++){
// 4. 카드 자동 생성
videoList.innerHTML += `
<div class="video-card">
<div class="thumbnail">
<img src="${videos[i].img}">
</div>
<div class="video-info">
<h3 class="title">
${videos[i].title}
</h3>
<p class="channel">
${videos[i].channel}
</p>
<p class="meta">
${videos[i].view}
</p>
</div>
</div>
`;
}
</script>
</body>
</html>
#유튜브 카드 자동 생성