Youtube Project

Seokho·2021년 11월 17일
CSSJavaScripthtml
1

Youtube Project

목록 보기
1/1
post-thumbnail

✏️ Youtube Project

❗️ Wireframe

레이아웃을 정리하는 과정

  • 부모 - 자식 구조의 섹션 정리+네이밍 정리 (BEM)
  • 네이밍은 최대한 알아보기 쉽게 (✨ 매우 중요 ✨)

❗️ HTML 마크업

최대한 시맨틱 태그를 사용하여 정리
시맨틱 태그: 이름 자체만으로 의미를 명확하게 전달할 수 있는 태그, 쉽게말해 딱 봐도 대충 뭔지 감이 오는 태그

  • header
    머리말 영역, 문서 또는 섹션의 헤더
    h1, h2 등 올 수 있다.
  • nav
    네비게이션 / 다른 영역, 사이트, 문서 사이를 탐색 할 수있는 링크의 집합
  • main
    문서의 주요 콘텐츠
  • section
    본문의 한 구역
  • article
    본문의 독립된 컨텐츠, 개별 뉴스 혹은 게시물 등
  • aside
    사이드 바
  • footer
    꼬리말 혹은 바닥글 / 회사 소개,약관,저작권,제작 정보 등

❗️ CSS 스타일링

root:` {/* */}

CSS변수 설정: 사이즈, 컬러, 스페이스 등 미리 설정 후 진행하면 효율적인 스타일링 가능 (Designer ver. 전부 일정한 컬러, 사이즈, 위치 등 컨셉에 맞게 맞춘다고 생각하면 쉽다)

.info .channel .metadata .info .subscribers {~}

부모 - 자식 관계: HTML에서 지정한 부모 네이밍까지 전부 기입하는것이 변수를 막는 지름 길

❗️ 미디어 쿼리-반응형

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

❗️ 버튼 작동

Javascript를 활용하여 작업
아직은 이해가 안되서 기초부터 공부 예정

HTML
<!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="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <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">
    <script src="main.js" defer></script>
    <title>Youtube Mobile</title>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="logo">
            <i class="fab fa-youtube"></i>
            <span class="title">Youtube</span>
        </div>
        <div class="icons">
            <i class="fas fa-search"></i>
            <i class="fas fa-ellipsis-v"></i>
        </div>
    </header>

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

    <div class="infoAndUpNext">
        <!-- Video Info-->
        <section class="info">
        <!-- Metadata -->
        <div class="metadata">
            <ul class="hashtags">
                <li>#DreamCoding</li>
                <li>#DreamCoders</li>
                <li>#Ellie</li>
            </ul>
            <div class="titelAndButton">
                <span class="title clamp">
                    Clone Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 드림코딩과 함께하는 프론트엔드 실전 입문편
                </span>
                <button class="moreBtn">
                    <i class="fas fa-caret-down"></i>
                </button>
            </div>
            <span class="views">1M views 1 month ago</span>
        </div>
        <!-- Actions -->
        <ul class="actions">
            <li>
                <button><i class="active fas fa-thumbs-up"></i><span>1K</span></i></button>
            </li>
            <li>
                <button><i class="fas fa-thumbs-down"></i><span>0</span></i></button>
            </li>
            <li>
                <button><i class="fas fa-share"></i><span>Share</span></button>
            </li>
            <li>
                <button><i class="fas fa-plus"></i><span>Save</span></button>
            </li>
            <li>
                <button><i class="fab fa-font-awesome-flag"></i><span>Report</span></button>
            </li>
        </ul>
        <!-- Channel Description -->
        <div class="channel">
            <div class="metadata">
                <img src="image/avatar.png" alt="">
                <div class="info">
                    <span class="name">드림코딩 by 엘리</span>
                    <span class="subscribers">1M subcribers</span>
                </div>
            </div>
            <button class="subscribe">subscribe</button>
        </div>
        </section>
    
        <!-- Up Next -->
        <section class="upNext">
        <span class="title">Up next</span>
        <ul>
            <li class="item">
                <div class="img"><img src="image/1.png" alt=""></div>
                <div class="info">
                    <span class="title">프론트엔드 강의, 프론트엔드 개발자가 되고 싶다면? 웹개발 입문자편 강의를 시작합니다 ⭐️ (HTML, CSS, Javascript + 실전 프로젝트)</span>
                    <span class="name">드림코딩 by 엘리</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="image/2.png" alt=""></div>
                <div class="info">
                    <span class="title">HTML 기초, React 할때 꼭 필요한 팁! 쉽다고 무시하면 안돼요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript</span>
                    <span class="name">드림코딩 by 엘리</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="image/3.png" alt=""></div>
                <div class="info">
                    <span class="title">HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript</span>
                    <span class="name">드림코딩 by 엘리</span>
                    <span class="views"></span>
                </div>
                <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
            </li>
        </ul>
        </section>
    </div>
</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-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 */

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: 0px;
    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 .titelAndButton {
    display: flex;
}

.info .metadata .titelAndButton .title {
    font-size: var(--Font-medium);
    margin-right: var(--padding);
}

.info .metadata .titelAndButton .title.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

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

.info .metadata .titelAndButton .moreBtn.clicked {
    transform: rotate(180deg);
    transition: transform 300ms ease-in-out;
}

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

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

.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);
}

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

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

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

.info .channel .metadata .info .name {
    font-size: var(--Font-medium);
}

.info .channel .metadata .info .subscribers {
    font-size: var(--Font-small);
    color: var(--Grey-dark-color);
}

.info .channel .subscribe {
    text-transform: uppercase;
    color: var(--Red-color);
    font-size: var(--Font-medium);
}

/* Up Next */
.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 {
    height: 100%;
    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-width: 768px) {
    .infoAndUpNext {
        flex-direction: row;
        margin: var(--padding) 0;
    }
    
}
Javascript
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')
});

🍀 결과

🍀 총평

처음으로 제대로된 사이트를 만들어봤는데, 대충 HTML, CSS, Javascript의 역할을 알 수 있었다. 하지만 역시나 아직 혼자 만들기에는 부족한 부분이 많을 수 밖에 없다. 복잡한 웹사이트 클론 코딩 5번 정도 하면 실력이 좋아질 것 같다 🙏🏻

profile
Seokho
같이의 가치를 소중하게 생각하는, 프론트엔드 개발자 이석호 입니다.

0개의 댓글