본문 바로가기
Language & Framework/실습

유튜브 웹 페이지 클론 코딩. 결과물.

양또띠 2021. 12. 31.

 

 

1시간 이내에 완성할 수 있어야 한다는데 모르는 태그 찾아보는 것 외에도 이래저래 합치면 아마 5~6 시간은 걸린 것 같다 ^^..

 

이번 클론 코딩을 통해 깨달은 것은 Wire frame이 엄청나게 중요하다는 것이다.

유튜브 강의 영상들을 봐도 와이어 프레임을 잘 잡고 시작해야 고생하지 않는다는데, 성격 급한 나는 " 대강대강 잡아놓고 만들면서 맞추지 뭐~" 이런 생각으로 시작했다가 CSS를 작성하는 단계에서 끊임없이 새로운 클래스를 만들고 컨테이너를 다시 나누느라 엄청난 시간을 허비해야 했다..

 

그래도 이번 클론 코딩을 통해 모르는 태그들 찾아 MDN 삼만리 하느라 문제 해결 능력 하나만큼은 많이 발전한 것 같다.

그리고 한 페이지를 통째로 클론 코딩해보니 확실히 고작 상단바 하나 만들 때보다 많은 컨테이너가 필요해서 아마도.. 전보다는 활용 능력이 나아진 것 같다.

 

아직 부족함이 많아 다른 사이트를 더 클론 코딩하며 기본기를 다져야할 것 같다는 생각도 들지만 나에겐 시간이 없는 관계로 (ㅜㅜ) 이제 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="youtube.css">
    <script src="https://kit.fontawesome.com/6cca727381.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=Noto+Serif+KR:wght@200;400;500&display=swap" rel="stylesheet">
    <title>Youtube clone</title>
</head>
<body>
    <header>
        <div class="logo">
            <a href="">
                <i class="fab fa-youtube"></i>
                <span>Youtube</span>
            </a>
        </div>
        <div class="icons">
            <i class="fas fa-search"></i>
            <i class="fas fa-ellipsis-v"></i>
        </div>
    </header>
    <section class="midea">
        <video controls src="video/youtube.mp4"></video>
    </section>
    <section class="infoANDnext">
        <section class="info">
            <ul class="tag">
                <li><a href="">#멍멍로그</a></li>
                <li><a href="">#웅이로그</a></li>
                <li><a href="">#똥강아지</a></li>
            </ul>
            <div class="title">
                <span class="titlename"> 잠자는 웅이 깨우기 그리고 제목을 여러 줄로 만들어야 하는데 더 쓸 말이 없다 아니 이만큼 썼는데도 더 적어야하네.. 대체 뭘로 채워야 3줄을 만들 수 있을까/ Waking up a sleeping dog</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <span class="views">500M views 1 weeks ago</span>
            <ul class="actionbar">
                <li><button><i class="fas fa-thumbs-up"></i></button>20K</li>
                <li><button><i class="fas fa-thumbs-down"></i></button>0</li>
                <li><button><i class="fas fa-share"></i></button>Share</li>
                <li><button><i class="fas fa-plus"></i></button>Save</li>
                <li><button><i class="fas fa-flag"></i></button>Report</li>
            </ul>
            <div class="userinfoANDsubscribe">
                <div class="userinfo">
                    <img src="image/profile.JPG">
                    <div class="username">
                    <span>양또띠</span>
                    <span class="subscriber">10M subscribers</span>
                    </div>
                </div>
                <button class= subscribe>
                    subscribe
                </button>
            </div>
        </section>
        <section class="next">
            <span>Up next</span>
            <ul class="nextvideo">
                <li><img src="image/dog.jpeg">
                    <div class="titleandbutton">
                        <div>
                        <span>얼렁뚱땅 어리둥절 빙글빙글 돌아가는 웅이의 하루 우리 웅이는 정말 못말려~</span>
                            <span>양또띠</span>
                            <span class= "nextviews">5M views</span>
                        </div>
                        <button><i class="fas fa-ellipsis-v"></i></button>
                    </div>
                </li>
                <li><img src="image/sleepingdog.JPG">
                    <div class="titleandbutton">
                        <div>
                            <span>마땅히 지을 제목이 없어서 너무나도 괴롭다 하지만 길이가 너무 짧으니 만들어놓고 없어보여서 길게 쓸 수 밖에 없다</span>
                            <span>양또띠</span>
                            <span class= "nextviews">7M views</span>
                        </div>
                        <button><i class="fas fa-ellipsis-v"></i></button>
                    </div>
                    </li>
                <li><img src="image/cat.jpeg">
                    <div class="titleandbutton">
                        <div>
                            <span>나에게 패배하고 배를 보이며 복종의 자세를 취하는 떼껄룩</span>
                            <span>양또띠</span>
                            <span class= "nextviews">2M views</span>
                        </div>
                        <button><i class="fas fa-ellipsis-v"></i></button>
                    </div>
                    </li>
            </ul>
        </section>
    </section>
