Project

[프로젝트] 유튜브 클론코딩

dev seon 2023. 11. 6. 13:57

결과물

 

 

HTML과 CSS 강의만 듣다가 처음으로 클론코딩을 해보았다.

처음에는 아무런 참고영상 없이 만들어서 코드가 복잡했는데

참고영상을 보면서 다시 하나하나 따라서 만들어보았다.

 

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube</title>
    <script src="https://kit.fontawesome.com/edaaca725c.js" crossorigin="anonymous"></script>
    <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=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- Header-->
    <header>
        <div class="logo">
            <i class="fa-brands fa-youtube"></i>
            <span class="title">Youtube</span>
        </div>
        <div class="icons">
            <i class="fa-solid fa-magnifying-glass"></i>
            <i class="fa-solid fa-ellipsis-vertical"></i>
        </div>
    </header>

    <!-- Video Player -->
    <section class="player">
        <video src="./mountain.mp4" controls></video>
    </section>

    <div class="infoAndUpnext">
    <!-- Info -->
    <section class="info">

        <!--Metadata-->
        <div class="metadata"> 
            <ul class="hashtags">
                <li>#NatureVideo</li>
                <li>#Mountain</li>
                <li>#Snow</li>
            </ul>
            <div class="titleAndButton">
                <span class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, facilis provident. Ipsa, nam.</span>
                <button class="moreBtn"><i class="fa-solid fa-caret-down"></i></button>
            </div> 
            <span class="views">1M views 1 months ago</span>
        </div>
        
        <!--Actions-->
        <ul class="actions">
            <li><button><i class="fa-solid fa-thumbs-up"></i><span>1K</span></button></li>
            <li><button><i class="fa-solid fa-thumbs-down"></i><span>0</span></button></li>
            <li><button><i class="fa-solid fa-share"></i><span>Share</span></button></li>
            <li><button><i class="fa-solid fa-plus"></i><span>Save</span></button></li>
            <li><button><i class="fa-solid fa-flag"></i><span>Report</span></button></li>
        </ul>

        <!--Chaennel Description-->
        <div class="channel">
            <div class="metadata">
                <img src="./profile.jpg">
                <div class="info"><div
                    <span class="name">Hello, frontend</span>
                    <span class="subscribers">1M subscribers</span>
                </div>
            </div>
            <button class="subscribe">subscribe</button>
        </div>
        </section>


        <section class="UpNext">
            <span class="title">Up next</span>
            <ul>
                <li class="item">
                    <div class="img"><img src="./flower.jpg"></div>
                    <div class="info">
                        <span class="title">Flower image Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, in!</span>
                        <span class="channel">Hello frontend</span>
                        <span class="views">82K views</span>
                    </div>
                    <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
                </li>
                <li class="item">
                    <div class="img"><img src="./green.jpg"></div>
                    <div class="info">
                        <span class="title">Greenary Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque?</span>
                        <span class="channel">Hello frontend</span>
                        <span class="views">82K views</span>
                    </div>
                    <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
                </li>
                <li class="item">
                    <div class="img"><img src="./ocean.jpg"></div>
                    <div class="info">
                        <span class="title">Ocean Lorem ipsum dolor sit amet consectetur adipisicing.</span>
                        <span class="channel">Hello frontend</span>
                        <span class="views">82K views</span>
                    </div>
                    <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
                </li>
            </ul> 
            </div>   
        </section>
        </div>
    </section>
</body>
</html>

CSS

:root {
    /* Color */
    --white-color: #fff;
    --black-color: #140a00;
    --blue-color: #045fd4;
    --red-color: #ff0000;
    --grey-dark-color: #909090;
    --grey-light-color: #e0e0e0;

    /* Size */
    --padding: 12px;
    --avatar-size: 36px;

    /* Font Size */
    --font-large: 18px;
    --font-mediun: 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;
    background-color: transparent;
}

/* 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 i {
    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;
}

body> .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-mediun);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-right: var(--padding)
}

.info .metadata .titleAndButton .moreBtn {
    height: 100%;
}

.info .views {
    font-size: var(--font-small);
    color: var(--grey-dark-color);
}


/* Action Buttons */
.actions {
    display: flex;
    justify-content: space-around;
    margin: var(--padding) 0;
}

.actions button {
    display: flex;
    flex-direction: column;
    font-size: var(--font-small);
    color: var(--grey-dark-color);
}

.actions button i {
    margin: 0 auto
    margin-bottom: calc(var(--padding) / 2)
    font-size: 16px
}

.actions button i.active {
    color: var(--blue-color)
}

/* Channel Description */
.channel {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--grey-light-color)
    border-buttom: 1px solid var(var(--grey-light-color))
}

.channel .metadata {
    display: flex;
    align-items: center;
}

.channel .metadata .info {
    display: flex;
    flex-direction: column;
}

.channel .metadata .info .name {
    font-size: var(--font-mediun)
}

.channel .metadata .info .subscribers {
    font-size:v ar(--font-small)
    color: var(--grey-dark-color)
}

.channel .metadata img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
}

.channel .subscribe {
    text-transform: uppercase;
    color: var(--red-color);
    font-size: var(--font-mediun)
}

/* Up Next */
.UpNext {
    padding: 0 var(--padding);
}

.UpNext > .title {
    font-size: var(--font-mediun);
    color: var(--grey-dark-color);
    margin-bottom: calc(var(--padding) /2);
}

.UpNext .item {
    display: flex;
    margin-top: var(--padding)
}

.UpNext .item .img img {
    width: 100%
}

.UpNext .item .img {
    flex: 1 1 35%;
    margin-right: var(--padding);
}

.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);
    font-color: var(--grey-dark-color)
}

.infoAndUpnext {
    display: flex;
    flex-direction:  column;
}

@media screen and (min-width: 768px) {
    .infoAndUpnext {
        flex-direction: row;
        margin: var(--padding) 0;
    }
}

 

참고영상

https://youtu.be/67stn7Pu7s4?si=kJ6W6oq9EWB9cKa1

 

알게된 점

- CSS에서 grid보다는 flex를 많이 사용한다.

- CSS에 클래스명만 쓰기 보다는 좀 더 구체적으로 쓴다.

- HTML에 비디오 넣는 방법을 공부했다.

 

 

앞으로의 계획

- 다양한 사이트를 클론코딩하면서 기능을 더 잘 사용해보아야겠다.

- 자바스크립트를 추가하여 기능도 구현해보아야겠다.

'Project' 카테고리의 다른 글

[프로젝트] 스마트오더 플랫폼, Food Bridge 프로젝트 회고  (0) 2024.04.30
[클래식소믈리에] 메인, 문답 시작 페이지 완성  (0) 2024.01.20
[클래식소믈리에] 프로젝트 개요 및 메인페이지  (1) 2024.01.19
[Figma] 기초적인 Figma 정리  (0) 2024.01.18
[스마트오더] 팀 프로젝트를 시작하다  (0) 2024.01.16

'Project'의 다른글

  • 현재글[프로젝트] 유튜브 클론코딩

관련글

티스토리툴바