221126 youtube 클론코딩(4)

geenee·2022년 11월 26일
0

컨텐츠 메뉴바

  • 비디오 목록 위에 고정되어있는 메뉴 구현
  • 사용자가 시청한 영상을 바탕으로 관련된 카테고리를 추천해주는것같음
  • 정해진 항목은 전체랑 최근에 업로드된 동영상 이정도..?
<!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="./main.css" />
    <title>YouTube</title>
    <script
      src="https://kit.fontawesome.com/3fe52ae26b.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <!-- 고정 헤더 -->
      <header>
        <div class="menucontrol">
          <i class="fa-solid fa-bars"></i>
          <div class="logo"><i class="fa-brands fa-youtube"></i>YouTube</div>
        </div>
        <div class="search">
          <div class="s">
            <div class="search-space">
              <i class="fa-solid fa-magnifying-glass"></i>
            </div>
            <input type="text" placeholder="검색" />
          </div>
          <button><i class="fa-solid fa-magnifying-glass"></i></button>
        </div>
        <div class="more">
          <i class="fa-solid fa-ellipsis-vertical"></i>
          <button class="loginbtn">
            <i class="fa-regular fa-circle-user"></i>로그인
          </button>
        </div>
      </header>
      <!-- 좌측 고정 메뉴 -->
      <div class="menucontainer">
        <!-- 메뉴바 큰버전 -->
        <div class="menubar-maxi">
          <div class="home">
            <ul>
              <li class="select">
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
            </ul>
          </div>
          <div class="user">
            <ul>
              <li>
                <i class="fa-regular fa-square-caret-right"></i>
                <span>보관함</span>
              </li>
              <li>
                <i class="fa-regular fa-clock"></i>
                <span>시청 기록</span>
              </li>
            </ul>
          </div>
          <div class="sub">
            <span class="loginm"
              >로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할
              수있습니다.</span
            >
            <button class="loginbtn">
              <i class="fa-regular fa-circle-user"></i>로그인
            </button>
          </div>
          <div class="quest">
            <ul>
              <li>
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
              <li>
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
              <li>
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
            </ul>
          </div>
          <div class="copyright">
            <span
              >정보보도자료저작권문의하기크리에이터광고개발자약관개인정보처리방침정책
              및 안전YouTube 작동의 원리새로운 기능테스트하기 © 2022 Google LLC,
              Sundar Pichai, 1600 AmphitheatreParkway, Mountain View CA 94043,
              USA, 0807-882-594 (무료),yt-support-solutions-kr@google.com,
              호스팅: Google LLC,사업자정보, 불법촬영물 신고</span
            >
          </div>
        </div>
        <!-- 메뉴바 작은버전 -->
        <div class="menubar-mini"></div>
      </div>
      <div class="contents">
        <div class="menu">
          <button class="select">전체</button>
          <button class="wait">뉴스</button>
          <button class="wait">실시간</button>
          <button class="wait">음악</button>
          <button class="wait">게임</button>
          <button class="wait">관광지</button>
          <button class="wait">축구</button>
          <button class="wait">요리</button>
          <button class="wait">반려동물</button>
          <button class="wait">최근에 업로드된 동영상</button>
        </div>
        <div class="videiolist">
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
        </div>
      </div>
    </div>
  </body>
</html>
@font-face {
  font-family: "AlternateGothic";
  src: url(../fonts/AlternateGothicNo2BT.ttf) format("truetype");
}

@font-face {
  font-family: "Handot";
  src: url(../fonts/HANDotumExt.ttf) format("truetype");
  unicode-range: U+AC00-D7A3;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Handot;
}

u,
li {
  list-style: none;
  text-decoration: none;
}

/* 변수화는 나중에.. */
:root {
  /* color */
  /* Size */
  /* Font Size */
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
}

