깃헙 업로드 https://github.com/hjoo3355/YoutubeCloneCoding-
실행해본 결과물
CSS
:root {
/* Color */
--white-color: #fff;
--black-color: #140a00;
--blue-color: #045fd4;
--red-color: #ff0000;
--grey-dark-color: #909090;
--gray-light-color: #e0e0e0;
/* Size */
--padding: 12px;
--avatar-size: 36px;
/* Font Size */
--fonte-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;
}
li {
list-style: none;
}
button,
button:focus {
border: none;
cursor: pointer;
outline: none;
}
/* Header */
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);
}
/* Video Player*/
.player {
position: sticky;
top: 0;
text-align: center;
background-color: var(--black-color);
}
.player video {
width: 100%;
height: 100%;
max-width: 1000px;
}
/* Video info */
body > .info {
padding: var(--padding);
}
/* Metadata */
.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);
margin-right: var(--padding);
}
.info .metadata .titleAndButton .title.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.info .metadata .titleAndButton .moreBtn {
height: 100%;
transition: transfrom 300ms ease-in-out;
}
.info .metadata .titleAndButton .moreBtn.clicked {
transform: rotate(180deg);
}
.info .views {
font-size: var(--font-small);
color: var(--grey-dark-color);
}
/* Action Buttons */
.info .actions {
display: flex;
justify-content: space-around;
margin: var(--padding) 0;
}
.info .actions button {
display: flex;
flex-direction: column;
font-size: var(--font-small);
color: var(--grey-dark-color);
}
.info .actions button i {
margin: 0 auto;
margin-bottom: calc(var(--padding) / 2);
font-size: 16px;
}
.info .actions button i.active {
color: var(--blue-color);
}
/* Channel Description */
.info .channel {
display: flex;
justify-content: space-between;
border-top: 1px solid var(--grey-light-color);
border-bottom: 1px solid var(--grey-light-color);
}
.channel .metadata {
display: flex;
align-items: center;
}
.channel .metadata .info {
display: flex;
flex-direction: column;
}
.channel .metadata img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
}
.channel .metadata .info .name {
font-size: var(--font-medium);
}
.channel .metadata .info .subscribers {
font-size: var(--font-small);
color: var(--grey-dark-color);
}
.channel .subscribe {
text-transform: uppercase;
color: var(--red-color);
font-size: var(--font-medium);
}
/* UpNext */
.UpNext {
padding: 0 var(--padding);
}
.UpNext > .title {
font-size: var(--font-medium);
color: var(--grey-dark-color);
margin-bottom: calc(var(--padding) / 2);
}
.UpNext .item {
display: flex;
margin-top: var(--padding);
}
.UpNext .item .img {
flex: 1 1 35%;
margin-right: var(--padding);
}
.UpNext .item .img img {
width: 100%;
}
.UpNext .item .info {
flex: 1 1 60%;
}
.UpNext .item .moreBtn {
flex: 1 1 5%;
}
.UpNext .item .info {
display: flex;
flex-direction: column;
}
.UpNext .item .info .title {
font-size: var(--font-small);
}
.UpNext .item .info .name,
.UpNext .item .info .views {
font-size: var(--font-micro);
color: var(--grey-dark-color);
}
.infoAndUpNext {
display: flex;
flex-direction: column;
}
@media screen and(min-widt: 768px) {
.infoAndUpNext {
flex-direction: row;
margin: var(--padding) 0;
}
}코드를 입력하세요
CSS사용시 root라는 변수를 만들어 색상, 크기, 폰트크기를 저장해 사용하였습니다
스크립트
const moreBtn = document.querySelector('.info .metadata .moreBtn');
const title = document.querySelector('.info .metadata .title');
moreBtn.addEventListener('click', () => { // 버튼에 클릭이벤트 추가
moreBtn.classList.toggle('clicked');
title.classList.toggle('clamp');
});코드를 입력하세요