클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

HTML, CSS

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

일등하이 2020. 12. 30. 17:18

www.youtube.com/watch?v=67stn7Pu7s4&t=167s

developer.mozilla.org/ko/docs/Web/HTML

HTML: Hypertext Markup Language | MDN

와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠

developer.mozilla.org

fontawesome.com/

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

material.io/resources/color/#!/

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

material.io

fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <title>Youtube Mobile</title>
    <script src="https://kit.fontawesome.com/3442ebfa65.js" crossorigin="anonymous"></script>
    <script src="./main.js" defer></script>
</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="./videos/ml-agents.mp4"></video>
    </section>

    <div class="infoAndUpNext">
        <section class="info">
            <div class="metadata">
                <ul class="hashtags">
                    <li>#DreamCoding</li>
                    <li>#DreamCoders</li>
                    <li>#Ellie</li>
                </ul>
                <div class="titleAndButton">
                    <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>
            <ul class="actions">
                <li>
                    <button>
                        <i class="active fas fa-thumbs-up"><span>1K</span></i>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fas fa-thumbs-down"><span>0</span></i>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fas fa-share"><span>Share</span></i>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fas fa-plus"><span>Save</span></i>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fab fa-font-awesome-flag"><span>Report</span></i>
                    </button>
                </li>
            </ul>
    
            <!-- channel desc -->
            <div class="channel">
                <div class="metadata">
                    <img src="./image/thumb.jpg" alt="thumb">
                    <div class="info">
                        <span class="name"></span>
                        <span class="subscribes"></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="./image/1.png" alt="">
                    </div>
                    
                    <div class="info">
                        <span class="title">아이유, 이승기님이 '니곡 내곡' 스킬을 시전하셨습니다.</span>
                        <span class="name">이지금</span>
                        <span class="views">조회수 108만회 - 5일전</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">[광고없는] 가슴 한편이 뭉클해지는 아이유 노래 모음</span>
                        <span class="name">이지금</span>
                        <span class="views">조회수 244만회 - 1주전</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">아이유 분노의 크리스마스</span>
                        <span class="name">이지금</span>
                        <span class="views">조회수 309만회 - 3개월전</span>
                    </div>
                    <button class="moreBtn">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </li>
                
            </ul>
        </section>
    </div>
    <!-- Video Info -->
    

    
</body>
</html>

:root {
  /* Color */
  --white-color: #ffffff;
  --black-color: #140a00;
  --blue-color: #045fd4;
  --red-color: #ff0000;
  --gray-dark-color: #909090;
  --gray-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 {
  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 {
  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-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: transform 300ms ease-in-out;
}

.info .metadata .titleAndButton .moreBtn.clicked {
  transform: rotate(180deg);
}

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

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

.info .channel {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--gray-light-color);
  border-bottom: 1px solid var(--gray-light-color);
}

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

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

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

.info .channel .metadata .info .subscribes {
  font-size: var(--font-small);
  color: var(--gray-dark-color);
}

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

.upNext {
  padding: 0 var(--padding);
}

.upNext > .title {
  font-size: var(--font-medium);
  color: var(--gray-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(--gray-dark-color);
}

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

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

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