<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav id="youtube-top-nav">
<div class="youtube-top-wrap flex-align-between">
<div class="nav-left flex-align-start">
<button type="button" class="btn-menu"></button> <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
<h1>
<a class="youtube-logo-wrap flex-align-start" href="#">
<i class="youtube-logo"></i>
<span>YouTube</span>
<p>KR</p>
</a>
</h1>
</div>
<div class="nav-center flex-align-start">
<div class="search-wrap flex-align-start">
<input type="text" placeholder="Search">
<button type="button" class="btn-search"></button>
</div>
<button class="btn-voice"></button>
</div>
<div class="nav-right flex-align-end">
<button type="button" class="btn-menu btn-menu-1"></button>
<button type="button" class="btn-menu btn-menu-2"></button>
<a href="#" class="btn-login">SIGN IN</a>
</div>
</div>
</nav>
<nav id="youtube-left-nav">
<div id="youtube-left-content">
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="index.html" class="flex-align-start">
<i class="icon icon-1"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="explore.html" class="on flex-align-start">
<i class="icon icon-2"></i>
<span>Explore</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-3"></i>
<span>Subscriptions</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>Library</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-5"></i>
<span>History</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<div class="txt-wrap">
<p>Sign in to like videos, commemnt, and subascribe.</p>
<a href="#" class="btn-login">SIGN IN</a>
</div>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>BEST OF YOUTUBE</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-1"></i>
<span>Music</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-2"></i>
<span>Sports</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-3"></i>
<span>Gaming</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-4"></i>
<span>Movie</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-5"></i>
<span>News</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-6"></i>
<span>Live</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-7"></i>
<span>Learning</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-8"></i>
<span>360º Video</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-6"></i>
<span>Browse channels</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>MORE FROM YOUTUBE</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>YouTube Premium</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-8"></i>
<span>Live</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-9"></i>
<span>Setting</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-10"></i>
<span>Report history</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-11"></i>
<span>Help</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-12"></i>
<span>Send feedback</span>
</a>
</li>
</ul>
</div>
</div>
<footer id="youtube-footer">
<div class="txt-wrap">
<a href="#">About</a>
<a href="#">Press</a>
<a href="#">Copyright</a>
<a href="#">Contact us</a>
<a href="#">Creators</a>
<a href="#">Advertise</a>
<a href="#">Developers</a>
</div>
<div class="txt-wrap">
<a href="#">Terms</a>
<a href="#">Privacy</a>
<a href="#">Policy & Safety</a>
<a href="#">How YouTube Works</a>
<a href="#">Test new features</a>
</div>
<div class="txt-wrap">
/* 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nanum Gothic', sans-serif;
}
html, body {
width: 100%;
height: 100%;
background-color: #181818;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1300px;
}
.flex-align-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex-align-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-align-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* 상단 영역 */
#youtube-top-nav {
position: fixed;
width: 100%;
min-width: 1380px;
height: 56px;
background-color: #212121;
padding: 0 16px;
z-index: 999999;
}
#youtube-top-nav .nav-left {
height: 56px;
}
#youtube-top-nav .nav-left .btn-menu {
width: 40px;
height: 40px;
padding: 8px;
background-image: url(../img/menu.png);
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap {
margin-left: 8px;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap .youtube-logo {
display: block;
width: 30px;
height: 28px;
background-image: url(../img/youtube.png);
background-size: 30px 28px;
background-repeat: no-repeat;
background-position: 50% 35%;
margin-right: 3px;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap span {
font-size: 20px;
color: #ffffff;
letter-spacing: -2px;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap p {
color: #aaa;
font-size: 1px;
margin-top: -17px;
margin-left: 5px;
}
#youtube-top-nav .nav-right {
height: 56px;
}
#youtube-top-nav .nav-right .btn-menu {
width: 40px;
height: 40px;
cursor: pointer;
margin-right: 16px;
}
#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
background-image: url(../img/menu-2.png);
background-repeat: no-repeat;
background-size: 22px;
background-position: center;
}
#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
background-image: url(../img/more.png);
background-repeat: no-repeat;
background-size: 22px;
background-position: center;
}
#youtube-top-nav .nav-right .btn-login {
display: inline-block;
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
color: #3ea6ff;
font-size: 14px;
font-weight: bold;
}
#youtube-top-nav .nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#youtube-top-nav .nav-center .search-wrap {
width: 640px;
height: 30px;
}
#youtube-top-nav .nav-center .search-wrap input {
width: calc(100% - 65px);
height: 30px;
background-color: hsl(0, 0%, 7%);
border: solid 1px hsl(0, 0%, 18.82%);
border-radius: 2px 0 0 2px;
padding: 2px 6px;
font-size: 14px;
}
#youtube-top-nav .nav-center .search-wrap input:focus {
border: solid 1px #065fd4;
color: #aaa;
font-weight: bold;
}
#youtube-top-nav .nav-center .search-wrap input::placeholder {
font-weight: bold;
}
#youtube-top-nav .nav-center .search-wrap .btn-search {
width: 65px;
height: 30px;
background-image: url(../img/search.png);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-color: hsla(0, 0%, 100%, .08);
border: solid 1px hsl(0, 0%, 18.82%);
border-radius: 0 2px 2px 0;
cursor: pointer;
}
#youtube-top-nav .nav-center .btn-voice {
width: 35px;
height: 35px;
background-color: black;
border-radius: 50%;
background-image: url(../img/voice.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
margin-left: 8px;
cursor: pointer;
}
/* 왼쪽 영역 */
#youtube-left-nav {
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
bottom: 0;
left: 0;
z-index: 999999;
}
#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
}
#youtube-left-content .nav-section {
padding: 8px 0;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
#youtube-left-content .nav-section .nav-title-wrap {
padding: 8px 24px;
}
#youtube-left-content .nav-section .nav-title-wrap h2 {
color: #aaaaaa;
font-size: 15px;
font-weight: bold;
}
#youtube-left-content .nav-section .nav-body {
}
#youtube-left-content .nav-section .nav-body ul {
}
#youtube-left-content .nav-section .nav-body li:hover {
background-color: rgba(136, 136, 136, .2);
}
#youtube-left-content .nav-section .nav-body li a.on {
background-color: rgba(136, 136, 136, .6);
}
#youtube-left-content .nav-section .nav-body li a {
height: 40px;
padding: 0 24px;
}
#youtube-left-content .nav-section .nav-body li a .icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 24px;
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-1 {
background-image: url(../img/home.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-2 {
background-image: url(../img/explore.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-3 {
background-image: url(../img/youtube-2.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-4 {
background-image: url(../img/library.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-5 {
background-image: url(../img/history.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-6 {
background-image: url(../img/browse.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-7 {
background-image: url(../img/youtube-2.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-8 {
background-image: url(../img/live.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-9 {
background-image: url(../img/setting.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-10 {
background-image: url(../img/report.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-11 {
background-image: url(../img/help.png);
}
#youtube-left-content .nav-section .nav-body li a .icon.icon-12 {
background-image: url(../img/send-feedback.png);
}
#youtube-left-content .nav-section .nav-body li a span {
color: #ffffff;
font-size: 13px;
font-weight: bold;
}
#youtube-left-content .nav-section .nav-body .txt-wrap {
padding: 8px 24px;
}
#youtube-left-content .nav-section .nav-body .txt-wrap p {
color: #ffffff;
font-size: 13px;
font-weight: bold;
}
#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
display: inline-block;
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
color: #3ea6ff;
font-size: 14px;
font-weight: bold;
margin-top: 12px;
}
#youtube-left-content .nav-section .nav-body li a .circle-icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 24px;
background-color: rgb(64, 64, 64);
border-radius: 50%;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-1 {
background-image: url(../img/music.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-2 {
background-image: url(../img/sport.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-3 {
background-image: url(../img/gaming.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-4 {
background-image: url(../img/movie.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-5 {
background-image: url(../img/news.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-6 {
background-image: url(../img/live.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-7 {
background-image: url(../img/learning.png);
}
#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-8 {
background-image: url(../img/gaming.png);
}
#youtube-left-content #youtube-footer {
}
#youtube-left-content #youtube-footer .txt-wrap {
padding: 12px 24px 0;
}
#youtube-left-content #youtube-footer .txt-wrap a {
margin-right: 8px;
color: #aaaaaa;
font-size: 12px;
font-weight: bold;
word-break: keep-all;
}
#youtube-left-content #youtube-footer .txt-wrap p {
font-size: 12px;
color: #717171;
font-weight: 400;
line-height: 1.4;
padding-bottom: 12px;
}
/* 유튜브 메인 */
#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: #181818;
}
#youtube-main .tag-wrap {
height: 56px;
width: 100%;
min-width: 1165px;
background-color: #212121;
border-top: solid 1px rgba(255, 255, 255, .1);
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
#youtube-main .tag-wrap ul {
padding: 0 25px;
justify-content: center;
}
#youtube-main .tag-wrap li {
height: 32px;
min-width: 12px;
padding: 4px 12px;
margin: 12px;
margin-left: 0;
background-color: rgba(255, 255, 255, .1);
border: solid 1px rgba(255, 255, 255, .1);
border-radius: 16px;
transition: background-color 0.3s ease-out;
}
#youtube-main .tag-wrap li.on {
background-color: #ffffff;
transition: unset;
}
#youtube-main .tag-wrap li.on a {
color: #212121;
}
#youtube-main .tag-wrap li:hover {
background-color: rgba(136, 136, 136, .6);
}
#youtube-main .tag-wrap li.on:hover {
background-color: #ffffff;
}
#youtube-main .tag-wrap li a {
display: inline-block;
font-size: 13px;
font-weight: bold;
color: #ffffff;
}
/* 배너 */
#youtube-main .youtube-banner {
position: relative;
width: 100%;
height: 260px;
background-color: #000000;
margin-bottom: 32px;
}
#youtube-main .youtube-banner .banner-container {
position: relative;
max-width: 2256px;
height: 100%;
margin: 0 auto;
}
#youtube-main .youtube-banner .youtube-music-logo {
position: absolute;
top: 30px;
left: 25px;
}
#youtube-main .youtube-banner .youtube-music-logo i {
display: block;
width: 30px;
height: 30px;
background-image: url(../img/youtube-music.png);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
}
#youtube-main .youtube-banner .youtube-music-logo span {
font-size: 20px;
color: #ffffff;
letter-spacing: -2px;
}
#youtube-main .youtube-banner p {
position: absolute;
font-size: 24px;
color: #ffffff;
top: 70px;
left: 27px;
}
#youtube-main .youtube-banner .btn-join {
position: absolute;
color: #ffffff;
font-size: 14px;
background-color: #000000;
border: solid 1px #ffffff;
padding: 13px 20px;
bottom: 30px;
left: 27px;
}
#youtube-main .youtube-banner .close {
position: absolute;
width: 24px;
height: 24px;
background-color: lightgray;
top: 10px;
right: 10px;
cursor: pointer;
}
/* 컨텐츠 */
#youtube-main-content {
width: 100%;
height: 100%;
padding: 24px;
}
#youtube-main-content ul {
align-items: flex-start;
width: 100%;
height: 100%;
}
#youtube-main-content ul li {
width: 24%;
margin-bottom: 40px;
}
#youtube-main-content ul li .video-thumbnail {
width: 100%;
}
#youtube-main-content ul li .video-thumbnail a {
position: relative;
display: block;
width: 100%;
}
#youtube-main-content ul li .video-thumbnail img {
width: 100%;
}
#youtube-main-content ul li .video-thumbnail .time {
position: absolute;
background-color: rgba(0, 0, 0, .8);
font-size: 12px;
font-weight: bold;
color: #ffffff;
border-radius: 2px;
padding: 3px 4px;
bottom: 4px;
right: 4px;
}
#youtube-main-content ul li .video-txt-wrap {
margin-top: 12px;
align-items: flex-start;
}
#youtube-main-content ul li .video-txt-wrap .image-link {
display: inline-block;
width: 36px;
height: 36px;
margin-right: 12px;
}
#youtube-main-content ul li .video-txt-wrap .image-link img {
width: 100%;
height: 100%;
border-radius: 50%;
}
#youtube-main-content ul li .video-txt-wrap .txt {
width: calc(100% - 48px);
}
#youtube-main-content ul li .video-txt-wrap .txt h3 {
margin-bottom: 6px;
}
#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
color: #ffffff;
font-size: 15px;
font-weight: bold;
}
#youtube-main-content ul li .video-txt-wrap .txt p {
}
#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
color: #aaaaaa;
font-weight: bold;
font-size: 13px;
}
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom {
}
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
color: #aaaaaa;
font-weight: bold;
font-size: 13px;
}
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date:before {
display: inline-block;
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #aaaaaa;
margin: 3px 3px 2px;
}
/* channel.html */
#youtube-channel-content #channel-banner {
position: relative;
width: 100%;
height: 250px;
background-color: greenyellow;
}
#youtube-channel-content #channel-banner {
display: block;
}
#youtube-channel-content #channel-banner .btn-wrap {
position: absolute;
width: 230px;
height: 38px;
background-color: rgba(0, 0, 0, .3);
bottom: 14px;
right: 107px;
}
#youtube-channel-content #channel-banner .btn-wrap i {
display: block;
width: 16px;
height: 16px;
margin-left: 9px;
background-image: url(../img/youtube.png);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
#youtube-channel-content #channel-banner .btn-wrap h3 {
font-size: 12px;
color: #ffffff;
margin-left: 8px;
}
#youtube-channel-content #channel-banner .btn-icons {
position: absolute;
width: 92px;
height: 36px;
background-color: rgba(0, 0, 0, .3);
bottom: 15px;
right: 15px;
}
#youtube-channel-content #channel-banner .btn-icons a.facebook {
display: block;
width: 16px;
height: 16px;
margin: 7px;
background-image: url(../img/facebook.png);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
#youtube-channel-content #channel-banner .btn-icons a.twitter {
display: block;
width: 16px;
height: 16px;
margin: 7px;
background-image: url(../img/twitter.png);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
#youtube-channel-content #channel-banner .btn-icons a.kakao {
display: block;
width: 16px;
height: 16px;
margin: 7px;
background-image: url(../img/kakao.png);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
.channel-container {
width: 1070px;
margin: 0 auto;
}
#youtube-channel-content .channel-header {
padding: 16px 0 4px;
background-color: rgb(24, 24, 24);
}
#youtube-channel-content .channel-header .channel-profile-wrap {
}
#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile {
}
#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 24px;
}
#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap {
}
#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
font-size: 25px;
color: #ffffff;
}
#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
font-size: 14px;
color: #aaaaaa;
margin-top: 5px;
}
#youtube-channel-content .channel-header .channel-profile-wrap .btn-subscribe {
padding: 10px 16px;
background-color: #c00;
border-radius: 2px;
color: #ffffff;
font-weight: bold;
cursor: pointer;
}
#channel-nav {
background-color: rgb(24, 24, 24);
}
#channel-nav ul {
}
#channel-nav li {
}
#channel-nav li a {
display: block;
height: 47px;
padding: 0 32px;
line-height: 47px;
border-bottom: solid 3px transparent;
color: #aaaaaa;
font-size: 14px;
font-weight: bold;
}
#channel-nav li a:hover {
color: #ffffff;
}
#channel-nav li.active a {
color: #ffffff;
border-bottom: solid 3px #aaaaaa;
}
#channel-nav .search-wrap {
width: 195px;
}
#channel-nav .search-wrap i {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 3px;
background-image: url(../img/search.png);
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border-radius: 50%;
cursor: pointer;
}
#channel-nav .search-wrap i:active {
background-color: rgba(225, 225, 225, .3);
}
#channel-nav .search-wrap input {
background-color: transparent;
padding: 5px 0;
}
#channel-nav .search-wrap input::placeholder {
color: #ffffff;
font-weight: bold;
}
#channel-nav .search-wrap input:focus {
border-bottom: solid 2px #ffffff;
color: #ffffff;
}
#channel-recent {
padding: 24px 0;
align-items: flex-start;
}
#channel-recent img {
width: 424px;
height: 238px;
margin-right: 24px;
}
#channel-recent .txt-wrap {
width: 400px;
}
#channel-recent .txt-wrap h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
#channel-recent .txt-wrap .view {
margin: 16px 0;
}
#channel-recent .txt-wrap .view p {
font-size: 12px;
font-weight: bold;
color: #aaaaaa;
}
#channel-recent .txt-wrap .view p.count {
}
#channel-recent .txt-wrap .view p.date:before {
display: inline-block;
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #aaaaaa;
margin: 1px 4px;
}
#channel-recent .txt-wrap .title {
color: #ffffff;
font-size: 14px;
font-weight: 600;
}
#channel-recent .txt-wrap .link-wrap {
margin: 17px 0;
}
#channel-recent .txt-wrap .link-wrap p {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #ffffff;
}
#channel-recent .txt-wrap .link-wrap p em {
color: #3ea6ff;
font-style: normal;
cursor: pointer;
}
#channel-recent .txt-wrap .more {
font-size: 13px;
font-weight: 600;
color: #aaaaaa;
cursor: pointer;
}
#channel-recent .txt-wrap .more:hover {
color: #ffffff;
}
.channel-playlists-section {
padding: 24px 0;
border-top: solid 1px rgba(255, 255, 255, .2);
}
.channel-playlists-section .playlists-header {
}
.channel-playlists-section .playlists-header h3 {
margin-right: 20px;
font-size: 17px;
color: #ffffff;
cursor: pointer;
}
.channel-playlists-section .playlists-header .play-wrap {
}
.channel-playlists-section .playlists-header .play-wrap .icon-play {
display: block;
width: 24px;
height: 24px;
margin-right: 8px;
background-image: url(../img/play.png);
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
}
.channel-playlists-section .playlists-header .play-wrap .play-link {
font-size: 15px;
font-weight: bold;
color: #aaaaaa;
}
.channel-playlists-section .playlists-header-description span {
display: inline-block;
color: #aaaaaa;
font-size: 13px;
font-weight: 600;
margin-top: 10px;
}
.channel-playlists-section .playlists-body {
margin-top: 24px;
}
.channel-playlists-section .playlists-body ul {
align-items: flex-start;
}
.channel-playlists-section .playlists-body li {
width: 210px;
}
.channel-playlists-section .playlists-body li .channel-thumbnail {
width: 100%;
height: 118px;
}
.channel-playlists-section .playlists-body li .channel-thumbnail a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.channel-playlists-section .playlists-body li .channel-thumbnail img {
width: 100%;
height: 100%;
}
.channel-playlists-section .playlists-body li .channel-thumbnail .time {
position: absolute;
font-size: 12px;
font-weight: 600;
color: #ffffff;
background-color: rgba(0, 0, 0, .8);
padding: 2px 4px;
border-radius: 2px;
bottom: 4px;
right: 4px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap {
margin-top: 8px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2;
font-size: 14px;
line-height: 20px;
margin-bottom: 6px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
color: #ffffff;
}
.channel-playlists-section .playlists-body .channel-txt-wrap p {
font-size: 12px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap p a {
color: #aaaaaa;
}
.channel-playlists-section .playlists-body .channel-txt-wrap p a:hover {
color: #ffffff;
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom {
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span {
font-size: 12px;
color: #aaaaaa;
line-height: 20px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.count {
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.date:before {
display: inline-block;
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #aaaaaa;
margin: 2px 5px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap .caption {
background-color: #212121;
color: #aaaaaa;
font-size: 11px;
font-weight: 800;
letter-spacing: .5px;
border-radius: 2px;
padding: 3px 4px;
}
/* explore.html */
.explore-container {
width: 1070px;
margin: 0 auto;
}
#explore-nav {
padding: 12px 0 8px;
}
#explore-nav ul {
}
#explore-nav li {
width: 210px;
height: 116px;
background-color: #212121;
border-radius: 8px;
margin-bottom: 5px;
overflow: hidden;
}
#explore-nav li a {
display: block;
height: 100%;
padding: 20px;
}
#explore-nav li a:hover {
background-color: #000000;
}
#explore-nav li .icon {
display: block;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 20px;
}
#explore-nav li .icon.trending {
background-image: url(../img/trending.png);
}
#explore-nav li .icon.music {
background-image: url(../img/music-color.png);
}
#explore-nav li .icon.gaming {
background-image: url(../img/gaming-color.png);
}
#explore-nav li .icon.movies {
background-image: url(../img/movie-color.png);
}
#explore-nav li .icon.learning {
background-image: url(../img/learning-color.png);
}
#explore-nav li .icon.sports {
background-image: url(../img/sports-color.png);
}
#explore-nav li span {
font-size: 16px;
font-weight: 700;
color: #ffffff;
letter-spacing: .15px;
}
.explore-playlists-section {
padding: 24px 0;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
.explore-playlists-section .playlists-header img {
border-radius: 50%;
width: 32px;
height: 32px;
margin-right: 10px;
cursor: pointer;
}
.explore-playlists-section .playlists-header h3 {
margin-right: 20px;
font-size: 17px;
color: #ffffff;
cursor: pointer;
}
.explore-playlists-section .playlists-body {
margin-top: 24px;
}
.explore-playlists-section .playlists-body ul {
align-items: flex-start;
}
.explore-playlists-section .playlists-body li {
width: 210px;
}
.explore-playlists-section .playlists-body li .channel-thumbnail {
width: 100%;
height: 118px;
}
.explore-playlists-section .playlists-body li .channel-thumbnail a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.explore-playlists-section .playlists-body li .channel-thumbnail img {
width: 100%;
height: 100%;
}
.explore-playlists-section .playlists-body li .channel-thumbnail .time {
position: absolute;
font-size: 12px;
font-weight: 600;
color: #ffffff;
background-color: rgba(0, 0, 0, .8);
padding: 2px 4px;
border-radius: 2px;
bottom: 4px;
right: 4px;
}
.explore-playlists-section .playlists-body .channel-txt-wrap {
margin-top: 8px;
}
.explore-playlists-section .playlists-body .channel-txt-wrap h3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2;
font-size: 14px;
line-height: 20px;
margin-bottom: 6px;
}
.explore-playlists-section .playlists-body .channel-txt-wrap h3 a {
color: #ffffff;
}
.explore-playlists-section .playlists-body .channel-txt-wrap p {
font-size: 12px;
}
.explore-playlists-section .playlists-body .channel-txt-wrap p a {
color: #aaaaaa;
}
.explore-playlists-section .playlists-body .channel-txt-wrap p a:hover {
color: #ffffff;
}
.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span {
font-size: 12px;
color: #aaaaaa;
line-height: 20px;
}
.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.count {
}
.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.date:before {
display: inline-block;
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #aaaaaa;
margin: 2px 5px;
}
#popular-section {
padding: 24px 0 30px;
}
#popular-section h2 {
font-size: 17px;
color: #ffffff;
}
#popular-section ul {
margin-top: 24px;
}
#popular-section li {
margin-bottom: 15px;
}
#popular-section a {
align-items: flex-start;
}
#popular-section li .image-wrap {
position: relative;
width: 246px;
height: 148px;
margin-right: 16px;
}
#popular-section li .image-wrap img {
width: 100%;
height: 100%;
}
#popular-section li .image-wrap .time {
position: absolute;
border-radius: 2px;
padding: 2px 4px;
background-color: rgba(0, 0, 0, .8);
color: #ffffff;
font-size: 12px;
font-weight: bold;
bottom: 4px;
right: 4px;
}
#popular-section li .txt-wrap {
width: 600px;
}
#popular-section li .txt-wrap h3 {
font-size: 18px;
font-weight: 400;
color: #ffffff;
}
#popular-section li .txt-wrap .video-info {
font-size: 12px;
color: #aaaaaa;
line-height: 22px;
}
#popular-section li .txt-wrap .video-info span:after {
display: inline-block;
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #aaaaaa;
vertical-align: top;
margin: 10px 2px 0px 6px;
}
#popular-section li .txt-wrap .video-info span:last-child:after {
content: none;
}
#popular-section li .txt-wrap .video-info .channel:hover {
color: #ffffff;
}
#popular-section li .txt-wrap .video-info .count {
}
#popular-section li .txt-wrap .video-info .date {
}
#popular-section li .txt-wrap .description {
padding-top: 8px;
font-size: 12px;
color: #aaaaaa;
line-height: 18px;
}
따로 찾아보거나 코딩을 하면서 브라우저로 확인해봄
복습을 하고 따로 찾아봄