Day18~
진행중... 내일 오전중으로 끝내는 것을 목표로..
javascript, html, css 활용해서 유튜브, 에어비엔비 클론코딩 프로젝트 진행하기
<!DOCTYPE html>
<html lang="en">
<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="style.css">
<title>Youtube</title>
</head>
<body>
<!-- head -->
<header>
<div class="logo">
<i class="fa-brands fa-youtube"></i>
<span class="title">Youtube</span>
</div>
<div class="icon">
<i class="fas fa-search"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</header>
<!-- 비디오플레이부분 -->
<section class="player">
<video controls src="video/example.mp4"></video>
</section>
<!-- 비디오정보부분 -->
<section class="info">
<div class="metadata">
<ul class="hashtags">
<li>#sheep</li>
<li>#forest</li>
<li>#healing</li>
</ul>
<div class="titleAndButton">
<span class="title">
힐링되는 양의 평화로운 모습 모음
</span>
<button class="moreBtn">
<i class="fas fa-caret-down"></i>
</button>
</div>
<div class="views">
<span class="views">조회수 114,901회 | 2020. 3. 14.</span>
</div>
</div>
<div class="action"></div>
<div class="channel">
<div class="metadata">
<img src="image/image.jpg" alt="">
<span class="name">루다</span>
<span class="subscribers">구독자 1.17천명</span>
</div>
<button class="subscribe">구독</button>
</div>
</section>
<!-- 다음재생정보들 -->
<section class="UpNext">
<span class="title">다음 영상</span>
<ul>
<li class="item">
<img src="image/1.webp" alt="">
<div class="info">
<span class="title">힐링되는 개발자 입문 영상 1</span>
<span class="name">루다</span>
<span class="views">조회수 8,001회</span>
</div>
<button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
</li>
<li class="item">
<img src="image/2.png" alt="">
<div class="info">
<span class="title">힐링되는 개발자 입문 영상 2</span>
<span class="name">루다</span>
<span class="views">조회수 7,001회</span>
</div>
<button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
</li>
<li class="item">
<img src="image/3.jpg" alt="">
<div class="info">
<span class="title">힐링되는 개발자 입문 영상 3</span>
<span class="name">루다</span>
<span class="views">조회수 10,121회</span>
</div>
<button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
</li>
</ul>
</section>
</body>
</html>
:root {
/* color */
--white-color: #fff;
--black-color: #140a00;
--blue-color: #045fd4;
--red-color: #ff0000;
--gray-dark-color: #909090;
--gra-light-color: #e0e0e0;
/* size */
--padding: 12px;
--avatar-size: 36px;
/* fontsize */
--font-large: 18px;
--font-medium: 14px;
--font-small: 12px;
--font-micro: 10px;
}
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
font-family: Roboto;
}
ul{
list-style: none;
}
button,
button:focus{
border: none;
cursor: pointer;
outline: none;
}
header{
display: flex;
justify-content: space-between;
padding: var(--padding);
background-color: var(--black-color);
color: var(--white-color);
}
header .logo {
font-size: var(--font-large);
}
header .logo .i {
color: var(--red-color);
}
header .icons .fa-search {
margin-right: var(--padding);
}
.player{
text-align: center;
background-color: var(--black-color);
}
.player video {
width: 100%;
height: 100%;
max-width: 1000px;
}
.info{
padding: var(--padding);
}
.info .metadata .hashtags{
display: flex;
font-size: var(--font-small);
color: var(--blue-color);
}
.info .metadata .hashtags li{
margin-right: var(--padding);
}
.info .metadata .titleAndButton {
display: flex;
}
.info .metadata .titleAndButton .title {
font-size: var(--font-medium);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.info .views {
font-size: var(--font-small);
color: var(--gray-dark-color);
}
참고한 사이트
> 아이콘 다운받는 사이트
https://www.youtube.com/watch?v=67stn7Pu7s4
테스트용 영상 구하는 사이트
'WEB' 카테고리의 다른 글
[WEB/클론코딩] 넷플릭스 클론코딩 (2) (0) | 2022.03.12 |
---|---|
[Web 클론코딩] 넷플릭스 클론코딩 (0) | 2022.03.11 |
[ES6/Javascript] 비구조 할당 (0) | 2022.03.09 |
[ES6/Javascript] 변수 선언(let, const), 화살표 함수 선언 (0) | 2022.03.08 |
[Javascript] 로컬 스토리지 (0) | 2022.03.07 |