</body>
</html>

 

 

:root {
  /* color */
  --color-white: #ffffff;
  --color-red: #fa0b01;
  --color-grey: #919191;
  --color-blue: #245fb0;
  --color-black: #202020;
  /* size */
  --avatar-size: 50px;
  --padding-size: 12px;
  --margin-size: 8px;
  --thumbnail-size: 120px;
  /*font size*/
  --font-verysmall: 10px;
  --font-small: 12px;
  --font-regula: 15px;
  --font-big: 17px;
  --font-giant: 20px;
}

* {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  align-items: center;
}

button {
  border-style: none;
  outline: 0;
  border: 0;
  background-color: white;
}

header a {
  text-decoration: none;
  color: var(--color-white);
}

section a {
  text-decoration: none;
  color: var(--color-blue);
}

li {
  list-style: none;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-big);
  padding: var(--padding-size);
  width: 100%;
  position: sticky;
  top: 0;
}

.logo {
  font-size: var(--font-giant);
  padding-left: var(--padding-size);
}

.icons {
  padding-right: var(--padding-size);
}

.fa-youtube {
  color: var(--color-red);
}

.midea {
  display: flex;
  background-color: var(--color-black);
  width: 100%;
  justify-content: center;
  height: 400px;
}

.midea video {
  width: 100%;
  height: 100%;
  max-width: 800px;
}

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

.tag {
  display: flex;
  color: val(--color-blue);
  justify-content: flex-start;
  width: 100%;
  font-size: var(--font-small);
}

.tag li {
  display: flex;
  padding-left: var(--padding-size);
}

.title {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-big);
  margin: var(--margin-size);
}

.titlename {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  
}

.title > i {
  align-self: start;
}

.views {
  display: flex;
  width: 100%;
  font-size: var(--font-small);
  color: var(--color-grey);
  padding-left: var(--padding-size);
}

.actionbar {
  display: flex;
  justify-content: space-around;
  width: 100%;
  font-size: var(--font-regula);
  padding-top: var(--padding-size);
  padding-bottom: var(--padding-size);
}

.actionbar > li > button {
  font-size: var(--font-giant);
  color: var(--color-grey);
}

.actionbar > li > button:focus {
  color: var(--color-blue);
}

.actionbar > li {
  display: flex;
  flex-direction: column;
  padding: val(--padding-size);
  width: 100%;
}

.userinfoANDsubscribe {
  border-bottom: 1px solid darkgray;
  border-top: 1px solid darkgray;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.userinfo {
  display: flex;
}

.userinfo > img {
  width: var(--avatar-size);
  border-radius: 50%;
  padding: var(--padding-size);
}

.username {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--padding-size);
}

.subscriber {
  color: var(--color-grey);
}

.subscribe {
  text-transform: uppercase;
  padding-right: var(--padding-size);
}

.next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.next > span {
  color: var(--color-grey);
  padding-left: var(--padding-size);
  padding-top: var(--padding-size);
}

.nextvideo > li > img {
  width: var(--thumbnail-size);
  height: var(--thumbnail-size);
}

.next {
  padding-left: var(--padding-size);
}

.next li {
  display: flex;
  align-items: flex-start;
  padding-top: var(--padding-size);
}

.nextvideo li {
  display: flex;
  justify-content: space-between;
}

.next li > .titleandbutton > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--padding-size);
}

.next li > .titleandbutton {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.next li > .titleandbutton > div > span:first-child {
  font-size: var(--font-regula);
  color: var(--color-black);
}

.next li > .titleandbutton > div > span {
  font-size: var(--font-small);
  color: var(--color-grey);
}

.next li > .titleandbutton button {
  padding-right: var(--padding-size);
  padding-left: var(--padding-size);
  align-self: flex-start;
}

@media screen and (min-width: 780px) {
  .infoANDnext {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
저작자표시 비영리 변경금지

'Language & Framework > 실습' 카테고리의 다른 글

바닐라 자바스크립트로 캐러셀(Carousel) 슬라이드 만들기.(문제 해결 완료)  (0) 2022.02.18
HTML , CSS 클론 코딩  (0) 2022.02.17
HTML의 <table> 태그를 이용하여 네이버 장바구니 페이지 만들기  (0) 2022.02.03
드림코딩 엘리 선생님의 포트폴리오 웹사이트 클론코딩 완강 및 후기  (2) 2022.02.02
애플 상단바 따라 만들기. 결과.  (0) 2021.12.28

'Language & Framework/실습' 관련글

티스토리툴바