input {
  outline-style: none;
}
body {
  position: relative;
}
.container {
  width: 100%;
  height: 100vh;
}
/* 고정 헤더 */
.container header {
  /* border: solid 1px black; */
  background-color: #ffffff;
  position: fixed;
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
/* 메뉴랑 로고 row 정렬*/
.container header .menucontrol {
  display: flex;
  align-items: center;
}
/* 메뉴 최소화 최대화 */
.container header .fa-bars {
  font-size: 18px;
  padding: 12px;
  margin: 0 18px;
  color: #030303;
  cursor: pointer;
}
/* 메뉴 최소화 최대화 회색 원 생김 */
.container header .fa-bars:hover {
  background-color: #e5e5e5;
  border-radius: 50%;
}
/* 유튜브로고 */
.container header .logo {
  font-size: 22px;
  font-weight: bold;
  color: #030303;
  font-family: AlternateGothic;
  cursor: pointer;
}
.container header .logo .fa-youtube {
  font-size: 26px;
  color: #ff0000;
  padding-right: 3px;
}

/* 검색어 입력칸 */
.container header .search {
  /* border: solid 1px red; */
  width: 33%;
  display: flex;
  align-items: center;
}
.container header .search .s {
  /* border: solid 1px blue; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.container header .search .s .search-space {
  width: 22px;
  height: 42px;
  background-color: #ffffff;
  border-top: solid 1px #cccccc;
  border-left: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-radius: 20px 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container header .search .s .search-space .fa-magnifying-glass {
  font-size: 14px;
  display: none;
}
.container header .search .s input {
  width: 90%;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-left: none;
  color: #888888;
  font-size: 16px;
}

.container header .search .s input:focus {
  border-color: #1c62b9;
}

.container header .s:focus-within .search-space .fa-magnifying-glass {
  display: inline-block;
  text-align: center;
}

.container header .s:focus-within .search-space {
  background-color: #ffffff;
  border-color: #1c62b9;
  width: 48px;
}

/* 검색 버튼 */
.container header .search button {
  width: 66px;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  background-color: #f8f8f8;
  border-radius: 0 20px 20px 0;
}
.container header .search button .fa-magnifying-glass {
  font-size: 17px;
}
.container header .search button:hover {
  background-color: #f0f0f0;
}
/* 더보기랑 로그인버튼 */
.container header .more {
  display: flex;
  align-items: center;
}

.container header .more .fa-ellipsis-vertical {
  padding: 14px;
  margin: auto 10px;
  cursor: pointer;
}

.container .loginbtn {
  width: 100px;
  height: 36px;
  border: solid 1px #e5e5e5;
  background-color: #ffffff;
  color: #065fd4;
  border-radius: 20px;
  margin-right: 25px;
  font-size: 14px;
  font-weight: lighter;
}

.container .loginbtn:hover {
  background-color: #def1ff;
}

.container .loginbtn .fa-circle-user {
  font-size: 21px;
  margin-right: 7px;
}
.menucontainer {
  height: 100%;
  width: 240px;
  background-color: #ffffff;
  /* border: solid 1px black; */
}
/* 최대화 메뉴 */
.container .menucontainer .menubar-maxi {
  /* border: solid 1px black; */
  width: inherit;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0px;
  overflow-y: auto;
}
.container .menucontainer .menubar-maxi div {
  border-bottom: solid 1px #e5e5e5;
  display: flex;
  flex-direction: column;
}
.container .menucontainer .menubar-maxi div ul li:first-child {
  margin-top: 10px;
}
.container .menucontainer .menubar-maxi div ul li:last-child {
  margin-bottom: 10px;
}
.container .menucontainer .menubar-maxi div ul li {
  margin: 0 10px;
  padding: 4px 0;
  border-radius: 10px;
}
.container .menucontainer .menubar-maxi div ul .select {
  background-color: #f2f2f2f2;
}
.container .menucontainer .menubar-maxi div ul li:hover {
  background-color: #f2f2f2f2;
  cursor: pointer;
}
.container .menucontainer .menubar-maxi div ul li i {
  /* border: solid 1px blue; */
  width: 40px;
  text-align: end;
  font-size: 18px;
  margin: 8px 0;
}

.container .menucontainer .menubar-maxi div ul li span {
  /* border: solid 1px green; */
  margin-left: 18px;
  font-size: 14px;
}

.container .menucontainer .menubar-maxi .sub .loginm {
  /* border: solid 1px green; */
  margin: 22px;
  font-size: 14px;
}
.container .menucontainer .menubar-maxi .sub button {
  margin: 12px;
}
.container .menucontainer .menubar-maxi .sub,
.container .menucontainer .menubar-maxi .copyright {
  border-bottom: none;
}

.container .menucontainer .menubar-maxi .copyright span {
  /* border: solid 1px green; */
  margin: 22px;
  font-size: 12px;
}
/* 최소화 메뉴 */

.container .contents {
  width: 100%;
}
/* 동영상 메뉴 */
.container .contents .menu {
  /* border: solid 1px red; */
  background-color: #ffffff;
  position: fixed;
  top: 56px;
  left: 240px;
  right: 0px;
  height: 56px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .contents .menu button {
  /* border: solid 1px red; */
  background-color: #f2f2f2f2;
  padding: 6px 12px;
  margin: 0 5px;
  font-size: 14px;
  border-radius: 8px;
  text-align: center;
}

.container .contents .menu .select {
  background-color: #030303;
  color: #ffffff;
}
.container .contents .menu .wait:hover {
  background-color: #e5e5e5;
}

/* 동영상 리스트뷰 */

.container .contents .videiolist {
  border: solid 1px red;
  position: absolute;
  top: calc(56px * 2);
  left: 240px;
  right: 0px;
}
  • 선택된 메뉴는 검은배경+흰글씨

  • 음악에 커서 올림

좌측 최대화 메뉴 스크롤 꾸미기

  • 기본 스크롤 꾸며주기~

custom_scrollbar
webkit-scrollbar 지원

html 소스는 위와 같음

@font-face {
  font-family: "AlternateGothic";
  src: url(../fonts/AlternateGothicNo2BT.ttf) format("truetype");
}

@font-face {
  font-family: "Handot";
  src: url(../fonts/HANDotumExt.ttf) format("truetype");
  unicode-range: U+AC00-D7A3;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Handot;
}

u,
li {
  list-style: none;
  text-decoration: none;
}

/* 변수화는 나중에.. */
:root {
  /* color */
  /* Size */
  /* Font Size */
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
}

input {
  outline-style: none;
}
body {
  position: relative;
}
/* 스크롤 바 커스텀 */
/* total width */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 12px 12px transparent;
  border: solid 4px transparent;
}

::-webkit-scrollbar-thumb {
  height: 30%;
  box-shadow: inset 0 0 12px 12px #606060;
  border: solid 4px transparent;
  border-radius: 14px;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 12px 12px #909090;
}
/* ::-webkit-scrollbar {
    display: none;
} */

/* 메인 화면*/
.container {
  width: 100%;
  height: 100%;
}
/* 고정 헤더 */
.container header {
  /* border: solid 1px black; */
  background-color: #ffffff;
  position: fixed;
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
/* 메뉴랑 로고 row 정렬*/
.container header .menucontrol {
  display: flex;
  align-items: center;
}
/* 메뉴 최소화 최대화 */
.container header .fa-bars {
  font-size: 18px;
  padding: 12px;
  margin: 0 18px;
  color: #030303;
  cursor: pointer;
}
/* 메뉴 최소화 최대화 회색 원 생김 */
.container header .fa-bars:hover {
  background-color: #e5e5e5;
  border-radius: 50%;
}
/* 유튜브로고 */
.container header .logo {
  font-size: 22px;
  font-weight: bold;
  color: #030303;
  font-family: AlternateGothic;
  cursor: pointer;
}
.container header .logo .fa-youtube {
  font-size: 26px;
  color: #ff0000;
  padding-right: 3px;
}

/* 검색어 입력칸 */
.container header .search {
  /* border: solid 1px red; */
  width: 33%;
  display: flex;
  align-items: center;
}
.container header .search .s {
  /* border: solid 1px blue; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.container header .search .s .search-space {
  width: 22px;
  height: 42px;
  background-color: #ffffff;
  border-top: solid 1px #cccccc;
  border-left: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-radius: 20px 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container header .search .s .search-space .fa-magnifying-glass {
  font-size: 14px;
  display: none;
}
.container header .search .s input {
  width: 90%;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-left: none;
  color: #888888;
  font-size: 16px;
}

.container header .search .s input:focus {
  border-color: #1c62b9;
}

.container header .s:focus-within .search-space .fa-magnifying-glass {
  display: inline-block;
  text-align: center;
}

.container header .s:focus-within .search-space {
  background-color: #ffffff;
  border-color: #1c62b9;
  width: 48px;
}

/* 검색 버튼 */
.container header .search button {
  width: 66px;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  background-color: #f8f8f8;
  border-radius: 0 20px 20px 0;
}
.container header .search button .fa-magnifying-glass {
  font-size: 17px;
}
.container header .search button:hover {
  background-color: #f0f0f0;
}
/* 더보기랑 로그인버튼 */
.container header .more {
  display: flex;
  align-items: center;
}

.container header .more .fa-ellipsis-vertical {
  padding: 14px;
  margin: auto 10px;
  cursor: pointer;
}

.container .loginbtn {
  width: 100px;
  height: 36px;
  border: solid 1px #e5e5e5;
  background-color: #ffffff;
  color: #065fd4;
  border-radius: 20px;
  margin-right: 25px;
  font-size: 14px;
  font-weight: lighter;
}

.container .loginbtn:hover {
  background-color: #def1ff;
}

.container .loginbtn .fa-circle-user {
  font-size: 21px;
  margin-right: 7px;
}

.container .menucontainer {
  /* border: solid 1px black; */
  height: 100%;
  width: 240px;
  background-color: #ffffff;
}
/* 최대화 메뉴 */
.container .menucontainer .menubar-maxi {
  /* border: solid 1px black; */
  width: inherit;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*메뉴 스크롤*/
.container .menucontainer .menubar-maxi::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #ffffff;
}
.container .menucontainer .menubar-maxi:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #909090;
}
.container .menucontainer .menubar-maxi div {
  border-bottom: solid 1px #e5e5e5;
  display: flex;
  flex-direction: column;
}
.container .menucontainer .menubar-maxi div ul li:first-child {
  margin-top: 10px;
}
.container .menucontainer .menubar-maxi div ul li:last-child {
  margin-bottom: 10px;
}
.container .menucontainer .menubar-maxi div ul li {
  margin: 0 10px;
  padding: 4px 0;
  border-radius: 10px;
}
.container .menucontainer .menubar-maxi div ul .select {
  background-color: #f2f2f2f2;
}
.container .menucontainer .menubar-maxi div ul li:hover {
  background-color: #f2f2f2f2;
  cursor: pointer;
}
.container .menucontainer .menubar-maxi div ul li i {
  /* border: solid 1px blue; */
  width: 40px;
  text-align: end;
  font-size: 18px;
  margin: 8px 0;
}

.container .menucontainer .menubar-maxi div ul li span {
  /* border: solid 1px green; */
  margin-left: 18px;
  font-size: 14px;
}

.container .menucontainer .menubar-maxi .sub .loginm {
  /* border: solid 1px green; */
  margin: 22px;
  font-size: 14px;
}
.container .menucontainer .menubar-maxi .sub button {
  margin: 12px;
}
.container .menucontainer .menubar-maxi .sub,
.container .menucontainer .menubar-maxi .copyright {
  border-bottom: none;
}

.container .menucontainer .menubar-maxi .copyright span {
  /* border: solid 1px green; */
  margin: 22px;
  font-size: 12px;
}
/* 최소화 메뉴 */

.container .contents {
  width: 100%;
}
/* 동영상 메뉴 */
.container .contents .menu {
  /* border: solid 1px red; */
  background-color: #ffffff;
  position: fixed;
  top: 56px;
  left: 240px;
  right: 0px;
  height: 56px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .contents .menu button {
  /* border: solid 1px red; */
  background-color: #f2f2f2f2;
  padding: 6px 12px;
  margin: 0 5px;
  font-size: 14px;
  border-radius: 8px;
  text-align: center;
}

.container .contents .menu .select {
  background-color: #030303;
  color: #ffffff;
}
.container .contents .menu .wait:hover {
  background-color: #e5e5e5;
}

/* 동영상 리스트뷰 */

.container .contents .videiolist {
  border: solid 1px red;
  position: absolute;
  top: calc(56px * 2);
  left: 240px;
  right: 0px;
}

  • body 스크롤에 마우스 올리면 색깔 바뀜

  • 스크롤 생기게 하기(hover 아닐때는 배경색과 같게해주고 메뉴박스에 hover되면 색깔을 변경해준다)

근데 메뉴 스크롤 내리다가 끝까지 가면 body 스크롤도 내려감
그것을 스크롤 체이닝이라고 부른다.
overscroll-behavior: contain 속성 사용하기
Take control of your scroll - customizing pull-to-refresh and overflow effects

해결
스크롤이 생기는 엘리먼트에
overscroll-behavior: contain;를 써준다.

좌측 최소화 메뉴

<!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="./main.css" />
    <title>YouTube</title>
    <script
      src="https://kit.fontawesome.com/3fe52ae26b.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <!-- 고정 헤더 -->
      <header>
        <div class="menucontrol">
          <i class="fa-solid fa-bars"></i>
          <div class="logo"><i class="fa-brands fa-youtube"></i>YouTube</div>
        </div>
        <div class="search">
          <div class="s">
            <div class="search-space">
              <i class="fa-solid fa-magnifying-glass"></i>
            </div>
            <input type="text" placeholder="검색" />
          </div>
          <button><i class="fa-solid fa-magnifying-glass"></i></button>
        </div>
        <div class="more">
          <i class="fa-solid fa-ellipsis-vertical"></i>
          <button class="loginbtn">
            <i class="fa-regular fa-circle-user"></i>로그인
          </button>
        </div>
      </header>
      <!-- 좌측 고정 메뉴 -->
      <div class="menucontainer">
        <!-- 메뉴바 큰버전 -->
        <div class="menubar-maxi">
          <div class="home">
            <ul>
              <li class="select">
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
            </ul>
          </div>
          <div class="user">
            <ul>
              <li>
                <i class="fa-regular fa-square-caret-right"></i>
                <span>보관함</span>
              </li>
              <li>
                <i class="fa-regular fa-clock"></i>
                <span>시청 기록</span>
              </li>
            </ul>
          </div>
          <div class="sub">
            <span class="loginm"
              >로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할
              수있습니다.</span
            >
            <button class="loginbtn">
              <i class="fa-regular fa-circle-user"></i>로그인
            </button>
          </div>
          <div class="quest">
            <ul>
              <li>
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
              <li>
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
              <li>
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
            </ul>
          </div>
          <div class="copyright">
            <span
              >정보보도자료저작권문의하기크리에이터광고개발자약관개인정보처리방침정책
              및 안전YouTube 작동의 원리새로운 기능테스트하기 © 2022 Google LLC,
              Sundar Pichai, 1600 AmphitheatreParkway, Mountain View CA 94043,
              USA, 0807-882-594 (무료),yt-support-solutions-kr@google.com,
              호스팅: Google LLC,사업자정보, 불법촬영물 신고</span
            >
          </div>
        </div>
        <!-- 메뉴바 작은버전 -->
        <div class="menubar-mini close">
          <ul>
            <li>
              <i class="fa-solid fa-house"></i>
              <span></span>
            </li>
            <li>
              <i class="fa-solid fa-bolt"></i>
              <span>Shorts</span>
            </li>
            <li>
              <i class="fa-regular fa-square-plus"></i>
              <span>구독</span>
            </li>
            <li>
              <i class="fa-regular fa-square-caret-right"></i>
              <span>보관함</span>
            </li>
            <li>
              <i class="fa-regular fa-clock"></i>
              <span>시청 기록</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="contents maxi">
        <div class="menu">
          <button class="select">전체</button>
          <button class="wait">뉴스</button>
          <button class="wait">실시간</button>
          <button class="wait">음악</button>
          <button class="wait">게임</button>
          <button class="wait">관광지</button>
          <button class="wait">축구</button>
          <button class="wait">요리</button>
          <button class="wait">반려동물</button>
          <button class="wait">최근에 업로드된 동영상</button>
        </div>
        <div class="videiolist">
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
          <img src="../img/video/thumbnail_02.jpg" alt="" />
        </div>
      </div>
    </div>
  </body>
</html>
@font-face {
  font-family: "AlternateGothic";
  src: url(../fonts/AlternateGothicNo2BT.ttf) format("truetype");
}

@font-face {
  font-family: "Handot";
  src: url(../fonts/HANDotumExt.ttf) format("truetype");
  unicode-range: U+AC00-D7A3;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Handot;
}

u,
li {
  list-style: none;
  text-decoration: none;
}

/* 변수화는 나중에.. */
:root {
  /* color */
  /* Size */
  /* Font Size */
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
}

input {
  outline-style: none;
}
body {
  position: relative;
}
/* 스크롤 바 커스텀 */
/* total width */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 12px 12px transparent;
  border: solid 4px transparent;
}

::-webkit-scrollbar-thumb {
  height: 30%;
  box-shadow: inset 0 0 12px 12px #606060;
  border: solid 4px transparent;
  border-radius: 14px;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 12px 12px #909090;
}
/* ::-webkit-scrollbar {
    display: none;
} */

/* 메인 화면*/
.container {
  width: 100%;
  height: 100%;
}
/* 고정 헤더 */
.container header {
  /* border: solid 1px black; */
  background-color: #ffffff;
  position: fixed;
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
/* 메뉴랑 로고 row 정렬*/
.container header .menucontrol {
  display: flex;
  align-items: center;
}
/* 메뉴 최소화 최대화 */
.container header .fa-bars {
  font-size: 18px;
  padding: 12px;
  margin: 0 18px;
  color: #030303;
  cursor: pointer;
}
/* 메뉴 최소화 최대화 회색 원 생김 */
.container header .fa-bars:hover {
  background-color: #e5e5e5;
  border-radius: 50%;
}
/* 유튜브로고 */
.container header .logo {
  font-size: 22px;
  font-weight: bold;
  color: #030303;
  font-family: AlternateGothic;
  cursor: pointer;
}
.container header .logo .fa-youtube {
  font-size: 26px;
  color: #ff0000;
  padding-right: 3px;
}

/* 검색어 입력칸 */
.container header .search {
  /* border: solid 1px red; */
  width: 33%;
  display: flex;
  align-items: center;
}
.container header .search .s {
  /* border: solid 1px blue; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.container header .search .s .search-space {
  width: 22px;
  height: 42px;
  background-color: #ffffff;
  border-top: solid 1px #cccccc;
  border-left: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-radius: 20px 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container header .search .s .search-space .fa-magnifying-glass {
  font-size: 14px;
  display: none;
}
.container header .search .s input {
  width: 90%;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-left: none;
  color: #888888;
  font-size: 16px;
}

.container header .search .s input:focus {
  border-color: #1c62b9;
}

.container header .s:focus-within .search-space .fa-magnifying-glass {
  display: inline-block;
  text-align: center;
}

.container header .s:focus-within .search-space {
  background-color: #ffffff;
  border-color: #1c62b9;
  width: 48px;
}

/* 검색 버튼 */
.container header .search button {
  width: 66px;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  background-color: #f8f8f8;
  border-radius: 0 20px 20px 0;
}
.container header .search button .fa-magnifying-glass {
  font-size: 17px;
}
.container header .search button:hover {
  background-color: #f0f0f0;
}
/* 더보기랑 로그인버튼 */
.container header .more {
  display: flex;
  align-items: center;
}

.container header .more .fa-ellipsis-vertical {
  padding: 14px;
  margin: auto 10px;
  cursor: pointer;
}

.container .loginbtn {
  width: 100px;
  height: 36px;
  border: solid 1px #e5e5e5;
  background-color: #ffffff;
  color: #065fd4;
  border-radius: 20px;
  margin-right: 25px;
  font-size: 14px;
  font-weight: lighter;
}

.container .loginbtn:hover {
  background-color: #def1ff;
}

.container .loginbtn .fa-circle-user {
  font-size: 21px;
  margin-right: 7px;
}

.container .menucontainer {
  /* border: solid 1px black; */
  height: 100%;
  width: 240px;
  background-color: #ffffff;
}

/* 최대화 메뉴 */
.container .menucontainer .menubar-maxi {
  width: inherit;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*메뉴 스크롤*/
.container .menucontainer .menubar-maxi::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #ffffff;
}
.container .menucontainer .menubar-maxi:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #909090;
}
.container .menucontainer .menubar-maxi div {
  border-bottom: solid 1px #e5e5e5;
  display: flex;
  flex-direction: column;
}
.container .menucontainer .menubar-maxi div ul li:first-child {
  margin-top: 10px;
}
.container .menucontainer .menubar-maxi div ul li:last-child {
  margin-bottom: 10px;
}
.container .menucontainer .menubar-maxi div ul li {
  margin: 0 10px;
  padding: 4px 0;
  border-radius: 10px;
}
.container .menucontainer .menubar-maxi div ul .select {
  background-color: #f2f2f2f2;
}
.container .menucontainer .menubar-maxi div ul li:hover {
  background-color: #f2f2f2f2;
  cursor: pointer;
}
.container .menucontainer .menubar-maxi div ul li i {
  /* border: solid 1px blue; */
  width: 40px;
  text-align: end;
  font-size: 18px;
  margin: 8px 0;
}

.container .menucontainer .menubar-maxi div ul li span {
  /* border: solid 1px green; */
  margin-left: 18px;
  font-size: 14px;
}

.container .menucontainer .menubar-maxi .sub .loginm {
  /* border: solid 1px green; */
  margin: 22px;
  font-size: 14px;
}
.container .menucontainer .menubar-maxi .sub button {
  margin: 12px;
}
.container .menucontainer .menubar-maxi .sub,
.container .menucontainer .menubar-maxi .copyright {
  border-bottom: none;
}

.container .menucontainer .menubar-maxi .copyright span {
  /* border: solid 1px green; */
  margin: 22px;
  font-size: 12px;
}
/* 최소화 메뉴 */
.container .menucontainer .menubar-mini {
  /* border: solid 1px black; */
  width: 72px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0px;
}
.container .menucontainer .menubar-mini ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 0;
  margin-left: 6px;
  margin-right: 4px;
  border-radius: 10px;
}
.container .menucontainer .menubar-mini ul li:hover {
  background-color: #f2f2f2f2;
  cursor: pointer;
}
.container .menucontainer .menubar-mini ul li:first-child {
  margin-top: 3px;
}
.container .menucontainer .menubar-mini ul li i {
  font-size: 20px;
}
.container .menucontainer .menubar-mini ul li span {
  font-size: 6px;
  margin-top: 4px;
}
/* 메뉴바 숨기기 */
.container .menucontainer .close {
  display: none;
}

/* 동영상 컨텐츠 */
.container .contents {
  width: 100%;
}
/* 동영상 메뉴 */
.container .maxi {
  left: 240px;
}
.container .mini {
  left: 72px;
}
.container .contents .menu {
  /* border: solid 1px red; */
  background-color: #ffffff;
  position: fixed;
  top: 56px;
  left: inherit;
  right: 0px;
  height: 56px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .contents .menu button {
  /* border: solid 1px red; */
  background-color: #f2f2f2f2;
  padding: 6px 12px;
  margin: 0 5px;
  font-size: 14px;
  border-radius: 8px;
  text-align: center;
}

.container .contents .menu .select {
  background-color: #030303;
  color: #ffffff;
}
.container .contents .menu .wait:hover {
  background-color: #e5e5e5;
}

/* 동영상 리스트뷰 */

.container .contents .videiolist {
  border: solid 1px red;
  position: absolute;
  top: calc(56px * 2);
  left: inherit;
  right: 0px;
}

메뉴 열고 닫기
menucontainer안에 최대 최소 div 두개 있음 닫을 엘리먼트에 클래스아이디 close 추가

contents안에 menu랑 videiolist left 값 menu에 맞추기
contents div에 클래스아이디 maxi, mini 넣어서 폭 변화 적용

  • 최소화 메뉴

  • 최대화 메뉴

컨텐츠 비디오 리스트뷰

일단 하드코딩으로 비디오 목록 집어넣음
리스트 안에 있는 엘리먼트들 크기는 다 %로 넣음(width,height,font-size,margin,padding 등)
폰트는 vw+%로 작성 -> 이렇게 쓰는지는 모르겠습니다만..?

<!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="./main.css" />
    <title>YouTube</title>
    <script
      src="https://kit.fontawesome.com/3fe52ae26b.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <!-- 고정 헤더 -->
      <header>
        <div class="menucontrol">
          <i class="fa-solid fa-bars"></i>
          <div class="logo"><i class="fa-brands fa-youtube"></i>YouTube</div>
        </div>
        <div class="search">
          <div class="s">
            <div class="search-space">
              <i class="fa-solid fa-magnifying-glass"></i>
            </div>
            <input type="text" placeholder="검색" />
          </div>
          <button><i class="fa-solid fa-magnifying-glass"></i></button>
        </div>
        <div class="more">
          <i class="fa-solid fa-ellipsis-vertical"></i>
          <button class="loginbtn">
            <i class="fa-regular fa-circle-user"></i>로그인
          </button>
        </div>
      </header>
      <!-- 좌측 고정 메뉴 -->
      <div class="menucontainer">
        <!-- 메뉴바 큰버전 -->
        <div class="menubar-maxi">
          <div class="home">
            <ul>
              <li class="select">
                <i class="fa-solid fa-house"></i>
                <span></span>
              </li>
              <li>
                <i class="fa-solid fa-bolt"></i>
                <span>Shorts</span>
              </li>
              <li>
                <i class="fa-regular fa-square-plus"></i>
                <span>구독</span>
              </li>
            </ul>
          </div>
          <div class="user">
            <ul>
              <li>
                <i class="fa-regular fa-square-caret-right"></i>
                <span>보관함</span>
              </li>
              <li>
                <i class="fa-regular fa-clock"></i>
                <span>시청 기록</span>
              </li>
            </ul>
          </div>
          <div class="sub">
            <span class="loginm"
              >로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할
              수있습니다.</span
            >
            <button class="loginbtn">
              <i class="fa-regular fa-circle-user"></i>로그인
            </button>
          </div>
          <div class="quest">
            <span class="title">탐색</span>
            <ul>
              <li>
                <i class="fa-solid fa-fire"></i>
                <span>인기 급상승</span>
              </li>
              <li>
                <i class="fa-solid fa-music"></i>
                <span>음악</span>
              </li>
              <li>
                <i class="fa-solid fa-film"></i>
                <span>영화</span>
              </li>
              <li>
                <i class="fa-solid fa-gamepad"></i>
                <span>게임</span>
              </li>
              <li>
                <i class="fa-solid fa-trophy"></i>
                <span>스포츠</span>
              </li>
              <li>
                <i class="fa-regular fa-lightbulb"></i>
                <span>학습</span>
              </li>
            </ul>
          </div>
          <div class="setting">
            <span class="title">설정</span>
            <ul>
              <li>
                <i class="fa-solid fa-gear"></i>
                <span>설정</span>
              </li>
              <li>
                <i class="fa-solid fa-gear"></i>
                <span>설정</span>
              </li>
              <li>
                <i class="fa-solid fa-gear"></i>
                <span>설정</span>
              </li>
              <li>
                <i class="fa-solid fa-gear"></i>
                <span>설정</span>
              </li>
            </ul>
          </div>
          <div class="copyright">
            <span
              >정보보도자료저작권문의하기크리에이터광고개발자약관개인정보처리방침정책
              및 안전YouTube 작동의 원리새로운 기능테스트하기 © 2022 Google LLC,
              Sundar Pichai, 1600 AmphitheatreParkway, Mountain View CA 94043,
              USA, 0807-882-594 (무료),yt-support-solutions-kr@google.com,
              호스팅: Google LLC,사업자정보, 불법촬영물 신고</span
            >
          </div>
        </div>
        <!-- 메뉴바 작은버전 -->
        <div class="menubar-mini">
          <ul>
            <li>
              <i class="fa-solid fa-house"></i>
              <span></span>
            </li>
            <li>
              <i class="fa-solid fa-bolt"></i>
              <span>Shorts</span>
            </li>
            <li>
              <i class="fa-regular fa-square-plus"></i>
              <span>구독</span>
            </li>
            <li>
              <i class="fa-regular fa-square-caret-right"></i>
              <span>보관함</span>
            </li>
            <li>
              <i class="fa-regular fa-clock"></i>
              <span>시청 기록</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="contents maxi">
        <div class="menu">
          <button class="select">전체</button>
          <button class="wait">뉴스</button>
          <button class="wait">실시간</button>
          <button class="wait">음악</button>
          <button class="wait">게임</button>
          <button class="wait">관광지</button>
          <button class="wait">축구</button>
          <button class="wait">요리</button>
          <button class="wait">반려동물</button>
          <button class="wait">최근에 업로드된 동영상</button>
        </div>
        <div class="videiolist">
          <ul>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">첫번째 영상입니다</span>
                    <span class="name">geenee</span>
                    <div class="etc">
                      <span class="views">조회수 138회</span>
                      <span>·</span>
                      <span class="time">3시간 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">이거 진심 맛있습니다!</span>
                    <span class="name">먹방TV</span>
                    <div class="etc">
                      <span class="views">조회수 126만회</span>
                      <span>·</span>
                      <span class="time">1년 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >카카오 VS 라인 과연 승자는? 더 귀여운 캐릭터를
                      골라주세요!</span
                    >
                    <span class="name">카카오&네이버</span>
                    <div class="etc">
                      <span class="views">조회수 56만회</span>
                      <span>·</span>
                      <span class="time">한달 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >안녕하세요 제이름은 홍길동이구요 이게 두번째 영상입니다
                      잘부탁드립니다 예쁘게 봐주세요</span
                    >
                    <span class="name">홍길동 TV</span>
                    <div class="etc">
                      <span class="views">조회수 50회</span>
                      <span>·</span>
                      <span class="time">3개월 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">첫번째 영상입니다</span>
                    <span class="name">geenee</span>
                    <div class="etc">
                      <span class="views">조회수 138회</span>
                      <span>·</span>
                      <span class="time">3시간 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">이거 진심 맛있습니다!</span>
                    <span class="name">먹방TV</span>
                    <div class="etc">
                      <span class="views">조회수 126만회</span>
                      <span>·</span>
                      <span class="time">1년 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >카카오 VS 라인 과연 승자는? 더 귀여운 캐릭터를
                      골라주세요!</span
                    >
                    <span class="name">카카오&네이버</span>
                    <div class="etc">
                      <span class="views">조회수 56만회</span>
                      <span>·</span>
                      <span class="time">한달 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >안녕하세요 제이름은 홍길동이구요 이게 두번째 영상입니다
                      잘부탁드립니다 예쁘게 봐주세요</span
                    >
                    <span class="name">홍길동 TV</span>
                    <div class="etc">
                      <span class="views">조회수 50회</span>
                      <span>·</span>
                      <span class="time">3개월 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">첫번째 영상입니다</span>
                    <span class="name">geenee</span>
                    <div class="etc">
                      <span class="views">조회수 138회</span>
                      <span>·</span>
                      <span class="time">3시간 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">이거 진심 맛있습니다!</span>
                    <span class="name">먹방TV</span>
                    <div class="etc">
                      <span class="views">조회수 126만회</span>
                      <span>·</span>
                      <span class="time">1년 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >카카오 VS 라인 과연 승자는? 더 귀여운 캐릭터를
                      골라주세요!</span
                    >
                    <span class="name">카카오&네이버</span>
                    <div class="etc">
                      <span class="views">조회수 56만회</span>
                      <span>·</span>
                      <span class="time">한달 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >안녕하세요 제이름은 홍길동이구요 이게 두번째 영상입니다
                      잘부탁드립니다 예쁘게 봐주세요</span
                    >
                    <span class="name">홍길동 TV</span>
                    <div class="etc">
                      <span class="views">조회수 50회</span>
                      <span>·</span>
                      <span class="time">3개월 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">첫번째 영상입니다</span>
                    <span class="name">geenee</span>
                    <div class="etc">
                      <span class="views">조회수 138회</span>
                      <span>·</span>
                      <span class="time">3시간 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title">이거 진심 맛있습니다!</span>
                    <span class="name">먹방TV</span>
                    <div class="etc">
                      <span class="views">조회수 126만회</span>
                      <span>·</span>
                      <span class="time">1년 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_03.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_02.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >카카오 VS 라인 과연 승자는? 더 귀여운 캐릭터를
                      골라주세요!</span
                    >
                    <span class="name">카카오&네이버</span>
                    <div class="etc">
                      <span class="views">조회수 56만회</span>
                      <span>·</span>
                      <span class="time">한달 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="videoitem">
              <div class="videoview">
                <div class="thumbnail">
                  <img src="../img/video/thumbnail_04.jpg" alt="" />
                </div>
                <div class="info">
                  <i class="fa-solid fa-ellipsis-vertical"></i>
                  <div class="channelimg">
                    <img src="../img/channel/channel_03.png" alt="" />
                  </div>
                  <div class="text">
                    <span class="title"
                      >안녕하세요 제이름은 홍길동이구요 이게 두번째 영상입니다
                      잘부탁드립니다 예쁘게 봐주세요</span
                    >
                    <span class="name">홍길동 TV</span>
                    <div class="etc">
                      <span class="views">조회수 50회</span>
                      <span>·</span>
                      <span class="time">3개월 전</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
@font-face {
  font-family: "AlternateGothic";
  src: url(../fonts/AlternateGothicNo2BT.ttf) format("truetype");
}

@font-face {
  font-family: "Handot";
  src: url(../fonts/HANDotumExt.ttf) format("truetype");
  unicode-range: U+AC00-D7A3;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Handot;
}

u,
li {
  list-style: none;
  text-decoration: none;
}

/* 변수화는 나중에.. */
:root {
  /* color */
  /* Size */
  /* Font Size */
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
}

input {
  outline-style: none;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 스크롤 바 커스텀 */
/* total width */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 12px 12px transparent;
  border: solid 4px transparent;
}

::-webkit-scrollbar-thumb {
  height: 30%;
  box-shadow: inset 0 0 12px 12px #606060;
  border: solid 4px transparent;
  border-radius: 14px;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 12px 12px #909090;
}
/* ::-webkit-scrollbar {
    display: none;
} */

/* 메인 화면*/
.container {
  width: 100%;
  height: 100%;
}
/* 고정 헤더 */
.container header {
  /* border: solid 1px black; */
  background-color: #ffffff;
  position: fixed;
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
/* 메뉴랑 로고 row 정렬*/
.container header .menucontrol {
  display: flex;
  align-items: center;
}
/* 메뉴 최소화 최대화 */
.container header .fa-bars {
  font-size: 1.125rem;
  padding: 12px;
  margin: 0 18px;
  color: #030303;
  cursor: pointer;
}
/* 메뉴 최소화 최대화 회색 원 생김 */
.container header .fa-bars:hover {
  background-color: #e5e5e5;
  border-radius: 50%;
}
/* 유튜브로고 */
.container header .logo {
  font-size: 1.375rem;
  font-weight: bold;
  color: #030303;
  font-family: AlternateGothic;
  cursor: pointer;
}
.container header .logo .fa-youtube {
  font-size: 1.625rem;
  color: #ff0000;
  padding-right: 3px;
}

/* 검색어 입력칸 */
.container header .search {
  /* border: solid 1px red; */
  width: 33%;
  display: flex;
  align-items: center;
}
.container header .search .s {
  /* border: solid 1px blue; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.container header .search .s .search-space {
  width: 22px;
  height: 42px;
  background-color: #ffffff;
  border-top: solid 1px #cccccc;
  border-left: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-radius: 20px 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container header .search .s .search-space .fa-magnifying-glass {
  font-size: 0.875rem;
  display: none;
}
.container header .search .s input {
  width: 90%;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-left: none;
  color: #888888;
  font-size: 1rem;
}

.container header .search .s input:focus {
  border-color: #1c62b9;
}

.container header .s:focus-within .search-space .fa-magnifying-glass {
  display: inline-block;
  text-align: center;
}

.container header .s:focus-within .search-space {
  background-color: #ffffff;
  border-color: #1c62b9;
  width: 48px;
}

/* 검색 버튼 */
.container header .search button {
  width: 66px;
  height: 42px;
  border-top: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  background-color: #f8f8f8;
  border-radius: 0 20px 20px 0;
}
.container header .search button .fa-magnifying-glass {
  font-size: 1rem;
}
.container header .search button:hover {
  background-color: #f0f0f0;
}
/* 더보기랑 로그인버튼 */
.container header .more {
  display: flex;
  align-items: center;
}

.container header .more .fa-ellipsis-vertical {
  padding: 14px;
  margin: auto 10px;
  cursor: pointer;
}

.container .loginbtn {
  width: 100px;
  height: 36px;
  border: solid 1px #e5e5e5;
  background-color: #ffffff;
  color: #065fd4;
  border-radius: 20px;
  margin-right: 25px;
  font-size: 0.875rem;
  font-weight: lighter;
}

.container .loginbtn:hover {
  background-color: #def1ff;
}

.container .loginbtn .fa-circle-user {
  font-size: 1.313rem;
  margin-right: 7px;
}

.container .menucontainer {
  /* border: solid 1px black; */
  height: 100%;
  width: 240px;
  background-color: #ffffff;
  /* display: none; */
}

/* 최대화 메뉴 */
.container .menucontainer .menubar-maxi {
  width: inherit;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* display: none; */
}

/*메뉴 스크롤*/
.container .menucontainer .menubar-maxi::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #ffffff;
}
.container .menucontainer .menubar-maxi:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 12px 12px #909090;
}
.container .menucontainer .menubar-maxi div {
  /* border: solid 1px red; */
  border-bottom: solid 1px #e5e5e5;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.container .menucontainer .menubar-maxi div > .title {
  /* border: solid 1px red; */
  font-size: 1rem;
  padding: 18px 0 0 18px;
}
.container .menucontainer .menubar-maxi div ul li:first-child {
  margin-top: 10px;
}
.container .menucontainer .menubar-maxi div ul li:last-child {
  margin-bottom: 10px;
}
.container .menucontainer .menubar-maxi div ul li {
  padding: 4px 0;
  border-radius: 10px;
}
.container .menucontainer .menubar-maxi div ul .select {
  background-color: #f2f2f2f2;
}
.container .menucontainer .menubar-maxi div ul li:hover {
  background-color: #f2f2f2f2;
  cursor: pointer;
}
.container .menucontainer .menubar-maxi div ul li i {
  /* border: solid 1px blue; */
  width: 40px;
  text-align: end;
  font-size: 1.125rem;
  margin: 8px 0;
}

.container .menucontainer .menubar-maxi div ul li span {
  /* border: solid 1px green; */
  margin-left: 18px;
  font-size: 0.875rem;
}

.container .menucontainer .menubar-maxi .sub .loginm {
  /* border: solid 1px green; */
  margin: 16px;
  font-size: 0.875rem;
}
.container .menucontainer .menubar-maxi .sub button {
  margin: 12px;
}
/* .container .menucontainer .menubar-maxi .sub, */
.container .menucontainer .menubar-maxi .copyright {
  border-bottom: none;
}

.container .menucontainer .menubar-maxi .copyright span {
  /* border: solid 1px green; */
  margin: 16px;
  font-size: 0.75rem;
}
/* 최소화 메뉴 */
.container .menucontainer .menubar-mini {
  /* border: solid 1px black; */
  width: 72px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0px;
  display: none;
}
.container .menucontainer .menubar-mini ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 0;
  margin-left: 6px;
  margin-right: 4px;
  border-radius: 10px;
}
.container .menucontainer .menubar-mini ul li:hover {
  background-color: #f2f2f2f2;
  cursor: pointer;
}
.container .menucontainer .menubar-mini ul li:first-child {
  margin-top: 3px;
}
.container .menucontainer .menubar-mini ul li i {
  font-size: 1.25rem;
}
.container .menucontainer .menubar-mini ul li span {
  font-size: 0.375rem;
  margin-top: 4px;
}

/* 동영상 컨텐츠 */
.container .contents {
  /* border: solid 1px red; */
  left: 0px;
  height: 100%;
}
/* 동영상 메뉴 */
.container .maxi {
  left: 240px;
}
.container .mini {
  left: 72px;
}
.container .contents .menu {
  /* border: solid 1px blue; */
  background-color: #ffffff;
  position: fixed;
  top: 56px;
  left: inherit;
  right: 0px;
  height: 56px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .contents .menu button {
  /* border: solid 1px red; */
  background-color: #f2f2f2f2;
  padding: 6px 12px;
  margin: 0 5px;
  font-size: 0.875rem;
  border-radius: 8px;
  text-align: center;
}

.container .contents .menu .select {
  background-color: #030303;
  color: #ffffff;
}
.container .contents .menu .wait:hover {
  background-color: #e5e5e5;
}

/* 동영상 리스트뷰 */

.container .contents .videiolist {
  /* border: solid 1px blue; */
  position: absolute;
  top: calc(56px * 2);
  left: inherit;
  right: 0;
  bottom: 0;
  padding-top: 22px;
}
.container .contents .videiolist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 18px;
  justify-content: center;
}
.container .contents .videiolist .videoitem {
  /* border: solid 3px green; */
  position: relative;
  width: 21.5%;
  padding-top: 20%;
  cursor: pointer;
}

.container .contents .videiolist .videoitem .videoview {
  /* border: solid 3px red; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.container .contents .videiolist .videoitem .videoview .thumbnail {
  width: 100%;
  height: 65%;
}
.container .contents .videiolist .videoitem .videoview .thumbnail img {
  /* border: solid 1px red; */
  width: 100%;
  height: 100%;
  border-radius: 3% / 6.5%;
}
.container .contents .videiolist .videoitem .videoview .info {
  /* border: solid 1px blue; */
  width: 100%;
  height: 35%;
  display: flex;
  position: relative;
}
.container .contents .videiolist .videoitem .videoview .info > i {
  font-size: 110%;
  position: absolute;
  top: 14px;
  right: 12px;
  display: none;
}
.container .contents .videiolist .videoitem .videoview .info:hover > i {
  display: inline;
}
.container .contents .videiolist .videoitem .videoview .info .channelimg {
  /* border: solid 1px red; */
  width: 15%;
  height: 100%;
}

.container .contents .videiolist .videoitem .videoview .info .channelimg img {
  /* border: solid 1px red; */
  width: 76%;
  height: 34%;
  margin: 20% 20% 0 0;
  border-radius: 100%;
}

.container .contents .videiolist .videoitem .videoview .info .text {
  /* border: solid 1px red; */
  width: 88%;
  height: 100%;
  padding-right: 10%;
  color: #6f6f6f;
  display: inline-block;
}

.container .contents .videiolist .videoitem .videoview .info .text .title {
  font-size: calc(0.5vw + 50%);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 4.5%;
  margin-bottom: 1.5%;
  color: #0f0f0f;
}
.container .contents .videiolist .videoitem .videoview .info .text .name {
  font-size: calc(0.5vw + 30%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container .contents .videiolist .videoitem .videoview .info .text .etc {
  font-size: calc(0.5vw + 30%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2%;
}


반응형 고려사항?

  • width에 따라
    • 비디오 몇개 보여주는지
    • 메뉴바 접었다 폈다
    • 화면이 작아지면 비디오뷰에있는 메뉴 화살표 스크롤 생김
    • 브라우저 Zoom In/Out 비율에 따라 어떻게 되는지 확인
    • 각 영역마다 최소 크기 지정
      또 뭐 있지...?
profile
코딩 공부 기록용

0개의 댓글