index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/main.css">
<script src="/main.js"></script>
<script src="/data.js"></script>
<title>Youtube | My FastCapmpus Final Project </title>
<style shopback-extension-v6-6-11="" data-styled-version="4.2.0"></style>
</head>
<body>
<header class="header">
<div class="header_left">
<button class="header_hamburger-menu border-none transparent">
<span class="material-icons">menu</span>
</button>
<a class="header_logo-link" href="http://127.0.0.1:5500/index.html">
<h1>Youtube</h1>
</a>
</div>
<div class="header_center">
<form class="search-form">
<input class="header_input" placeholder="검색">
<div>
<button class="border-none transparent" type="button">
<span class="material-icons">search</span>
</button>
<button class="border-none transparent" type="button">
<span class="material-icons">mic</span>
</button>
</div>
</form>
</div>
<div class="header_right">
<button class="border-none transparent" type="button">
<span class="material-icons">apps</span>
</button>
<button class="border-none transparent" type="button">
<span class="material-icons">notifications</span>
</button>
<button class="border-none transparent" type="button">
<span class="material-icons">perm_identity</span>
</button>
</div>
</header>
<main class="home">
<aside class="sidebar">
<nav class="sidebar_nav">
<ul class="sidebar_nav-item-list">
<li class="sidebar_nav-item home on" onclick="setMenu('home')">
<button class="border-none transparent">
<span class="material-icons">home</span>
<span>홈</span>
</button>
</li>
<li class="sidebar_nav-item history" onclick="setMenu('history')">
<button class="border-none transparent">
<span class="material-icons">schedule</span>
<span>시청기록</span>
</button>
</li>
</ul>
</nav>
</aside>
<div class="contents">
<section id="home">
<h2>홈</h2>
<ul class="video-list">
<li class="video-item" hidden>
<img class="thumbnail" alt="thumbnail">
<div class="video-item_details">
<a href="http://127.0.0.1:5500/index.html">
<img class="profile" alt="content avatar">
</a>
<div class="video-item_meta">
<h3 class="title">
</h3>
<p class="author"></p>
<p class="stat"></p>
</div>
</div>
</div>
</li>
</ul>
</section>
<section id="history">
<h2>시청기록</h2>
<h3>시청 기록이 없습니다.</h3>
</section>
</div>
</main>
<footer class="footer">
<ul>
<li>
<a href="#" class="footer_link">회사소개</a>
</li>
<li>
<a href="#" class="footer_link">인재채용</a>
</li>
<li>
<a href="#" class="footer_link">이용약관</a>
</li>
<li>
<a href="https://policies.google.com/privacy?hl=ko" class="footer__link" target="_blank">
개인정보 처리 방침
</a>
</li>
<li>
<a href="#" class="footer_link">고객센터</a>
</li>
</ul>
</footer>
</body>
</html>main.css
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
.border-none {
border: none;
}
.transparent {
background: transparent;
}
button {
cursor: pointer;
}
.header {
display: grid;
grid-row: none;
grid-template-columns: 1fr 6fr 1fr;
gap: 20px;
height: 60px;
}
.header_left {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
}
.header_hamburger-menu {
padding: 8px;
}
.header_hamburger-menu span {
cursor: pointer;
}
.header_logo-link {
text-decoration: none;
color: #333;
}
.header_logo-link h1 {
font-size: 24px;
}
.header_center {
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
}
.search-form {
width: 100%;
display: grid;
grid-template-columns: 5fr 1fr;
align-items: center;
min-width: 720px;
}
.search-form input {
padding: 4px 12px;
height: 40px;
}
.header_right {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
}
main {
min-height: calc(100vh - 120px);
display: grid;
grid-template-columns: 1fr 7fr;
gap: 20px;
}
.sidebar {
min-width: 125px;
}
.sidebar_nav-item {
width: 100%;
display: flex;
align-items: center;
}
.sidebar_nav-item.on {
background-color: #ddd;
}
.sidebar_nav-item:hover {
background-color: #ddd;
}
.sidebar_nav-item button {
display: flex;
align-items: center;
flex: 1;
height: 48px;
}
.sidebar_nav-item button span {
margin-right: 4px;
}
.home #home {
display: block;
}
.history #history {
display: block;
}
#home {
display: none;
}
#history {
display: none;
}
#home h2, #history h2 {
font-size: 20px;
margin: 8px 0;
padding-bottom: 20px;
}
.video-list {
min-width: 600px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 20px 0 60px 0;
}
.video-items {
display: flex;
flex-direction: column;
}
.video-item {
cursor: pointer;
}
.video-item .thumbnail {
max-width: 100%;
}
.video-item_details {
display: flex;
justify-self: space-between;
padding: 16px 0;
}
.video-item_details .profile {
border-radius: 50%;
width: 36px;
height: 36px;
margin-right: 8px;
}
.video-item_meta .title {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
}
.video-item_meta .author {
font-size: 14px;
margin-bottom: 4px;
}
.video-item_meta .stat {
font-size: 14px;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.footer ul {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 60px;
margin: 0 auto;
min-width: 600px;
}
.footer_link {
color: #333;
text-decoration: none;
}
.footer_link:hover {
text-decoration: underline;
}main.js
function setMenu(_menu){
var filterButton = document.querySelectorAll('.sidebar_nav-item');
filterButton.forEach(function(filterButton){
filterButton.classList.remove("on");
});
document.querySelector(".sidebar_nav-item." + _menu).classList.add("on");
document.querySelector("main").className = _menu;
}
function showVideoClips(){
var videoList = document.querySelector('.video-list');
videos.forEach(function(video){
var videoNode = document.querySelector(".video-item[hidden]").cloneNode(true);
videoNode.querySelector(".thumbnail").src='./img/'+video.thumbnail_src;
videoNode.querySelector(".profile").src = './img/' + video.profile_src;
videoNode.querySelector(".title").innerHTML = video.title;
videoNode.querySelector(".author").innerHTML = video.author;
videoNode.querySelector(".stat").innerHTML = video.stat;
videoNode.hidden = false;
videoList.appendChild(videoNode);
})
}
function init() {
showVideoClips();
}
document.addEventListener('DOMContentLoaded', () => {
init();
});data.js
var videos = [
{
idx: 1,
profile_src: 'profile.jpg',
thumbnail_src: 'hello.webp',
title: 'Adele -Hello (Official Video)',
author: 'adele',
stat: '조회수 9542만회 2일전'
},
{
idx: 2,
profile_src: 'profile.jpg',
thumbnail_src: 'hello.webp',
title: 'Adele -Hello (Official Video)',
author: 'adele',
stat: '조회수 9542만회 2일전'
},
{
idx: 3,
profile_src: 'profile.jpg',
thumbnail_src: 'hello.webp',
title: 'Adele -Hello (Official Video)',
author: 'adele',
stat: '조회수 9542만회 2일전'
},
{
idx: 4,
profile_src: 'profile.jpg',
thumbnail_src: 'easy-on-me.webp',
title: 'Adele - Easy On Me (Official Video)',
author: 'adele',
stat: '조회수 7542만회 3일전'
},
{
idx: 5,
profile_src: 'profile.jpg',
thumbnail_src: 'hello.webp',
title: 'Adele -Hello (Official Video)',
author: 'adele',
stat: '조회수 9542만회 2일전'
},
{
idx: 6,
profile_src: 'profile.jpg',
thumbnail_src: 'hello.webp',
title: 'Adele - Easy On Me (Official Video)',
description: '새로 한 벽지',
},
{
idx: 7,
profile_src: 'profile.jpg',
thumbnail_src: 'easy-on-me.webp',
title: 'Adele - Easy On Me (Official Video)',
author: 'adele',
stat: '조회수 7542만회 3일전'
},
{
idx: 8,
profile_src: 'profile.jpg',
thumbnail_src: 'hello.webp',
title: 'Adele -Hello (Official Video)',
author: 'adele',
stat: '조회수 9542만회 2일전'
},
]