➜  ~ .bash_profile
➜  ~ ls
➜  ~ ls -a
➜  ~ python

WARNING: Python 2.7 is not recommended.
This version is included in macOS for compatibility with legacy software.
Future versions of macOS will not include Python 2.7.
Instead, it is recommended that you transition to using 'python3' from within Terminal.

Python 2.7.18 (default, Jan  4 2022, 17:47:56)
[GCC Apple LLVM 13.0.0 (clang-1300.0.29.10) [+internal-os, ptrauth-isa=deployme on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> exit()
➜  ~ which python
/usr/bin/python
➜  ~ cd usr/bin
cd: no such file or directory: usr/bin
➜  ~ cd /usr/bin
➜  bin ls
... ... ... 
➜  bin ls python
python
➜  bin cd
➜  ~ ls -a
... ... ...
➜  ~ vi .bash_profile
➜  ~ cd /libaray
cd: no such file or directory: /libaray
➜  ~ cd /Library
➜  /Library ls

➜  /Library cd Frameworks
➜  Frameworks ls

➜  Frameworks cd Python.framework
➜  Python.framework ls

➜  Python.framework cd Python
cd: not a directory: Python
➜  Python.framework ls -la

➜  Python.framework cd Versions
➜  Versions cd Current

➜  Current ls -la
➜  Current cd bin
➜  bin ls

문제점

1) 파이썬으로 Django 환경을 세팅하려고 시도를 했으나 오류 발생

2) M1 mac terminal 에서 python 경로를 찾아들어감

anaconda 뿐만 아니라 pip pip3 python@2.x python@3.x 등 여러가지가 섞여서 경로가 꼬여있는 상황

3) PATH 를 잘 잡아줘야 한다고 함, 리눅스 터미널을 잘 몰라서 일주일동안 고통받음

해결방법

리눅스 쉘 종류가 여러가지가 있었음. 뜻하지 않게 리눅스에 입문. sh, csh, tsch, zsh, bash 라는 종류가 있고 path 설정 명령어가 약간씩 달랐음. 맥에 처음으로 파이썬 설치를 할 때, 쉘 개념도 모르고 명령어만 열심히 두드렸더니 파이썬이 도대체 어디에 설치되어있는지 찾기가 어려움. 게다가 삭제를 한다고 해도 제대로 삭제가 되었는지 확을을 못함. 윈도우만 사용하다 맥을 접했는데 윈도우와 달라서 고통받음.

vi ~/.zshrc 로 들어가서

아래 문장을 추가함

alias python="python3"

➜  ~ python
Python 3.10.2 (v3.10.2:a58ebcc701, Jan 13 2022, 14:50:16) [Clang 13.0.0 (clang-1300.0.29.30)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 

거짓말처럼 파이썬2 로 나오던 부분이 파이썬3로 변경됨. 그 후에 Django 환경을 설정했더니 일주일 내내 괴롭혀오던 문제해결.

소감

• 짧은 시간에 Python, SQL 구문, Django 를 배우다보니 개인적으로 좀 버거움. 남들이 그냥 쉽게 적어내는 프로그램을 짜는 것을 혼자 하라고 하니 어떻게 해야하는지 생각을 할 수가 없어서 곤란했으나, 익숙하지 않으면 다 그런것이고 너무 하나하나에 대해서 생각하기 보다는 따라가다보면 알게되는 것들이 많다고 생각하고 따라가라는 조언을 들음. 누구나 낯선 것이 익숙해지기까지는 잘 하기 어려움. 포기하지 말것.

• 윈도우가 아닌 환경에서 개발을 배우다보니, Docker와 같은 가상환경 세팅에 대해 생각해보게 됨. 오래전 리눅스로 몇 가지 줄을 적어보고 검은 화면만 바라보다 꺼버린 적이 있는데, 이 검은 화면으로 뭔가를 만들어 낸다는 것이 신기함. 혼자 맥에서 개발을 배우다보니 기본적은 세팅을 하면서도 미묘하게 달라 고통을 받았지만 거짓말처럼 몇 문장을 적어놓고 문제가 해결되는 것이 너무 기분이 좋음.

• 여전히 지식이 부족해서 잘 모르나, 검색결과 M1은 기존 Intel 기반으로 만들어진 프로그램들과 호환이 잘 안되는 문제가 많다고 함.

https://github.com/

1) 깃을 홈페이지에서 다운로드 설치 후 2) Visual Studio Code(적당한 텍스트에디터) 사용했음

     ❯ 원격 저장소 ❮

  (Push)  ⬆︎ 

         HEAD

(commit)  ⬆︎ (어떤 작업을 했는지 적어둠)

      Staging area

   (add)  ⬆︎ 

    Working directory
    내 컴퓨터 작업공간

**풀은(Pull) 원격 저장소에서 한 번에 내 작업공간으로 들어옴

**공유작업을 할 때, 누군가 먼저 Push를 했다면, 
나는 먼저 Pull 한 후에 다시 Push를 해야함.
(푸쉬를 하고 싶어도 누군가 먼저하면 푸쉬가 불가능)

**브랜치 생성으로 분기점을 만들고 따로 실험적인 작업을 하다가, 
병합할 수도 있고 다시 과거로 돌아올 수도 있음. 
(HEAD와 master로 체크아웃.)

▶︎ 깃초기화

git init

▶︎ 깃 상태

git status

▶︎ 깃 레퍼지토리 연결

git remote add origin

▶︎ 깃 연결확인

git remote -v

▶︎ 깃 복제

git clone '주소'

▶︎ 깃 추가

git add 파일이름

▶︎ 깃 커밋

git commit -m “커밋내용”

▶︎ 깃 푸시

git push 원격 저장소 브랜치

▶︎ 깃 강제푸시

git --force push origin 브랜치이름

------내 컴퓨터에서 깃으로 보내기-----

▶︎ 깃 브랜치

git branch 가지이름

▶︎ 깃 브랜치 삭제

git branch -d

▶︎ 깃 브랜치 강제삭제

git branch -D(대문자)

▶︎ 깃 체크아웃

git checkout -b 이름

▶︎ 깃 로컬브랜치 내려받기

git pull origin 브랜치이름

▶︎ 깃 리셋(이전 커밋)

git reset --hard HEAD~

▶︎ 깃 푸시 브랜치

git push origin 브랜치이름

• JAVASCRIPT

• javascript 를 사용할 때, 2가지 방식이 있는데 이를 혼용해서 사용하면 안된다.

어려운점

• Javascript의 세부적인 내용에 대한 이해

해결방법

• 복습을 하고 선택자나 사용법에 대해 따로 찾아봄

학습소감

• 복습을 하면서 부족했던 선택자들과 CSS의 디테일한 부분들에 대해 학습을 하는 것이 좋았음. 실제 카피캣들을 보면서 손으로 익혔던 모델들을 다시 한 번 보니 이전에 보이지 않았던 것들이 보이는 것 같음.

네이버 모바일 카피캣 복습

어려운점

• 다시보니 익숙해져서 그런지 다 안다고 생각했으나 몇 가지 부분에서 의문점이 생김

해결방법

• 복습을 통해서 잊고 있었던 부분들을 재학습함

학습소감

• 복습의 중요성에 대해 실감함. 그리고 손에 익히는 방법을 통해서 익히는 것과 개념을 이해하는 것에 대해 생각해봄.

/* 초기화 작업 */
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    font-family: 'Nanum Gothic', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;

    background-color: #181818;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img    {
    vertical-align: middle;
}

button {
    background-color: transparent;
    border: none;
}

input {
    outline: none;
    border: none;
}

input:focus {
    outline: none;
}


/* 디폴트 작업 */
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1300px;
}

.flex-align-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-align-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-align-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}


/* 상단 영역 */
#youtube-top-nav {
    position: fixed;

    width: 100%;
    min-width: 1380px;
    height: 56px;
    background-color: #212121;

    padding: 0 16px;

    z-index: 999999;
}

#youtube-top-nav .nav-left {
    height: 56px;
}

#youtube-top-nav .nav-left .btn-menu {
    width: 40px;
    height: 40px;
    padding: 8px;

    background-image: url(../img/menu.png);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap {
    margin-left: 8px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap .youtube-logo {
    display: block;
    width: 30px;
    height: 28px;
    background-image: url(../img/youtube.png);
    background-size: 30px 28px;
    background-repeat: no-repeat;
    background-position: 50% 35%;

    margin-right: 3px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap span {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: -2px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap p {
    color: #aaa;
    font-size: 1px;
    margin-top: -17px;
    margin-left: 5px;
}

#youtube-top-nav .nav-right {
    height: 56px;
}

#youtube-top-nav .nav-right .btn-menu {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 16px;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
    background-image: url(../img/menu-2.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
    background-image: url(../img/more.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#youtube-top-nav .nav-right .btn-login {
    display: inline-block;
    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;

    color: #3ea6ff;
    font-size: 14px;
    font-weight: bold;
}

#youtube-top-nav .nav-center {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
}

#youtube-top-nav .nav-center .search-wrap {
    width: 640px;
    height: 30px;
}    

#youtube-top-nav .nav-center .search-wrap input {
    width: calc(100% - 65px);
    height: 30px;

    background-color: hsl(0, 0%, 7%);
    border: solid 1px hsl(0, 0%, 18.82%);
    border-radius: 2px 0 0 2px;

    padding: 2px 6px;

    font-size: 14px;
}

#youtube-top-nav .nav-center .search-wrap input:focus {
    border: solid 1px #065fd4;
    color: #aaa;
    font-weight: bold;
}

#youtube-top-nav .nav-center .search-wrap input::placeholder {
    font-weight: bold;
}

#youtube-top-nav .nav-center .search-wrap .btn-search {
    width: 65px;
    height: 30px;

    background-image: url(../img/search.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsla(0, 0%, 100%, .08);
    border: solid 1px hsl(0, 0%, 18.82%);
    border-radius: 0 2px 2px 0;

    cursor: pointer;
}

#youtube-top-nav .nav-center .btn-voice {
    width: 35px;
    height: 35px;
    background-color: black;
    border-radius: 50%;
    background-image: url(../img/voice.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;

    margin-left: 8px;

    cursor: pointer;
}


/* 왼쪽 영역 */
#youtube-left-nav {
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;

    width: 240px;
    background-color: #212121;

    top: 56px;
    bottom: 0;
    left: 0;

    z-index: 999999;
}

#youtube-left-content {
    position: absolute;
    width: 225px;
    height: 100%;
}

#youtube-left-content .nav-section {
    padding: 8px 0;
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

#youtube-left-content .nav-section .nav-title-wrap {
    padding: 8px 24px;
}

#youtube-left-content .nav-section .nav-title-wrap h2 {
    color: #aaaaaa;
    font-size: 15px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body {

}

#youtube-left-content .nav-section .nav-body ul {

}

#youtube-left-content .nav-section .nav-body li:hover {
    background-color: rgba(136, 136, 136, .2);
}

#youtube-left-content .nav-section .nav-body li a.on {
    background-color: rgba(136, 136, 136, .6);
}

#youtube-left-content .nav-section .nav-body li a {
    height: 40px;
    padding: 0 24px;
}

#youtube-left-content .nav-section .nav-body li a .icon {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin-right: 24px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-1 {
    background-image: url(../img/home.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-2 {
    background-image: url(../img/explore.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-3 {
    background-image: url(../img/youtube-2.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-4 {
    background-image: url(../img/library.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-5 {
    background-image: url(../img/history.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-6 {
    background-image: url(../img/browse.png);    
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-7 {
    background-image: url(../img/youtube-2.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-8 {
    background-image: url(../img/live.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-9 {
    background-image: url(../img/setting.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-10 {
    background-image: url(../img/report.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-11 {
    background-image: url(../img/help.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-12 {
    background-image: url(../img/send-feedback.png);
}

#youtube-left-content .nav-section .nav-body li a span {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body .txt-wrap {
    padding: 8px 24px;
}

#youtube-left-content .nav-section .nav-body .txt-wrap p {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
    display: inline-block;

    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;
    color: #3ea6ff;
    font-size: 14px;
    font-weight: bold;

    margin-top: 12px;
}

#youtube-left-content .nav-section .nav-body li a .circle-icon {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin-right: 24px;

    background-color: rgb(64, 64, 64);
    border-radius: 50%;
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-1 {
    background-image: url(../img/music.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-2 {
    background-image: url(../img/sport.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-3 {
    background-image: url(../img/gaming.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-4 {
    background-image: url(../img/movie.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-5 {
    background-image: url(../img/news.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-6 {
    background-image: url(../img/live.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-7 {
    background-image: url(../img/learning.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-8 {
    background-image: url(../img/gaming.png);
}

#youtube-left-content #youtube-footer {

}

#youtube-left-content #youtube-footer .txt-wrap {
    padding: 12px 24px 0;
}

#youtube-left-content #youtube-footer .txt-wrap a {
    margin-right: 8px;

    color: #aaaaaa;
    font-size: 12px;
    font-weight: bold;

    word-break: keep-all;
}

#youtube-left-content #youtube-footer .txt-wrap p {
    font-size: 12px;
    color: #717171;
    font-weight: 400;
    line-height: 1.4;

    padding-bottom: 12px;
}

/* 유튜브 메인 */
#youtube-main {
    position: absolute;

    left: 240px;
    top: 56px;
    right: 0;
    bottom: 0;
    background-color: #181818;
}

/* 태그랩 */
#youtube-main .tag-wrap {
    height: 56px;
    width: 100%;
    min-width: 1165px;
    background-color: #212121;

    border-top: solid 1px rgba(255, 255, 255, .1);
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

#youtube-main .tag-wrap ul {
    padding: 0 25px;
    justify-content: center;
}

#youtube-main .tag-wrap li {
    height: 32px;
    min-width: 12px;
    padding: 4px 12px;
    margin: 12px;
    margin-left: 0;

    background-color: rgba(255, 255, 255, .1);
    border: solid 1px rgba(255, 255, 255, .1);
    border-radius: 16px;

    transition: background-color 0.3s ease-out;
}


#youtube-main .tag-wrap li.on {
    background-color: #ffffff;
    transition: unset;
}

#youtube-main .tag-wrap li.on a {
    color: #212121;
}

#youtube-main .tag-wrap li:hover {
    background-color: rgba(136, 136, 136, .6);
}

#youtube-main .tag-wrap li.on:hover {
    background-color: #ffffff;
}

#youtube-main .tag-wrap li a {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
}


/* 배너 */
#youtube-main .youtube-banner {
    position: relative;
    width: 100%;
    height: 260px;
    background-color: #000000;

    margin-bottom: 32px;
}

#youtube-main .youtube-banner .banner-container {
    position: relative;
    max-width: 2256px;
    height: 100%;
    margin: 0 auto;
}

#youtube-main .youtube-banner .youtube-music-logo {
    position: absolute;
    top: 30px;
    left: 25px;
}

#youtube-main .youtube-banner .youtube-music-logo i {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../img/youtube-music.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-main .youtube-banner .youtube-music-logo span {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: -2px;
}

#youtube-main .youtube-banner p {
    position: absolute;
    font-size: 24px;
    color: #ffffff;

    top: 70px;
    left: 27px;
}

#youtube-main .youtube-banner .btn-join {
    position: absolute;
    color: #ffffff;
    font-size: 14px;

    background-color: #000000;
    border: solid 1px #ffffff;
    padding: 13px 20px;

    bottom: 30px;
    left: 27px;
}

#youtube-main .youtube-banner .close {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: lightgray;

    top: 10px;
    right: 10px;

    cursor: pointer;
}


/* 컨텐츠 */
#youtube-main-content {
    width: 100%;
    height: 100%;
    padding: 24px;
}

#youtube-main-content ul {
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

#youtube-main-content ul li {
    width: 24%;
    margin-bottom: 40px;
}

#youtube-main-content ul li .video-thumbnail {
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail img {
    width: 100%;   /* img의 한쪽에만(현재 가로) 100%를 적용하게 되면 원래 이미지가 가진 비율에 맞춰 높이값이 변경된다(비율유지) */
}

#youtube-main-content ul li .video-thumbnail .time {
    position: absolute;

    background-color: rgba(0, 0, 0, .8);
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    border-radius: 2px;

    padding: 3px 4px;

    bottom: 4px;
    right: 4px;
}

#youtube-main-content ul li .video-txt-wrap {
    margin-top: 12px;
    align-items: flex-start;
}

#youtube-main-content ul li .video-txt-wrap .image-link {
    display: inline-block;
    width: 36px;
    height: 36px;

    margin-right: 12px;
}

#youtube-main-content ul li .video-txt-wrap .image-link img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#youtube-main-content ul li .video-txt-wrap .txt {
    width: calc(100% - 48px);
}

#youtube-main-content ul li .video-txt-wrap .txt h3 {
    margin-bottom: 6px;
}

#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;

}

#youtube-main-content ul li .video-txt-wrap .txt p {

}

#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
    color: #aaaaaa;
    font-weight: bold;
    font-size: 13px;
}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom {

}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
    color: #aaaaaa;
    font-weight: bold;
    font-size: 13px;
}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 3px 3px 2px;
}

/* channel.html */
#youtube-channel-content #channel-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: greenyellow;
}

#youtube-channel-content #channel-banner {
    display: block;
}

#youtube-channel-content #channel-banner .btn-wrap {
    position: absolute;
    width: 230px;
    height: 38px;

    background-color: rgba(0, 0, 0, .3);

    bottom: 14px;
    right: 107px;
}

#youtube-channel-content #channel-banner .btn-wrap i {
    display: block;
    width: 16px;
    height: 16px;

    margin-left: 9px;

    background-image: url(../img/youtube.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-channel-content #channel-banner .btn-wrap h3 {
    font-size: 12px;
    color: #ffffff;
    margin-left: 8px;
}

#youtube-channel-content #channel-banner .btn-icons {
    position: absolute;
    width: 92px;
    height: 36px;

    background-color: rgba(0, 0, 0, .3);

    bottom: 15px;
    right: 15px;
}

#youtube-channel-content #channel-banner .btn-icons a.facebook {
    display: block;
    width: 16px;
    height: 16px;

    margin: 7px;

    background-image: url(../img/facebook.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-channel-content #channel-banner .btn-icons a.twitter {
    display: block;
    width: 16px;
    height: 16px;

    margin: 7px;

    background-image: url(../img/twitter.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-channel-content #channel-banner .btn-icons a.kakao {
    display: block;
    width: 16px;
    height: 16px;

    margin: 7px;

    background-image: url(../img/kakao.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.channel-container {
    width: 1070px;
    margin: 0 auto;
}

#youtube-channel-content .channel-header {
    padding: 16px 0 4px;
    background-color: rgb(24, 24, 24);
}

#youtube-channel-content .channel-header .channel-profile-wrap {

}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile {

}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 24px;
}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap {

}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
    font-size: 25px;
    color: #ffffff;
}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
    font-size: 14px;
    color: #aaaaaa;
    margin-top: 5px;
}

#youtube-channel-content .channel-header .channel-profile-wrap .btn-subscribe {
    padding: 10px 16px;
    background-color: #c00;
    border-radius: 2px;

    color: #ffffff;
    font-weight: bold;

    cursor: pointer;
}

#channel-nav {
    background-color: rgb(24, 24, 24);
}

#channel-nav ul {

}

#channel-nav li {

}

#channel-nav li a {
    display: block;
    height: 47px;

    padding: 0 32px;
    line-height: 47px;

    border-bottom: solid 3px transparent;
    color: #aaaaaa;
    font-size: 14px;
    font-weight: bold;
}

#channel-nav li a:hover {
    color: #ffffff;
}

#channel-nav li.active a {
    color: #ffffff;
    border-bottom: solid 3px #aaaaaa;
}

#channel-nav .search-wrap {
    width: 195px;
}

#channel-nav .search-wrap i {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 3px;

    background-image: url(../img/search.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;

    border-radius: 50%;

    cursor: pointer;
}

#channel-nav .search-wrap i:active {
    background-color: rgba(225, 225, 225, .3);
}

#channel-nav .search-wrap input {
    background-color: transparent;
    padding: 5px 0;
}

#channel-nav .search-wrap input::placeholder {
    color: #ffffff;
    font-weight: bold;
}

#channel-nav .search-wrap input:focus {
    border-bottom: solid 2px #ffffff;
    color: #ffffff;
}

#channel-recent {
    padding: 24px 0;
    align-items: flex-start;
}

#channel-recent img {
    width: 424px;
    height: 238px;

    margin-right: 24px;
}

#channel-recent .txt-wrap {
    width: 400px;
}

#channel-recent .txt-wrap h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #ffffff;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

#channel-recent .txt-wrap .view {
    margin: 16px 0;
}

#channel-recent .txt-wrap .view p {
    font-size: 12px;
    font-weight: bold;
    color: #aaaaaa;    
}

#channel-recent .txt-wrap .view p.count {

}

#channel-recent .txt-wrap .view p.date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 1px 4px;
}

#channel-recent .txt-wrap .title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

#channel-recent .txt-wrap .link-wrap {
    margin: 17px 0;
}

#channel-recent .txt-wrap .link-wrap p {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #ffffff;
}

#channel-recent .txt-wrap .link-wrap p em {
    color: #3ea6ff;
    font-style: normal;

    cursor: pointer;
}

#channel-recent .txt-wrap .more {
    font-size: 13px;
    font-weight: 600;
    color: #aaaaaa;

    cursor: pointer;
}

#channel-recent .txt-wrap .more:hover {
    color: #ffffff;
}

.channel-playlists-section {
    padding: 24px 0;
    border-top: solid 1px rgba(255, 255, 255, .2);
} 

.channel-playlists-section .playlists-header {

}

.channel-playlists-section .playlists-header h3 {
    margin-right: 20px;
    font-size: 17px;
    color: #ffffff;

    cursor: pointer;
}

.channel-playlists-section .playlists-header .play-wrap {

}

.channel-playlists-section .playlists-header .play-wrap .icon-play {
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 8px;

    background-image: url(../img/play.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.channel-playlists-section .playlists-header .play-wrap .play-link {
    font-size: 15px;
    font-weight: bold;
    color: #aaaaaa;
}

.channel-playlists-section .playlists-header-description span {
    display: inline-block;

    color: #aaaaaa;
    font-size: 13px;
    font-weight: 600;

    margin-top: 10px;
}

.channel-playlists-section .playlists-body {
    margin-top: 24px;
}

.channel-playlists-section .playlists-body ul {
    align-items: flex-start;
}

.channel-playlists-section .playlists-body li {
    width: 210px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail {
    width: 100%;
    height: 118px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail img {
    width: 100%;
    height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail .time {
    position: absolute;

    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .8);
    padding: 2px 4px;
    border-radius: 2px;

    bottom: 4px;
    right: 4px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap {
    margin-top: 8px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;

    font-size: 14px;
    line-height: 20px;

    margin-bottom: 6px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
    color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p {
    font-size: 12px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a {
    color: #aaaaaa;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a:hover {
    color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom  {

}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 20px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.count {

}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 2px 5px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .caption {
    background-color: #212121;
    color: #aaaaaa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;

    border-radius: 2px;
    padding: 3px 4px;
}


/* explore.html */
.explore-container {
    width: 1070px;
    margin: 0 auto;
}

#explore-nav {
    padding: 12px 0 8px;
}

#explore-nav ul {

}

#explore-nav li  {
    width: 210px;
    height: 116px;
    background-color: #212121;
    border-radius: 8px;

    margin-bottom: 5px;

    overflow: hidden;
}

#explore-nav li a {
    display: block;
    height: 100%;

    padding: 20px;
}

#explore-nav li a:hover {
    background-color: #000000;
}

#explore-nav li .icon {
    display: block;
    width: 32px;
    height: 32px;

    background-repeat: no-repeat;
    background-position: center;

    margin-bottom: 20px;
}

#explore-nav li .icon.trending {
    background-image: url(../img/trending.png);
}

#explore-nav li .icon.music {
    background-image: url(../img/music-color.png);
}

#explore-nav li .icon.gaming {
    background-image: url(../img/gaming-color.png);
}

#explore-nav li .icon.movies {
    background-image: url(../img/movie-color.png);
}

#explore-nav li .icon.learning {
    background-image: url(../img/learning-color.png);
}

#explore-nav li .icon.sports {
    background-image: url(../img/sports-color.png);
}

#explore-nav li span {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .15px;
}

.explore-playlists-section {
    padding: 24px 0;
    border-bottom: solid 1px rgba(255, 255, 255, .1);
} 

.explore-playlists-section .playlists-header img {
    border-radius: 50%;
    width: 32px;
    height: 32px;

    margin-right: 10px;

    cursor: pointer;
}

.explore-playlists-section .playlists-header h3 {
    margin-right: 20px;
    font-size: 17px;
    color: #ffffff;

    cursor: pointer;
}

.explore-playlists-section .playlists-body {
    margin-top: 24px;
}


.explore-playlists-section .playlists-body ul {
    align-items: flex-start;
}

.explore-playlists-section .playlists-body li {
    width: 210px;
}

.explore-playlists-section .playlists-body li .channel-thumbnail {
    width: 100%;
    height: 118px;
}

.explore-playlists-section .playlists-body li .channel-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.explore-playlists-section .playlists-body li .channel-thumbnail img {
    width: 100%;
    height: 100%;
}

.explore-playlists-section .playlists-body li .channel-thumbnail .time {
    position: absolute;

    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .8);
    padding: 2px 4px;
    border-radius: 2px;

    bottom: 4px;
    right: 4px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap {
    margin-top: 8px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;

    font-size: 14px;
    line-height: 20px;

    margin-bottom: 6px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap h3 a {
    color: #ffffff;
}

.explore-playlists-section .playlists-body .channel-txt-wrap p {
    font-size: 12px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap p a {
    color: #aaaaaa;
}

.explore-playlists-section .playlists-body .channel-txt-wrap p a:hover {
    color: #ffffff;
}

.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 20px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.count {

}

.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 2px 5px;
}


#popular-section {
    padding: 24px 0 30px;
}

#popular-section h2 {
    font-size: 17px;
    color: #ffffff;
}

#popular-section ul {
    margin-top: 24px;
}

#popular-section li {
    margin-bottom: 15px;
}

#popular-section a {
    align-items: flex-start;
}

#popular-section li .image-wrap {
    position: relative;
    width: 246px;
    height: 148px;

    margin-right: 16px;
}

#popular-section li .image-wrap img {
    width: 100%;
    height: 100%;
}

#popular-section li .image-wrap .time {
    position: absolute;

    border-radius: 2px;
    padding: 2px 4px;
    background-color: rgba(0, 0, 0, .8);

    color: #ffffff;
    font-size: 12px;
    font-weight: bold;

    bottom: 4px;
    right: 4px;
}

#popular-section li .txt-wrap {
    width: 600px;
}

#popular-section li .txt-wrap h3 {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
}

#popular-section li .txt-wrap .video-info {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 22px;
} 

#popular-section li .txt-wrap .video-info span:after {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    vertical-align: top;
    margin: 10px 2px 0px 6px;
}

#popular-section li .txt-wrap .video-info span:last-child:after {
    content: none;
}

#popular-section li .txt-wrap .video-info .channel:hover {
    color: #ffffff;
}

#popular-section li .txt-wrap .video-info .count {

}

#popular-section li .txt-wrap .video-info .date {

}

#popular-section li .txt-wrap .description {
    padding-top: 8px;

    font-size: 12px;
    color: #aaaaaa;
    line-height: 18px;
}

어려운점

• CSS 디테일 수정하기 너무 어려움

해결방법

• 복습

학습소감

• 디테일한 부분 수정과 유투브 세부항목에 대한 내용이 너무 어렵게 다가옴. 특히 JS부분에 대한 설명이 있었으면 좋겠으나 없는 것 같음.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>유튜브</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <div id="wrapper">
        <nav id="youtube-top-nav">
            <div class="youtube-top-wrap flex-align-between">
                <div class="nav-left flex-align-start">
                    <button type="button" class="btn-menu"></button>  <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
                    <h1>
                        <a class="youtube-logo-wrap flex-align-start" href="#">
                            <i class="youtube-logo"></i>
                            <span>YouTube</span>
                            <p>KR</p>
                        </a>
                    </h1>
                </div>    
                <div class="nav-center flex-align-start">
                    <div class="search-wrap flex-align-start">
                        <input type="text" placeholder="Search">
                        <button type="button" class="btn-search"></button>
                    </div>
                    <button class="btn-voice"></button>
                </div>
                <div class="nav-right flex-align-end">
                    <button type="button" class="btn-menu btn-menu-1"></button>
                    <button type="button" class="btn-menu btn-menu-2"></button>
                    <a href="#" class="btn-login">SIGN IN</a>
                </div>
            </div>
        </nav>

        <nav id="youtube-left-nav">
            <div id="youtube-left-content">
                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="on flex-align-start">
                                    <i class="icon icon-1"></i>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="explore.html" class="flex-align-start">
                                    <i class="icon icon-2"></i>
                                    <span>Explore</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-3"></i>
                                    <span>Subscriptions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-4"></i>
                                    <span>Library</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-5"></i>
                                    <span>History</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <div class="txt-wrap">
                            <p>Sign in to like videos, commemnt, and subascribe.</p>
                            <a href="#" class="btn-login">SIGN IN</a>
                        </div>
                    </div>
                </div>        

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>BEST OF YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-1"></i>
                                    <span>Music</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-2"></i>
                                    <span>Sports</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-3"></i>
                                    <span>Gaming</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-4"></i>
                                    <span>Movie</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-5"></i>
                                    <span>News</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-6"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-7"></i>
                                    <span>Learning</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-8"></i>
                                    <span>360º Video</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-6"></i>
                                    <span>Browse channels</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>MORE FROM YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-7"></i>
                                    <span>YouTube Premium</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-8"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-9"></i>
                                    <span>Setting</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-10"></i>
                                    <span>Report history</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-11"></i>
                                    <span>Help</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-12"></i>
                                    <span>Send feedback</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <footer id="youtube-footer">
                    <div class="txt-wrap">
                        <a href="#">About</a>
                        <a href="#">Press</a>
                        <a href="#">Copyright</a>
                        <a href="#">Contact us</a>
                        <a href="#">Creators</a>
                        <a href="#">Advertise</a>
                        <a href="#">Developers</a>
                    </div>
                    <div class="txt-wrap">
                        <a href="#">Terms</a>
                        <a href="#">Privacy</a>
                        <a href="#">Policy & Safety</a>
                        <a href="#">How YouTube Works</a>
                        <a href="#">Test new features</a>
                    </div>
                    <div class="txt-wrap">
                        <p>
                            Quisque velit nisi<br>
                            Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.
                        </p>
                    </div>

                </footer>    
            </div>    
        </nav>

        <main id="youtube-main" role="main">
            <div id="youtube-channel-content">
                <div id="channel-banner">
                    <a class="btn-wrap flex-align-start" href="#">
                        <i></i>
                        <h3>1theK Originals - 원더케이오리지널</h3>
                    </a>
                    <div class="btn-icons flex-align-start">
                        <a class="facebook" href="#"></a>    
                        <a class="twitter" href="#"></a>
                        <a class="kakao" href="#"></a>
                    </div>
                </div>

                <div class="channel-header">
                    <div class="channel-container">
                        <div class="channel-profile-wrap flex-align-between">
                            <div class="channel-profile flex-align-start">
                                <img class="channel-thumbnail" src="https://via.placeholder.com/80">
                                <div class="txt-wrap">
                                    <h2>1theK (원더케이)</h2>
                                    <p>23.3M subscribe</p>
                                </div>
                            </div>
                            <button type="button" class="btn-subscribe">SUBSCRIBE</button>
                        </div>
                    </div>
                </div>

                <div id="channel-nav">
                    <div class="channel-container">
                        <div class="flex-align-start">
                            <ul class="flex-align-start">
                                <li class="active"><a href="#">HOME</a></li>
                                <li><a href="#">VIDEO</a></li>
                                <li><a href="#">PLAYLISTS</a></li>
                                <li><a href="#">COMMUNITY</a></li>
                                <li><a href="#">CHANNELS</a></li>
                                <li><a href="#">ABOUT</a></li>
                            </ul>

                            <div class="search-wrap flex-align-start">
                                <i></i>
                                <input type="text" placeholder="Search">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="channel-content">
                    <div class="channel-container">

                        <div id="channel-recent" class="flex-align-start">
                            <img src="https://via.placeholder.com/424x238">
                            <div class="txt-wrap">
                                <h2>[MV] KIM JONG KOOK(김종국) X ATEEX(에이티즈) _ Be My Lover(바다 보러 갈래?)</h2>
                                <div class="view flex-align-start">
                                    <p class="count">1,129,681 views</p>
                                    <p class="date">1 week ago</p>
                                </div>    
                                <span class="title">[MV] KIM JONG KOOK(김종국) X ATEEX(에이티즈) _ Be My Lover(바다 보러 갈래?)</span>
                                <div class="link-wrap">
                                    <p>Melon ▶ <em>https://bit.ly/3sjacGy</em></p>
                                    <p>genie ▶ <em>https://bit.ly/3g6mL3e</em></p>
                                    <p>Vibe ▶ <em>https://bit.ly/3iM5Pkm</em></p>
                                    <p>Youtube Music ▶ <em>https://bit.ly/3AZjAT9</em></p>
                                </div>
                                <span class="more">READ MORE</span>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-header-description">
                                <span>The Hottest K-pop Videos You Shouldn't Miss Today</span>
                            </div>    
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="channel-playlists-section">
                            <div class="playlists-header flex-align-start">
                                <h3>1theK HOT CHOICE</h3>
                                <div class="play-wrap flex-align-start">
                                    <i class="icon-play"></i>
                                    <a href="#" class="play-link">PLAY ALL</a>
                                </div>
                            </div>
                            <div class="playlists-body">
                                <ul class="flex-align-between">
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:20</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] CRAVITY _ Gad Pedal
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">129K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:17</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">13K views</span>
                                                <span class="date">5 days ago</span>
                                            </div>
                                        </div>    
                                    </li>
                                    <li>
                                        <div class="channel-thumbnail">
                                            <a href="#">
                                                <img src="https://via.placeholder.com/210x118">
                                                <span class="time">3:24</span>
                                            </a>
                                        </div>

                                        <div class="channel-txt-wrap">
                                            <h3>
                                                <a href="#">
                                                    [MV] KWON EUN BE(권은비) _ Door
                                                </a>
                                            </h3>

                                            <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                            <div class="txt-bottom flex-align-start">
                                                <span class="count">140K views</span>
                                                <span class="date">4 hourse ago</span>
                                            </div>

                                            <span class="caption">CC</span>
                                        </div>    
                                    </li>
                                </ul>
                            </div>
                        </div>                            
                    </div>
                </div>
            </div>
        </main>
    </div>

</body>
</html>

어려운점

• 채널의 갯수에 대한 디테일한 부분

해결방법

• 복습

학습소감

• 유투브 코드를 뜯어보자

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>유튜브</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <div id="wrapper">
        <nav id="youtube-top-nav">
            <div class="youtube-top-wrap flex-align-between">
                <div class="nav-left flex-align-start">
                    <button type="button" class="btn-menu"></button>  <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
                    <h1>
                        <a class="youtube-logo-wrap flex-align-start" href="#">
                            <i class="youtube-logo"></i>
                            <span>YouTube</span>
                            <p>KR</p>
                        </a>
                    </h1>
                </div>    
                <div class="nav-center flex-align-start">
                    <div class="search-wrap flex-align-start">
                        <input type="text" placeholder="Search">
                        <button type="button" class="btn-search"></button>
                    </div>
                    <button class="btn-voice"></button>
                </div>
                <div class="nav-right flex-align-end">
                    <button type="button" class="btn-menu btn-menu-1"></button>
                    <button type="button" class="btn-menu btn-menu-2"></button>
                    <a href="#" class="btn-login">SIGN IN</a>
                </div>
            </div>
        </nav>

        <nav id="youtube-left-nav">
            <div id="youtube-left-content">
                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="on flex-align-start">
                                    <i class="icon icon-1"></i>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="explore.html" class="flex-align-start">
                                    <i class="icon icon-2"></i>
                                    <span>Explore</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-3"></i>
                                    <span>Subscriptions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-4"></i>
                                    <span>Library</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-5"></i>
                                    <span>History</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <div class="txt-wrap">
                            <p>Sign in to like videos, commemnt, and subascribe.</p>
                            <a href="#" class="btn-login">SIGN IN</a>
                        </div>
                    </div>
                </div>        

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>BEST OF YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-1"></i>
                                    <span>Music</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-2"></i>
                                    <span>Sports</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-3"></i>
                                    <span>Gaming</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-4"></i>
                                    <span>Movie</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-5"></i>
                                    <span>News</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-6"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-7"></i>
                                    <span>Learning</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-8"></i>
                                    <span>360º Video</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-6"></i>
                                    <span>Browse channels</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>MORE FROM YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-7"></i>
                                    <span>YouTube Premium</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-8"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-9"></i>
                                    <span>Setting</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-10"></i>
                                    <span>Report history</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-11"></i>
                                    <span>Help</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-12"></i>
                                    <span>Send feedback</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <footer id="youtube-footer">
                    <div class="txt-wrap">
                        <a href="#">About</a>
                        <a href="#">Press</a>
                        <a href="#">Copyright</a>
                        <a href="#">Contact us</a>
                        <a href="#">Creators</a>
                        <a href="#">Advertise</a>
                        <a href="#">Developers</a>
                    </div>
                    <div class="txt-wrap">
                        <a href="#">Terms</a>
                        <a href="#">Privacy</a>
                        <a href="#">Policy & Safety</a>
                        <a href="#">How YouTube Works</a>
                        <a href="#">Test new features</a>
                    </div>
                    <div class="txt-wrap">
                        <p>
                            Quisque velit nisi<br>
                            Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.
                        </p>
                    </div>

                </footer>    
            </div>    
        </nav>

        <main id="youtube-main" role="main">
            <nav class="tag-wrap">
                <ul class="flex-align-between">
                    <li class="on">
                        <a href="#">All</a>
                    </li>
                    <li>
                        <a href="#">K-Pop</a>
                    </li>
                    <li>
                        <a href="#">Game shows</a>
                    </li>
                    <li>
                        <a href="#">Music</a>
                    </li>
                    <li>
                        <a href="#">Variety shows</a>
                    </li>
                    <li>
                        <a href="#">Korean dramas</a>
                    </li>
                    <li>
                        <a href="#">Live</a>
                    </li>
                    <li>
                        <a href="#">Playlists</a>
                    </li>
                    <li>
                        <a href="#">Muckbang</a>
                    </li>
                    <li>
                        <a href="#">Training</a>
                    </li>
                    <li>
                        <a href="#">Background music</a>
                    </li>
                </ul>
            </nav> 

            <div class="youtube-banner">
                <div class="banner-container">
                    <h1 class="youtube-music-logo flex-align-start">
                        <i></i>
                        <span>YouTube Music</span>
                    </h1>
                    <p>Explore music based on your unique taste</p>
                    <a class="btn-join" href="#">GEI IT NOW</a>
                </div>
                <button class="close"></button>
            </div>

            <div id="youtube-main-content">
                <ul class="flex-align-between">
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                            <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                            <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                            <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                </ul>
            </div>
        </main>
    </div>

</body>
</html>

어려운점

• Wrapper, nav 태그, align 배열

해결방법

• 영상 복습

학습소감

• 유투브 학습이 생각보다 어려움

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>유튜브</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <div id="wrapper">
        <nav id="youtube-top-nav">
            <div class="youtube-top-wrap flex-align-between">
                <div class="nav-left flex-align-start">
                    <button type="button" class="btn-menu"></button>  <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
                    <h1>
                        <a class="youtube-logo-wrap flex-align-start" href="#">
                            <i class="youtube-logo"></i>
                            <span>YouTube</span>
                            <p>KR</p>
                        </a>
                    </h1>
                </div>    
                <div class="nav-center flex-align-start">
                    <div class="search-wrap flex-align-start">
                        <input type="text" placeholder="Search">
                        <button type="button" class="btn-search"></button>
                    </div>
                    <button class="btn-voice"></button>
                </div>
                <div class="nav-right flex-align-end">
                    <button type="button" class="btn-menu btn-menu-1"></button>
                    <button type="button" class="btn-menu btn-menu-2"></button>
                    <a href="#" class="btn-login">SIGN IN</a>
                </div>
            </div>
        </nav>

        <nav id="youtube-left-nav">
            <div id="youtube-left-content">
                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="index.html" class="flex-align-start">
                                    <i class="icon icon-1"></i>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="explore.html" class="on flex-align-start">
                                    <i class="icon icon-2"></i>
                                    <span>Explore</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-3"></i>
                                    <span>Subscriptions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-4"></i>
                                    <span>Library</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-5"></i>
                                    <span>History</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <div class="txt-wrap">
                            <p>Sign in to like videos, commemnt, and subascribe.</p>
                            <a href="#" class="btn-login">SIGN IN</a>
                        </div>
                    </div>
                </div>        

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>BEST OF YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-1"></i>
                                    <span>Music</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-2"></i>
                                    <span>Sports</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-3"></i>
                                    <span>Gaming</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-4"></i>
                                    <span>Movie</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-5"></i>
                                    <span>News</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-6"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-7"></i>
                                    <span>Learning</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-8"></i>
                                    <span>360º Video</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-6"></i>
                                    <span>Browse channels</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>MORE FROM YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-7"></i>
                                    <span>YouTube Premium</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-8"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-9"></i>
                                    <span>Setting</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-10"></i>
                                    <span>Report history</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-11"></i>
                                    <span>Help</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-12"></i>
                                    <span>Send feedback</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <footer id="youtube-footer">
                    <div class="txt-wrap">
                        <a href="#">About</a>
                        <a href="#">Press</a>
                        <a href="#">Copyright</a>
                        <a href="#">Contact us</a>
                        <a href="#">Creators</a>
                        <a href="#">Advertise</a>
                        <a href="#">Developers</a>
                    </div>
                    <div class="txt-wrap">
                        <a href="#">Terms</a>
                        <a href="#">Privacy</a>
                        <a href="#">Policy & Safety</a>
                        <a href="#">How YouTube Works</a>
                        <a href="#">Test new features</a>
                    </div>
                    <div class="txt-wrap">

/* 초기화 */
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    font-family: 'Nanum Gothic', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;

    background-color: #181818;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img    {
    vertical-align: middle;
}

button {
    background-color: transparent;
    border: none;
}

input {
    outline: none;
    border: none;
}

input:focus {
    outline: none;
}

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1300px;
}

.flex-align-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-align-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-align-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

/* 상단 영역 */
#youtube-top-nav {
    position: fixed;

    width: 100%;
    min-width: 1380px;
    height: 56px;
    background-color: #212121;

    padding: 0 16px;

    z-index: 999999;
}

#youtube-top-nav .nav-left {
    height: 56px;
}

#youtube-top-nav .nav-left .btn-menu {
    width: 40px;
    height: 40px;
    padding: 8px;

    background-image: url(../img/menu.png);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap {
    margin-left: 8px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap .youtube-logo {
    display: block;
    width: 30px;
    height: 28px;
    background-image: url(../img/youtube.png);
    background-size: 30px 28px;
    background-repeat: no-repeat;
    background-position: 50% 35%;

    margin-right: 3px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap span {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: -2px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap p {
    color: #aaa;
    font-size: 1px;
    margin-top: -17px;
    margin-left: 5px;
}

#youtube-top-nav .nav-right {
    height: 56px;
}

#youtube-top-nav .nav-right .btn-menu {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 16px;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
    background-image: url(../img/menu-2.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
    background-image: url(../img/more.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#youtube-top-nav .nav-right .btn-login {
    display: inline-block;
    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;

    color: #3ea6ff;
    font-size: 14px;
    font-weight: bold;
}


#youtube-top-nav .nav-center {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
}

#youtube-top-nav .nav-center .search-wrap {
    width: 640px;
    height: 30px;
}

#youtube-top-nav .nav-center .search-wrap input {
    width: calc(100% - 65px);
    height: 30px;

    background-color: hsl(0, 0%, 7%);
    border: solid 1px hsl(0, 0%, 18.82%);
    border-radius: 2px 0 0 2px;

    padding: 2px 6px;

    font-size: 14px;
}

#youtube-top-nav .nav-center .search-wrap input:focus {
    border: solid 1px #065fd4;
    color: #aaa;
    font-weight: bold;
}

#youtube-top-nav .nav-center .search-wrap input::placeholder {
    font-weight: bold;
}

#youtube-top-nav .nav-center .search-wrap .btn-search {
    width: 65px;
    height: 30px;

    background-image: url(../img/search.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsla(0, 0%, 100%, .08);
    border: solid 1px hsl(0, 0%, 18.82%);
    border-radius: 0 2px 2px 0;

    cursor: pointer;
}

#youtube-top-nav .nav-center .btn-voice {
    width: 35px;
    height: 35px;
    background-color: black;
    border-radius: 50%;
    background-image: url(../img/voice.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;

    margin-left: 8px;

    cursor: pointer;
}

/* 왼쪽 영역 */
#youtube-left-nav {
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;

    width: 240px;
    background-color: #212121;

    top: 56px;
    bottom: 0;
    left: 0;

    z-index: 999999;
}

#youtube-left-content {
    position: absolute;
    width: 225px;
    height: 100%;
}

#youtube-left-content .nav-section {
    padding: 8px 0;
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

#youtube-left-content .nav-section .nav-title-wrap {
    padding: 8px 24px;
}

#youtube-left-content .nav-section .nav-title-wrap h2 {
    color: #aaaaaa;
    font-size: 15px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body {

}

#youtube-left-content .nav-section .nav-body ul {

}

#youtube-left-content .nav-section .nav-body li:hover {
    background-color: rgba(136, 136, 136, .2);
}

#youtube-left-content .nav-section .nav-body li a.on {
    background-color: rgba(136, 136, 136, .6);
}

#youtube-left-content .nav-section .nav-body li a {
    height: 40px;
    padding: 0 24px;
}

#youtube-left-content .nav-section .nav-body li a .icon {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin-right: 24px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-1 {
    background-image: url(../img/home.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-2 {
    background-image: url(../img/explore.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-3 {
    background-image: url(../img/youtube-2.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-4 {
    background-image: url(../img/library.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-5 {
    background-image: url(../img/history.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-6 {
    background-image: url(../img/browse.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-7 {
    background-image: url(../img/youtube-2.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-8 {
    background-image: url(../img/live.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-9 {
    background-image: url(../img/setting.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-10 {
    background-image: url(../img/report.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-11 {
    background-image: url(../img/help.png);
}

#youtube-left-content .nav-section .nav-body li a .icon.icon-12 {
    background-image: url(../img/send-feedback.png);
}

#youtube-left-content .nav-section .nav-body li a span {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body .txt-wrap {
    padding: 8px 24px;
}

#youtube-left-content .nav-section .nav-body .txt-wrap p {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
    display: inline-block;

    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;
    color: #3ea6ff;
    font-size: 14px;
    font-weight: bold;

    margin-top: 12px;
}

#youtube-left-content .nav-section .nav-body li a .circle-icon {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin-right: 24px;

    background-color: rgb(64, 64, 64);
    border-radius: 50%;
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-1 {
    background-image: url(../img/music.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-2 {
    background-image: url(../img/sport.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-3 {
    background-image: url(../img/gaming.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-4 {
    background-image: url(../img/movie.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-5 {
    background-image: url(../img/news.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-6 {
    background-image: url(../img/live.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-7 {
    background-image: url(../img/learning.png);
}

#youtube-left-content .nav-section .nav-body li a .circle-icon.icon-8 {
    background-image: url(../img/gaming.png);
}

#youtube-left-content #youtube-footer {

}

#youtube-left-content #youtube-footer .txt-wrap {
    padding: 12px 24px 0;
}

#youtube-left-content #youtube-footer .txt-wrap a {
    margin-right: 8px;

    color: #aaaaaa;
    font-size: 12px;
    font-weight: bold;

    word-break: keep-all;
}

#youtube-left-content #youtube-footer .txt-wrap p {
    font-size: 12px;
    color: #717171;
    font-weight: 400;
    line-height: 1.4;

    padding-bottom: 12px;
}

/* 유튜브 메인 */
#youtube-main {
    position: absolute;

    left: 240px;
    top: 56px;
    right: 0;
    bottom: 0;
    background-color: #181818;
}

#youtube-main .tag-wrap {
    height: 56px;
    width: 100%;
    min-width: 1165px;
    background-color: #212121;

    border-top: solid 1px rgba(255, 255, 255, .1);
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

#youtube-main .tag-wrap ul {
    padding: 0 25px;
    justify-content: center;
}

#youtube-main .tag-wrap li {
    height: 32px;
    min-width: 12px;
    padding: 4px 12px;
    margin: 12px;
    margin-left: 0;

    background-color: rgba(255, 255, 255, .1);
    border: solid 1px rgba(255, 255, 255, .1);
    border-radius: 16px;

    transition: background-color 0.3s ease-out;
}

#youtube-main .tag-wrap li.on {
    background-color: #ffffff;
    transition: unset;
}

#youtube-main .tag-wrap li.on a {
    color: #212121;
}

#youtube-main .tag-wrap li:hover {
    background-color: rgba(136, 136, 136, .6);
}

#youtube-main .tag-wrap li.on:hover {
    background-color: #ffffff;
}

#youtube-main .tag-wrap li a {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
}

/* 배너 */
#youtube-main .youtube-banner {
    position: relative;
    width: 100%;
    height: 260px;
    background-color: #000000;

    margin-bottom: 32px;
}

#youtube-main .youtube-banner .banner-container {
    position: relative;
    max-width: 2256px;
    height: 100%;
    margin: 0 auto;
}

#youtube-main .youtube-banner .youtube-music-logo {
    position: absolute;
    top: 30px;
    left: 25px;
}

#youtube-main .youtube-banner .youtube-music-logo i {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../img/youtube-music.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-main .youtube-banner .youtube-music-logo span {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: -2px;
}

#youtube-main .youtube-banner p {
    position: absolute;
    font-size: 24px;
    color: #ffffff;

    top: 70px;
    left: 27px;
}

#youtube-main .youtube-banner .btn-join {
    position: absolute;
    color: #ffffff;
    font-size: 14px;

    background-color: #000000;
    border: solid 1px #ffffff;
    padding: 13px 20px;

    bottom: 30px;
    left: 27px;
}

#youtube-main .youtube-banner .close {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: lightgray;

    top: 10px;
    right: 10px;

    cursor: pointer;
}

/* 컨텐츠 */
#youtube-main-content {
    width: 100%;
    height: 100%;
    padding: 24px;
}

#youtube-main-content ul {
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

#youtube-main-content ul li {
    width: 24%;
    margin-bottom: 40px;
}

#youtube-main-content ul li .video-thumbnail {
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail img {
    width: 100%;
}

#youtube-main-content ul li .video-thumbnail .time {
    position: absolute;

    background-color: rgba(0, 0, 0, .8);
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    border-radius: 2px;

    padding: 3px 4px;

    bottom: 4px;
    right: 4px;
}

#youtube-main-content ul li .video-txt-wrap {
    margin-top: 12px;
    align-items: flex-start;
}

#youtube-main-content ul li .video-txt-wrap .image-link {
    display: inline-block;
    width: 36px;
    height: 36px;

    margin-right: 12px;
}

#youtube-main-content ul li .video-txt-wrap .image-link img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#youtube-main-content ul li .video-txt-wrap .txt {
    width: calc(100% - 48px);
}

#youtube-main-content ul li .video-txt-wrap .txt h3 {
    margin-bottom: 6px;
}

#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;

}

#youtube-main-content ul li .video-txt-wrap .txt p {

}

#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
    color: #aaaaaa;
    font-weight: bold;
    font-size: 13px;
}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom {

}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
    color: #aaaaaa;
    font-weight: bold;
    font-size: 13px;
}

#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 3px 3px 2px;
}


/* channel.html */
#youtube-channel-content #channel-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: greenyellow;
}

#youtube-channel-content #channel-banner {
    display: block;
}

#youtube-channel-content #channel-banner .btn-wrap {
    position: absolute;
    width: 230px;
    height: 38px;

    background-color: rgba(0, 0, 0, .3);

    bottom: 14px;
    right: 107px;
}

#youtube-channel-content #channel-banner .btn-wrap i {
    display: block;
    width: 16px;
    height: 16px;

    margin-left: 9px;

    background-image: url(../img/youtube.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-channel-content #channel-banner .btn-wrap h3 {
    font-size: 12px;
    color: #ffffff;
    margin-left: 8px;
}

#youtube-channel-content #channel-banner .btn-icons {
    position: absolute;
    width: 92px;
    height: 36px;

    background-color: rgba(0, 0, 0, .3);

    bottom: 15px;
    right: 15px;
}

#youtube-channel-content #channel-banner .btn-icons a.facebook {
    display: block;
    width: 16px;
    height: 16px;

    margin: 7px;

    background-image: url(../img/facebook.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-channel-content #channel-banner .btn-icons a.twitter {
    display: block;
    width: 16px;
    height: 16px;

    margin: 7px;

    background-image: url(../img/twitter.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#youtube-channel-content #channel-banner .btn-icons a.kakao {
    display: block;
    width: 16px;
    height: 16px;

    margin: 7px;

    background-image: url(../img/kakao.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.channel-container {
    width: 1070px;
    margin: 0 auto;
}

#youtube-channel-content .channel-header {
    padding: 16px 0 4px;
    background-color: rgb(24, 24, 24);
}

#youtube-channel-content .channel-header .channel-profile-wrap {

}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile {

}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 24px;
}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap {

}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
    font-size: 25px;
    color: #ffffff;
}

#youtube-channel-content .channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
    font-size: 14px;
    color: #aaaaaa;
    margin-top: 5px;
}

#youtube-channel-content .channel-header .channel-profile-wrap .btn-subscribe {
    padding: 10px 16px;
    background-color: #c00;
    border-radius: 2px;

    color: #ffffff;
    font-weight: bold;

    cursor: pointer;
}


#channel-nav {
    background-color: rgb(24, 24, 24);
}

#channel-nav ul {

}

#channel-nav li {

}

#channel-nav li a {
    display: block;
    height: 47px;

    padding: 0 32px;
    line-height: 47px;

    border-bottom: solid 3px transparent;
    color: #aaaaaa;
    font-size: 14px;
    font-weight: bold;
}

#channel-nav li a:hover {
    color: #ffffff;
}

#channel-nav li.active a {
    color: #ffffff;
    border-bottom: solid 3px #aaaaaa;
}

#channel-nav .search-wrap {
    width: 195px;
}

#channel-nav .search-wrap i {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 3px;

    background-image: url(../img/search.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;

    border-radius: 50%;

    cursor: pointer;
}

#channel-nav .search-wrap i:active {
    background-color: rgba(225, 225, 225, .3);
}

#channel-nav .search-wrap input {
    background-color: transparent;
    padding: 5px 0;
}

#channel-nav .search-wrap input::placeholder {
    color: #ffffff;
    font-weight: bold;
}

#channel-nav .search-wrap input:focus {
    border-bottom: solid 2px #ffffff;
    color: #ffffff;
}

#channel-recent {
    padding: 24px 0;
    align-items: flex-start;
}

#channel-recent img {
    width: 424px;
    height: 238px;

    margin-right: 24px;
}

#channel-recent .txt-wrap {
    width: 400px;
}

#channel-recent .txt-wrap h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #ffffff;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

#channel-recent .txt-wrap .view {
    margin: 16px 0;
}

#channel-recent .txt-wrap .view p {
    font-size: 12px;
    font-weight: bold;
    color: #aaaaaa;
}

#channel-recent .txt-wrap .view p.count {

}

#channel-recent .txt-wrap .view p.date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 1px 4px;
}

#channel-recent .txt-wrap .title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

#channel-recent .txt-wrap .link-wrap {
    margin: 17px 0;
}

#channel-recent .txt-wrap .link-wrap p {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #ffffff;
}

#channel-recent .txt-wrap .link-wrap p em {
    color: #3ea6ff;
    font-style: normal;

    cursor: pointer;
}

#channel-recent .txt-wrap .more {
    font-size: 13px;
    font-weight: 600;
    color: #aaaaaa;

    cursor: pointer;
}

#channel-recent .txt-wrap .more:hover {
    color: #ffffff;
}

.channel-playlists-section {
    padding: 24px 0;
    border-top: solid 1px rgba(255, 255, 255, .2);
}

.channel-playlists-section .playlists-header {

}

.channel-playlists-section .playlists-header h3 {
    margin-right: 20px;
    font-size: 17px;
    color: #ffffff;

    cursor: pointer;
}

.channel-playlists-section .playlists-header .play-wrap {

}

.channel-playlists-section .playlists-header .play-wrap .icon-play {
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 8px;

    background-image: url(../img/play.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.channel-playlists-section .playlists-header .play-wrap .play-link {
    font-size: 15px;
    font-weight: bold;
    color: #aaaaaa;
}

.channel-playlists-section .playlists-header-description span {
    display: inline-block;

    color: #aaaaaa;
    font-size: 13px;
    font-weight: 600;

    margin-top: 10px;
}

.channel-playlists-section .playlists-body {
    margin-top: 24px;
}

.channel-playlists-section .playlists-body ul {
    align-items: flex-start;
}

.channel-playlists-section .playlists-body li {
    width: 210px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail {
    width: 100%;
    height: 118px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail img {
    width: 100%;
    height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail .time {
    position: absolute;

    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .8);
    padding: 2px 4px;
    border-radius: 2px;

    bottom: 4px;
    right: 4px;
}


.channel-playlists-section .playlists-body .channel-txt-wrap {
    margin-top: 8px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;

    font-size: 14px;
    line-height: 20px;

    margin-bottom: 6px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
    color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p {
    font-size: 12px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a {
    color: #aaaaaa;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a:hover {
    color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom  {

}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 20px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.count {

}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 2px 5px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .caption {
    background-color: #212121;
    color: #aaaaaa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;

    border-radius: 2px;
    padding: 3px 4px;
}

/* explore.html */
.explore-container {
    width: 1070px;
    margin: 0 auto;
}

#explore-nav {
    padding: 12px 0 8px;
}

#explore-nav ul {

}

#explore-nav li  {
    width: 210px;
    height: 116px;
    background-color: #212121;
    border-radius: 8px;

    margin-bottom: 5px;

    overflow: hidden;
}

#explore-nav li a {
    display: block;
    height: 100%;

    padding: 20px;
}

#explore-nav li a:hover {
    background-color: #000000;
}

#explore-nav li .icon {
    display: block;
    width: 32px;
    height: 32px;

    background-repeat: no-repeat;
    background-position: center;

    margin-bottom: 20px;
}

#explore-nav li .icon.trending {
    background-image: url(../img/trending.png);
}

#explore-nav li .icon.music {
    background-image: url(../img/music-color.png);
}

#explore-nav li .icon.gaming {
    background-image: url(../img/gaming-color.png);
}

#explore-nav li .icon.movies {
    background-image: url(../img/movie-color.png);
}

#explore-nav li .icon.learning {
    background-image: url(../img/learning-color.png);
}

#explore-nav li .icon.sports {
    background-image: url(../img/sports-color.png);
}

#explore-nav li span {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .15px;
}

.explore-playlists-section {
    padding: 24px 0;
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

.explore-playlists-section .playlists-header img {
    border-radius: 50%;
    width: 32px;
    height: 32px;

    margin-right: 10px;

    cursor: pointer;
}

.explore-playlists-section .playlists-header h3 {
    margin-right: 20px;
    font-size: 17px;
    color: #ffffff;

    cursor: pointer;
}

.explore-playlists-section .playlists-body {
    margin-top: 24px;
}


.explore-playlists-section .playlists-body ul {
    align-items: flex-start;
}

.explore-playlists-section .playlists-body li {
    width: 210px;
}

.explore-playlists-section .playlists-body li .channel-thumbnail {
    width: 100%;
    height: 118px;
}

.explore-playlists-section .playlists-body li .channel-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.explore-playlists-section .playlists-body li .channel-thumbnail img {
    width: 100%;
    height: 100%;
}

.explore-playlists-section .playlists-body li .channel-thumbnail .time {
    position: absolute;

    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .8);
    padding: 2px 4px;
    border-radius: 2px;

    bottom: 4px;
    right: 4px;
}


.explore-playlists-section .playlists-body .channel-txt-wrap {
    margin-top: 8px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;

    font-size: 14px;
    line-height: 20px;

    margin-bottom: 6px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap h3 a {
    color: #ffffff;
}

.explore-playlists-section .playlists-body .channel-txt-wrap p {
    font-size: 12px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap p a {
    color: #aaaaaa;
}

.explore-playlists-section .playlists-body .channel-txt-wrap p a:hover {
    color: #ffffff;
}

.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 20px;
}

.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.count {

}

.explore-playlists-section .playlists-body .channel-txt-wrap .txt-bottom span.date:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    margin: 2px 5px;
}

#popular-section {
    padding: 24px 0 30px;
}

#popular-section h2 {
    font-size: 17px;
    color: #ffffff;
}

#popular-section ul {
    margin-top: 24px;
}

#popular-section li {
    margin-bottom: 15px;
}

#popular-section a {
    align-items: flex-start;
}

#popular-section li .image-wrap {
    position: relative;
    width: 246px;
    height: 148px;

    margin-right: 16px;
}

#popular-section li .image-wrap img {
    width: 100%;
    height: 100%;
}

#popular-section li .image-wrap .time {
    position: absolute;

    border-radius: 2px;
    padding: 2px 4px;
    background-color: rgba(0, 0, 0, .8);

    color: #ffffff;
    font-size: 12px;
    font-weight: bold;

    bottom: 4px;
    right: 4px;
}

#popular-section li .txt-wrap {
    width: 600px;
}

#popular-section li .txt-wrap h3 {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
}

#popular-section li .txt-wrap .video-info {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 22px;
}

#popular-section li .txt-wrap .video-info span:after {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;

    vertical-align: top;
    margin: 10px 2px 0px 6px;
}

#popular-section li .txt-wrap .video-info span:last-child:after {
    content: none;
}

#popular-section li .txt-wrap .video-info .channel:hover {
    color: #ffffff;
}

#popular-section li .txt-wrap .video-info .count {

}

#popular-section li .txt-wrap .video-info .date {

}

#popular-section li .txt-wrap .description {
    padding-top: 8px;

    font-size: 12px;
    color: #aaaaaa;
    line-height: 18px;
}

어려운점

• position relative 나 세부 section 별 세팅이 여전히 어려움

해결방법

• 따로 찾아보거나 코딩을 하면서 브라우저로 확인해봄

• 복습을 하고 따로 찾아봄

학습소감

• 카피캣도 좋으나 희안하게 잘 따라가지 못해서 너무 아쉬움. 시간이 짧아서 부족한 부분이 많은 것 같아서 걱정이됨.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>유튜브</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <div id="wrapper">
        <nav id="youtube-top-nav">
            <div class="youtube-top-wrap flex-align-between">
                <div class="nav-left flex-align-start">
                    <button type="button" class="btn-menu"></button>  <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
                    <h1>
                        <a class="youtube-logo-wrap flex-align-start" href="#">
                            <i class="youtube-logo"></i>
                            <span>YouTube</span>
                            <p>KR</p>
                        </a>
                    </h1>
                </div>    
                <div class="nav-center flex-align-start">
                    <div class="search-wrap flex-align-start">
                        <input type="text" placeholder="Search">
                        <button type="button" class="btn-search"></button>
                    </div>
                    <button class="btn-voice"></button>
                </div>
                <div class="nav-right flex-align-end">
                    <button type="button" class="btn-menu btn-menu-1"></button>
                    <button type="button" class="btn-menu btn-menu-2"></button>
                    <a href="#" class="btn-login">SIGN IN</a>
                </div>
            </div>
        </nav>

        <nav id="youtube-left-nav">
            <div id="youtube-left-content">
                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="on flex-align-start">
                                    <i class="icon icon-1"></i>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="explore.html" class="flex-align-start">
                                    <i class="icon icon-2"></i>
                                    <span>Explore</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-3"></i>
                                    <span>Subscriptions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-4"></i>
                                    <span>Library</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-5"></i>
                                    <span>History</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <div class="txt-wrap">
                            <p>Sign in to like videos, commemnt, and subascribe.</p>
                            <a href="#" class="btn-login">SIGN IN</a>
                        </div>
                    </div>
                </div>        

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>BEST OF YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-1"></i>
                                    <span>Music</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-2"></i>
                                    <span>Sports</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-3"></i>
                                    <span>Gaming</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-4"></i>
                                    <span>Movie</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-5"></i>
                                    <span>News</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-6"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-7"></i>
                                    <span>Learning</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-8"></i>
                                    <span>360º Video</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-6"></i>
                                    <span>Browse channels</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>MORE FROM YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-7"></i>
                                    <span>YouTube Premium</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-8"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-9"></i>
                                    <span>Setting</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-10"></i>
                                    <span>Report history</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-11"></i>
                                    <span>Help</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-12"></i>
                                    <span>Send feedback</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <footer id="youtube-footer">
                    <div class="txt-wrap">
                        <a href="#">About</a>
                        <a href="#">Press</a>
                        <a href="#">Copyright</a>
                        <a href="#">Contact us</a>
                        <a href="#">Creators</a>
                        <a href="#">Advertise</a>
                        <a href="#">Developers</a>
                    </div>
                    <div class="txt-wrap">
                        <a href="#">Terms</a>
                        <a href="#">Privacy</a>
                        <a href="#">Policy & Safety</a>
                        <a href="#">How YouTube Works</a>
                        <a href="#">Test new features</a>
                    </div>
                    <div class="txt-wrap">
                        <p>
                            Quisque velit nisi<br>
                            Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.
                        </p>
                    </div>

                </footer>    
            </div>    
        </nav>

        <main id="youtube-main" role="main">
            <nav class="tag-wrap">
                <ul class="flex-align-between">
                    <li class="on">
                        <a href="#">All</a>
                    </li>
                    <li>
                        <a href="#">K-Pop</a>
                    </li>
                    <li>
                        <a href="#">Game shows</a>
                    </li>
                    <li>
                        <a href="#">Music</a>
                    </li>
                    <li>
                        <a href="#">Variety shows</a>
                    </li>
                    <li>
                        <a href="#">Korean dramas</a>
                    </li>
                    <li>
                        <a href="#">Live</a>
                    </li>
                    <li>
                        <a href="#">Playlists</a>
                    </li>
                    <li>
                        <a href="#">Muckbang</a>
                    </li>
                    <li>
                        <a href="#">Training</a>
                    </li>
                    <li>
                        <a href="#">Background music</a>
                    </li>
                </ul>
            </nav> 

            <div class="youtube-banner">
                <div class="banner-container">
                    <h1 class="youtube-music-logo flex-align-start">
                        <i></i>
                        <span>YouTube Music</span>
                    </h1>
                    <p>Explore music based on your unique taste</p>
                    <a class="btn-join" href="#">GEI IT NOW</a>
                </div>
                <button class="close"></button>
            </div>

            <div id="youtube-main-content">
                <ul class="flex-align-between">
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

                            <div class="txt">
                                <h3>
                                    <a href="#" class="title-link">
                                        [MV] Hi-L(하이엘) _ Too Too (22)
                                    </a>
                                </h3>

                                <p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>

                                <div class="txt-bottom">
                                    <span class="count">170K views</span>
                                    <span class="date">1 week ago</span>
                                </div>    
                            </div>    
                        </div>
                    </li>
                    <li>
                        <div class="video-thumbnail">
                            <a href="#">
                                <img src="https://via.placeholder.com/1024x640">
                                <span class="time">3:23</span>
                            </a>
                        </div>

                        <div class="video-txt-wrap flex-align-start">
                            <a href="#" class="image-link">
                                <img class="profile" src="https://via.placeholder.com/36x36">
                            </a>

어려운점

• 앞에서 배웠던 내용들이 잘 생각이 안남

해결방법

• 복습함 추가로 따로 찾아봄

학습소감

• 생각보다 복잡한 것들이 많아서 지금까지 뭘했는지 잘 모르겠음. 그래도 포기하지 않고 연습하는 방법 밖에 없어서 좀 답답함.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>유튜브</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <div id="wrapper">
        <nav id="youtube-top-nav">
            <div class="youtube-top-wrap flex-align-between">
                <div class="nav-left flex-align-start">
                    <button type="button" class="btn-menu"></button> 
                    <h1>
                        <a class="youtube-logo-wrap flex-align-start" href="#">
                            <i class="youtube-logo"></i>
                            <span>YouTube</span>
                            <p>KR</p>
                        </a>
                    </h1>
                </div>    
                <div class="nav-center flex-align-start">
                    <div class="search-wrap flex-align-start">
                        <input type="text" placeholder="Search">
                        <button type="button" class="btn-search"></button>
                    </div>
                    <button class="btn-voice"></button>
                </div>
                <div class="nav-right flex-align-end">
                    <button type="button" class="btn-menu btn-menu-1"></button>
                    <button type="button" class="btn-menu btn-menu-2"></button>
                    <a href="#" class="btn-login">SIGN IN</a>
                </div>
            </div>
        </nav>

        <nav id="youtube-left-nav">
            <div id="youtube-left-content">
                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="on flex-align-start">
                                    <i class="icon icon-1"></i>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="explore.html" class="flex-align-start">
                                    <i class="icon icon-2"></i>
                                    <span>Explore</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-3"></i>
                                    <span>Subscriptions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-4"></i>
                                    <span>Library</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-5"></i>
                                    <span>History</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <div class="txt-wrap">
                            <p>Sign in to like videos, commemnt, and subascribe.</p>
                            <a href="#" class="btn-login">SIGN IN</a>
                        </div>
                    </div>
                </div>        

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>BEST OF YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-1"></i>
                                    <span>Music</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-2"></i>
                                    <span>Sports</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-3"></i>
                                    <span>Gaming</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-4"></i>
                                    <span>Movie</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-5"></i>
                                    <span>News</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-6"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-7"></i>
                                    <span>Learning</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="circle-icon icon-8"></i>
                                    <span>360º Video</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-6"></i>
                                    <span>Browse channels</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-title-wrap">
                        <h2>MORE FROM YOUTUBE</h2>
                    </div>    
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-7"></i>
                                    <span>YouTube Premium</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-8"></i>
                                    <span>Live</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-9"></i>
                                    <span>Setting</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-10"></i>
                                    <span>Report history</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-11"></i>
                                    <span>Help</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-12"></i>
                                    <span>Send feedback</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <footer id="youtube-footer">
                    <div class="txt-wrap">
                        <a href="#">About</a>
                        <a href="#">Press</a>
                        <a href="#">Copyright</a>
                        <a href="#">Contact us</a>
                        <a href="#">Creators</a>
                        <a href="#">Advertise</a>
                        <a href="#">Developers</a>
                    </div>
                    <div class="txt-wrap">
                        <a href="#">Terms</a>
                        <a href="#">Privacy</a>
                        <a href="#">Policy & Safety</a>
                        <a href="#">How YouTube Works</a>
                        <a href="#">Test new features</a>
                    </div>
                    <div class="txt-wrap">
                        <p>
                            동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이
                        </p>
                    </div>

어려운점

• 카피캣을 하면서 완벽하게 같게 만들지는 못해서 어려움

해결방법

• 여전히 아는게 별로 없어서 복습을 함

학습소감

• 효과적으로 배울 수 있는 방법이 없는지 의문이 듦. 영상을 보고 카피캣을 하는데 여전히 어렵게만 느껴짐

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>유튜브</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>

    <div id="wrapper">
        <nav id="youtube-top-nav">
            <div class="youtube-top-wrap flex-align-between">
                <div class="nav-left flex-align-start">
                    <button type="button" class="btn-menu"></button>  <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
                    <h1>
                        <a class="youtube-logo-wrap flex-align-start" href="#">
                            <i class="youtube-logo"></i>
                            <span>YouTube</span>
                            <p>KR</p>
                        </a>
                    </h1>
                </div>    
                <div class="nav-center flex-align-start">
                    <div class="search-wrap flex-align-start">
                        <input type="text" placeholder="Search">
                        <button type="button" class="btn-search"></button>
                    </div>
                    <button class="btn-voice"></button>
                </div>
                <div class="nav-right flex-align-end">
                    <button type="button" class="btn-menu btn-menu-1"></button>
                    <button type="button" class="btn-menu btn-menu-2"></button>
                    <a href="#" class="btn-login">SIGN IN</a>
                </div>
            </div>
        </nav>

        <nav id="youtube-left-nav">
            <div id="youtube-left-content">
                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="on flex-align-start">
                                    <i class="icon icon-1"></i>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="explore.html" class="flex-align-start">
                                    <i class="icon icon-2"></i>
                                    <span>Explore</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-3"></i>
                                    <span>Subscriptions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <ul>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-4"></i>
                                    <span>Library</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex-align-start">
                                    <i class="icon icon-5"></i>
                                    <span>History</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="nav-section">
                    <div class="nav-body">
                        <div class="txt-wrap">
                            <p>Sign in to like videos, commemnt, and subascribe.</p>
                            <a href="#" class="btn-login">SIGN IN</a>
                        </div>
                    </div>
                </div>        

CSS

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    font-family: 'Nanum Gothic', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;

    background-color: #181818;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img    {
    vertical-align: middle;
}

button {
    background-color: transparent;
    border: none;
}

input {
    outline: none;
    border: none;
}

input:focus {
    outline: none;
}

/* 디폴트 작업 */
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1300px;
}

.flex-align-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-align-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-align-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

/* 상단 영역 */
#youtube-top-nav {
    position: fixed;

    width: 100%;
    min-width: 1380px;
    height: 56px;
    background-color: #212121;

    padding: 0 16px;

    z-index: 999999;
}

#youtube-top-nav .nav-left {
    height: 56px;
}

#youtube-top-nav .nav-left .btn-menu {
    width: 40px;
    height: 40px;
    padding: 8px;

    background-image: url(../img/menu.png);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap {
    margin-left: 8px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap .youtube-logo {
    display: block;

    width: 30px;
    height: 28px;
    background-image: url(../img/youtube.png);
    background-size: 30px 28px;
    background-repeat: no-repeat;
    background-position: 50% 35%;

    margin-right: 3px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap span {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: -2px;
}

#youtube-top-nav .nav-left h1 .youtube-logo-wrap p {
    color: #aaa;
    font-size: 1px;
    margin-top: -17px;
    margin-left: 5px;
}

#youtube-top-nav .nav-right {
    height: 56px;
}

#youtube-top-nav .nav-right .btn-menu {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 16px;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
    background-image: url(../img/menu-2.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
    background-image: url(../img/more.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#youtube-top-nav .nav-right .btn-login {
    display: inline-block;
    border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;

    color: #3ea6ff;
    font-size: 14px;
    font-weight: bold;
}

#youtube-top-nav .nav-center {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
}

#youtube-top-nav .nav-center .search-wrap {
    width: 640px;
    height: 30px;
}    

#youtube-top-nav .nav-center .search-wrap input {
    width: calc(100% - 65px);
    height: 30px;

    background-color: hsl(0, 0%, 7%);
    border: solid 1px hsl(0, 0%, 18.82%);
    border-radius: 2px 0 0 2px;

    padding: 2px 6px;

    font-size: 14px;
}

#youtube-top-nav .nav-center .search-wrap input:focus {
    border: solid 1px #065fd4;
    color: #aaa;
    font-weight: bold;
}

#youtube-top-nav .nav-center .search-wrap input::placeholder {
    font-weight: bold;
}

#youtube-top-nav .nav-center .search-wrap .btn-search {
    width: 65px;
    height: 30px;

    background-image: url(../img/search.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsla(0, 0%, 100%, .08);
    border: solid 1px hsl(0, 0%, 18.82%);
    border-radius: 0 2px 2px 0;

    cursor: pointer;
}

#youtube-top-nav .nav-center .btn-voice {
    width: 35px;
    height: 35px;

    background-color: black;
    border-radius: 50%;
    background-image: url(../img/voice.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;

    margin-left: 8px;

    cursor: pointer;
}

어려운점

• 유투브 연결 링크별 세부 조정 내역

해결방법

• 코드를 홀로 뜯어보며 해결

• 복습 또 복습

• 웹 페이지의 검사기능을 이용해서 각 항목들을 뜯어봄

학습소감

• 네이버 카피캣에 비해 더 흥미롭게 느껴짐 차이점이 랜딩페이지가 굉장히 복잡하고 뭔가 많은 네이버에 비해 단순한 느낌이었는데 또 유투브는 영상기반 콘텐츠가 주로 모여있어서인지 독특하게 느껴짐.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 추가 설명</title>

    <!-- <link rel="stylesheet" type="text/css" href="css/reset.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/normalize.css"> -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- 링크도 케스케이딩이 적용된다 -->

</head>
<body>

    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>

    <header id="intro">
        <p>Header P</p>
    </header>

    <footer id="footer">
        <p>Footer P</p>
    </footer>

</body>
</html>

-----

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

-----

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* html의 고유의 css를 초기화 시킬 때 사용 */

-----

/* html, body {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

a {

} */

/* --- */


/* h1 {
  color: blue;
}

h1 {
  color: red;
} */

/* cascading 때문에 나중에 적은 것이 적용된다. */

/* --- */

/* :root {
  --black: #18181a;
  --purple: #9147ff;
  --font-size-40: 40px;
} */

:root {
  --black: #18181a;
  --brand-color: #9147ff;
  --font-size-40: 40px;
}

h1 {
  background-color: var(--black);
  font-size: var(--font-size-40);
  color: var(--purple);
}

h2 {
  color: var(--brand-color);
}


#intro {
    --font-color: blue;
    --font-color: 50px;
}

/* 변수는 인트로 안에서만 사용 가능 */

#intro p {
    font-size: var(--font-size);
    color: var(--font-color);
}

#footer p {
    font-size: var(--font-size);
    color: var(--font-color);
}

어려운점

• 변수를 적용시키는 부분

해결방법

• 조금 더 찾아봄, 복습을 함

학습소감

• 새로운 기술 적용이 신기함, 변수를 지정하는 것에서 몇 가지 의문이 더 생김

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0e0e10;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

.clearfix {
    clear: both;
}

button {
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
}

input, textarea {
    outline: none;
    border: none;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
    color: #ffffff;
}

.btn-purple {
    background-color: #9147ff;
    color: #ffffff;
}

.font-purple {
    color: #9147ff;
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* 상단 네비 영역 */

#top-nav {
    position: fixed;
    width: 100%;
    min-width: 1340px;
    height: 50px;
    background-color: #0e0e10;
    padding: 0 15px;

    z-index: 999;
}

#top-nav .nav-wrap .nav-left .logo a img {
    width: 24px;
    height: 28px;
}

#top-nav .nav-wrap .nav-left ul li {
    height: 50px;
    padding: 0 20px;
    font-size: 20px;
}

#top-nav .nav-wrap .nav-left ul li:first-child {
    padding-right: 0;
}

#top-nav .nav-wrap .nav-left ul li:first-child a::after {
    display: inline-block;
    position: relative;
    content: "";
    width: 1px;
    height: 30px;
    background-color: gray;
    margin-left: 20px;

    top: 8px;
}

#top-nav .nav-wrap .nav-left ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
}

#top-nav .nav-wrap .nav-left .more a {
    display: block;
    height: 50px;
    padding-left: 20px;

    line-height: 50px;
    font-size: 20px;
}

 #top-nav .nav-wrap .nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top-nav .nav-wrap .nav-center .search-wrap {
    overflow: hidden;

    width: 380px;
    height: 36px;
    border-radius: 5px;
    background-color: gray;
}

#top-nav .nav-wrap .nav-center .search-wrap input {
    width: calc(100% - 34px);
    height: 100%;
    background-color: darkgrey;
    padding: 5px 10px;
}

#top-nav .nav-wrap .nav-center .search-wrap .btn-search {
    width: 34px;
    height: 100%;
    background: url(../../naver-ex/img/search-white.png) no-repeat;
    background-size: 24px;
    background-position: 5px;
}

#top-nav .nav-wrap .nav-right .mark-wrap {
    position: relative;
}

#top-nav .nav-wrap .nav-right .mark-wrap .icon-mark {
    display: block;
    width: 20px;
    height: 20px;
    background-color: greenyellow;
}

#top-nav .nav-wrap .nav-right .mark-wrap .alarm {
    position: absolute;
    border-radius: 15px;
    background-color: red;
    padding: 2px 5px;

    color: #ffffff;
    font-size: 14px;
    top: -12px;
    right: -12px;
}

#top-nav .nav-wrap .nav-right .btn {
    width: 60px;
    height: 30px;
    border-radius: 5px;

    text-align: center;
    line-height: 30px;
    font-size: 12px;
}

#top-nav .nav-wrap .nav-right .btn-login {
    margin-left: 20px;
    background-color: gray;
    color: #ffffff;
}

#top-nav .nav-wrap .nav-right .btn-purple {
    margin-left: 10px;
}

#top-nav .nav-wrap .nav-right .btn-profile {
    width: 20px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
}

/* 컨텐츠 영역 */
.content {
    overflow-y: auto;
    position: absolute;
    top: 50px;
    left: 240px;

    bottom: 0;
    right: 0;
}

.content h1 {
    font-size: 40px;
}

.content #content-banner {
    position: relative;
    width: 100%;
    height: 350px;
    background: url(../img/game.jpg) no-repeat center; 
    background-size: cover;
}

.content #content-banner .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);

    top: 0;
    left: 0;
}

.content #content-banner .layer .txt-wrap {
    position: absolute;
    top: 170px;
    right: 200px;
}

.content .content-container {
    width: 1060px;
    margin: 0 auto;
}

/* 태그 디폴트 */
.content-container .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    margin-top: 5px;
}

.content-container .tag-wrap .tag {
    font-size: 12px;
    font-weight: bold;
    color: #d3d3d3;
    background-color: #ffffff26;
    border-radius: 10px;

    padding: 3px 8px;

    margin-right: 5px;
}

.content-container .tag-wrap .tag:hover {
    background-color: rgb(255, 255, 255, 0.2);
}    

.content-container .tag-wrap .tag:last-child {
    margin-left: 0;
}

.content-container .txt-wrap {

}

.content-container .txt-wrap h3 {
    font-size: 16px;
    color: #dedee3;
    letter-spacing: 1px;
    margin-bottom: 4px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-container .txt-wrap h3:hover {
    color: #9147ff;
}


/* 비디오 섹션 */
.video-section {
    position: relative;
    padding-top: 50px;
    padding-bottom: 30px;

    border-bottom: solid 1px #ffffff1a;
}
.video-section .title-wrap {
    padding-bottom: 10px;
}

.video-section .title-wrap h2 {
    font-size: 20px;
}

.video-section .video-wrap {

}

.video-section .video-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.video-section .video-wrap li {
    width: 32%;
    margin-right: auto;
}

.video-section .video-wrap li:last-child {
    margin-right: 0;
}

.video-section .video-wrap a {

}

.video-section .video-wrap .image-wrap {
    position: relative;
    width: 100%;
    height: 183px;
    background-color: #9147ff;
}

.video-section .video-wrap .image-wrap .image-wrap-sub {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover .image-wrap-sub {
    transform: translate(6px, -6px);
}

.video-section .video-wrap .image-wrap img {
    width: 100%;
    height: 100%;
}

.video-section .video-wrap .image-wrap .mark {
    position: absolute;

    top: 10px;
    left: 10px;

    border-radius: 5px;
    background-color: red;

    padding: 3px 5px;

    font-size: 14px;
    font-weight: bold;
}

.video-section .video-wrap .image-wrap .count {
    position: absolute;

    bottom: 10px;
    left: 10px;

    border-radius: 2px;
    background-color: rgba(0, 0, 0, .6);

    padding: 2px;

    font-size: 13px;
}

.video-section .video-wrap .video-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

    margin-top: 10px;
}

.video-section .video-wrap .video-bottom .thumbnail {
    width: 40px;
    height: 40px;

    border-radius: 50%;
}

.video-section .video-wrap .video-bottom .txt-wrap {
    width: calc(100% - 50px);
}

.video-section .video-wrap .video-bottom .txt-wrap .source,
.video-section .video-wrap .video-bottom .txt-wrap .game {
    font-size: 13px;
    color: #adadb8;
    margin-top: 3px;
}

.video-section .video-wrap .video-bottom .txt-wrap .source:hover,
.video-section .video-wrap .video-bottom .txt-wrap .game:hover {
    color: #9147ff;
}

.video-section .btn-more {
    position: absolute;

    width: 100px;
    height: 30px;
    background-color: #0e0e10;
    border-radius: 20px;
    padding: 0 10px;

    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: #bf94ff;

    bottom: -16px;
    left: 50%;
    transform: translate(-50%);

    cursor: pointer;
}

.video-section .btn-more:hover {
    background-color: rgba(255, 255, 255, .3);
    border-radius: 4px;
}

어려운점

• 트위치 페이지 영상이 있는 새로운 색상코드

• 기존에 있던 양식은 눈에 익으나 HTML제외 기타 부분이 궁금함

해결방법

• 새로운 색상코드를 뜯어서 봄

• 복습

학습소감

• HTML 큰 구조나 어떻게 적용했는지 알 것 같음 그러나 여전히 세부적인 내용을 잘 모르겠음

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>트위치</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

    <nav id="top-nav">
        <div class="nav-wrap">
            <div class="nav-left">
                <h1 class="logo">
                    <a href="#">
                        <img src="https://via.placeholder.com/24x28">
                    </a>
                </h1>
                <ul>
                    <li><a href="#">탐색</a></li>
                    <li><a href="#">e스포츠</a></li>
                    <li><a href="#">음악</a></li>
                </ul>
                <div class="more">
                    <a href="#">더보기</a>
                </div>
            </div>
            <div class="nav-center">
                <div class="search-wrap">
                    <input type="text" placeholder="검색">
                    <button class="btn-search"></button>
                </div>
            </div>
            <div class="nav-right">
                <div class="mark-wrap">
                    <i class="icon-mark"></i>
                    <span class="alarm">43</span>
                </div>
                <a href="#" class="btn-login">로그인</a>
                <a href="#" class="btn-purple">회원가입</a>
                <button class="btn-profile"></button>
            </div>
        </div>    
    </nav>

    <div class="main-container">
        <div class="left-area">
            <div class="channel-wrap">
                <div class="channel-header">
                    <h3>추천 채널</h3>
                    <i class="icon-arrow"></i>
                </div>
                <div class="channel-body">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
<li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        </ul>
                </div>
            </div>
            <div class="join-wrap">
                <div class="txt-wrap">
                    <h2><span class="font-purple">Twitch</span> 커뮤니티와 함께하세요!</h2>
                    <p>어디서나 최고의 생방송을 즐겨보세요.</p>
                    <button type="button" class="btn-purple">회원가입</button>
                </div>
            </div>
            <div class="info-wrap">
                <p>상표명: Sed porttitor lectus nibh. </p>
                <p>대표자: Abcde Fghij, KLMN</p>
                <p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</p>
                <p>123-4567-890</p>
                <p>호스팅 제공업체: Quisque velit nisi</p>

                <ul>
                    <li><a href="#">지원팀에 문의</a></li>
                    <li><a href="#">판매 약관</a></li>
                    <li><a href="#">사업자 정보</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div id="content-banner">
                <div class="layer">
                    <div class="txt-wrap">
                        <h2>Hello</h2>
                        <p>Nice to meet you</p>
                    </div>
                </div>
            </div>

            <div class="content-container">
                <div class="video-section">
                    <div class="title-wrap">
                        <h2>취향 저격 생방송 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">3.6M 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
                                            <p class="source">LPL</p>
                                            <p class="game">League of Legends</p>

                                            <div class="tag-wrap">
                                                <span class="tag">e-sports</span>
                                                <span class="tag">english</span>
                                                <span class="tag">MOBA</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">3.6M 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
                                            <p class="source">LPL</p>
                                            <p class="game">League of Legends</p>

                                            <div class="tag-wrap">
                                                <span class="tag">e-sports</span>
                                                <span class="tag">english</span>
                                                <span class="tag">MOBA</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub"><img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">3.6M 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
                                            <p class="source">LPL</p>
                                            <p class="game">League of Legends</p>

                                            <div class="tag-wrap">
                                                <span class="tag">e-sports</span>
                                                <span class="tag">english</span>
                                                <span class="tag">MOBA</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="category-section">
                    <div class="title-wrap">
                        <h2>취향 저격 <span class="font-purple">카테고리</span></h2>
                    </div>

                    <div class="category-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>추천 <span class="font-purple">Just Chatting</span> 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.1K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>⚡복닝와이드⚡</h3>
                                            <p class="source">개복어</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                                <span class="tag">첫 번째 플레이 스루</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.1K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>⚡복닝와이드⚡</h3>
                                            <p class="source">개복어</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                                <span class="tag">첫 번째 플레이 스루</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                            <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.1K 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>⚡복닝와이드⚡</h3>
                                            <p class="source">개복어</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                                <span class="tag">첫 번째 플레이 스루</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>모두의 후원 열차에 탑승해 주세요!</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">19.9K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>
                                                LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
                                            </h3>
                                            <p class="source">xQcOW</p>
                                            <p class="game">Hivemind Gameshow</p>

                                            <div class="tag-wrap">
                                                <span class="tag">영어</span>
                                                <span class="tag">일본 만화 영화</span>
                                                <span class="tag">후원 열차</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">19.9K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>
                                                LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
                                            </h3>
                                            <p class="source">xQcOW</p>
                                            <p class="game">Hivemind Gameshow</p>

                                            <div class="tag-wrap">
                                                <span class="tag">영어</span>
                                                <span class="tag">일본 만화 영화</span>
                                                <span class="tag">후원 열차</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">19.9K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>
                                                LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
                                            </h3>
                                            <p class="source">xQcOW</p>
                                            <p class="game">Hivemind Gameshow</p>

                                            <div class="tag-wrap">
                                                <span class="tag">영어</span>
                                                <span class="tag">일본 만화 영화</span>
                                                <span class="tag">후원 열차</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>추천 <span class="font-purple">League of Legends</span> 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">911명의 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>챌린저달리기 40일의 용사</h3>
                                            <p class="source">울부짖는마오카이1 (wahahaha830)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">911명의 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>챌린저달리기 40일의 용사</h3>
                                            <p class="source">울부짖는마오카이1 (wahahaha830)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">911명의 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>챌린저달리기 40일의 용사</h3>
                                            <p class="source">울부짖는마오카이1 (wahahaha830)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>

                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>추천 <span class="font-purple">LOST ARK</span> 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.2K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>넹북이 악세 맞춰주기</h3>
                                            <p class="source">성대 (dakchyo)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.2K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>넹북이 악세 맞춰주기</h3>
                                            <p class="source">성대 (dakchyo)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.2K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>넹북이 악세 맞춰주기</h3>
                                            <p class="source">성대 (dakchyo)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>


                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <footer>
                    <div class="txt-wrap">
                        <p>상표명 : Sed porttitor lectus nibh.</p>
                        <p>대표자: Abcde Fghij, KLMN</p>
                        <p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
                        <p>123-4567-890</p>
                        <p>호스팅 제공업체: Quisque velit nisi</p>
                    </div>
                    <div class="footer-bottom">
                        <ul>
                            <li><a href="#">지원팀에 문의</a></li>
                            <li><a href="#">판매 약관</a></li>
                            <li><a href="#">사업자 정보</a></li>
                        </ul>
                    </div>
                </footer>

            </div>


        </div>
    </div>

</body>
</html>

css

/* 컨텐츠 영역 */
.content {
    overflow-y: auto;
    position: absolute;
    top: 50px;
    left: 240px;

    bottom: 0;
    right: 0;
}

.content h1 {
    font-size: 40px;
}

.content #content-banner {
    position: relative;
    width: 100%;
    height: 350px;
    background: url(../img/game.jpg) no-repeat center; 
    background-size: cover;
}

.content #content-banner .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);

    top: 0;
    left: 0;
}

.content #content-banner .layer .txt-wrap {
    position: absolute;
    top: 170px;
    right: 200px;
}

.content .content-container {
    width: 1060px;
    margin: 0 auto;
}

/* 태그 디폴트 */
.content-container .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    margin-top: 5px;
}

.content-container .tag-wrap .tag {
    font-size: 12px;
    font-weight: bold;
    color: #d3d3d3;
    background-color: #ffffff26;
    border-radius: 10px;

    padding: 3px 8px;

    margin-right: 5px;
}

.content-container .tag-wrap .tag:hover {
    background-color: rgb(255, 255, 255, 0.2);
}    

.content-container .tag-wrap .tag:last-child {
    margin-left: 0;
}

.content-container .txt-wrap {

}

.content-container .txt-wrap h3 {
    font-size: 16px;
    color: #dedee3;
    letter-spacing: 1px;
    margin-bottom: 4px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-container .txt-wrap h3:hover {
    color: #9147ff;
}

/* 비디오 섹션 */
.video-section {
    position: relative;
    padding-top: 50px;
    padding-bottom: 30px;

    border-bottom: solid 1px #ffffff1a;
}

.video-section .title-wrap {
    padding-bottom: 10px;
}

.video-section .title-wrap h2 {
    font-size: 20px;
}

.video-section .video-wrap {

}

.video-section .video-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.video-section .video-wrap li {
    width: 32%;
    margin-right: auto;
}

.video-section .video-wrap li:last-child {
    margin-right: 0;
}

.video-section .video-wrap a {

}

.video-section .video-wrap .image-wrap {
    position: relative;
    width: 100%;
    height: 183px;
    background-color: #9147ff;
}

.video-section .video-wrap .image-wrap .image-wrap-sub {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover .image-wrap-sub {
    transform: translate(6px, -6px);
}

.video-section .video-wrap .image-wrap img {
    width: 100%;
    height: 100%;
}

.video-section .video-wrap .image-wrap .mark {
    position: absolute;

    top: 10px;
    left: 10px;

    border-radius: 5px;
    background-color: red;

    padding: 3px 5px;

    font-size: 14px;
    font-weight: bold;
}

.video-section .video-wrap .image-wrap .count {
    position: absolute;

    bottom: 10px;
    left: 10px;

    border-radius: 2px;
    background-color: rgba(0, 0, 0, .6);

    padding: 2px;

    font-size: 13px;
}

.video-section .video-wrap .video-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

    margin-top: 10px;
}

.video-section .video-wrap .video-bottom .thumbnail {
    width: 40px;
    height: 40px;

    border-radius: 50%;
}

.video-section .video-wrap .video-bottom .txt-wrap {
    width: calc(100% - 50px);
}

.video-section .video-wrap .video-bottom .txt-wrap .source,
.video-section .video-wrap .video-bottom .txt-wrap .game {
    font-size: 13px;
    color: #adadb8;
    margin-top: 3px;
}

.video-section .video-wrap .video-bottom .txt-wrap .source:hover,
.video-section .video-wrap .video-bottom .txt-wrap .game:hover {
    color: #9147ff;
}

.video-section .btn-more {
    position: absolute;

    width: 100px;
    height: 30px;
    background-color: #0e0e10;
    border-radius: 20px;
    padding: 0 10px;

    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: #bf94ff;

    bottom: -16px;
    left: 50%;
    transform: translate(-50%);

    cursor: pointer;
}

.video-section .btn-more:hover {
    background-color: rgba(255, 255, 255, .3);
    border-radius: 4px;
}

/* 카테고리 영역 */
.category-section {
    padding-top: 50px;
    padding-bottom: 30px;

    border-bottom: solid 1px #ffffff1a;
}

.category-section .title-wrap {
    padding-bottom: 10px;
}

.category-section .title-wrap h2 {
    font-size: 20px;
}

.category-section .category-wrap {

}

.category-section .category-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.category-section .category-wrap li {
    width: 15%;
    margin-right: auto;
}

.category-section .category-wrap li:last-child {
    margin-right: 0;
}

.category-section .category-wrap .image-wrap {
    background-color: #9147ff;
}

.category-section .category-wrap .image-wrap img {
    width: 100%;
    height: 195px;

    transition: transform 0.15s linear;
}

.category-section .category-wrap .image-wrap:hover img {
    transform: translate(6px, -6px);
}

.category-section .category-wrap .txt-wrap {
    margin-top: 8px;
}

.category-section .category-wrap .txt-wrap .count {
    font-size: 13px;
    color: #adadb8;
    margin-top: 3px;
}

.category-section .category-wrap .txt-wrap .count:hover {
    color: #9147ff;
}

/* 하단 영역 */
footer {
    width: 100%;
    padding: 80px 0 120px;
}

footer .txt-wrap {
    text-align: center;
}

footer .txt-wrap p {
    font-size: 14px;
    color: #efeff1;
    line-height: 1.5;
}

footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-items: stretch;

    margin-top: 20px;
}

footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-items: stretch;
}

footer ul li {

}

footer ul li a {
    font-size: 14px;
    color: #adadb8;
}

footer ul li a:after {
    content: "";
    display: inline-block;

    width: 1px;
    height: 12px;
    background-color: #adadb8;

    margin: 0 8px;

    position: relative;
    top: 1px;
}

footer ul li a:hover {
    text-decoration: underline;
    text-decoration-color: #9147ff;
}

footer ul li:last-child a:after {
    content: none;
}

어려운점

• background size 와 position 관련 세부조정

해결방법

• 따로 복습함

학습소감

• 쉬운 것 같으면서 쉽지 않고 새로운 방법이 있는데 어떻게 적용시키는지 알지 못해 아쉬웠지만 다른 방법을 찾아봄.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>트위치</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

    <nav id="top-nav">
        <div class="nav-wrap">
            <div class="nav-left">
                <h1 class="logo">
                    <a href="#">
                        <img src="https://via.placeholder.com/24x28">
                    </a>
                </h1>
                <ul>
                    <li><a href="#">탐색</a></li>
                    <li><a href="#">e스포츠</a></li>
                    <li><a href="#">음악</a></li>
                </ul>
                <div class="more">
                    <a href="#">더보기</a>
                </div>
            </div>
            <div class="nav-center">
                <div class="search-wrap">
                    <input type="text" placeholder="검색">
                    <button class="btn-search"></button>
                </div>
            </div>
            <div class="nav-right">
                <div class="mark-wrap">
                    <i class="icon-mark"></i>
                    <span class="alarm">43</span>
                </div>
                <a href="#" class="btn-login">로그인</a>
                <a href="#" class="btn-purple">회원가입</a>
                <button class="btn-profile"></button>
            </div>
        </div>    
    </nav>

    <div class="main-container">
        <div class="left-area">
            <div class="channel-wrap">
                <div class="channel-header">
                    <h3>추천 채널</h3>
                    <i class="icon-arrow"></i>
                </div>
                <div class="channel-body">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
<li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/30">
                                <div class="txt-wrap">
                                    <h4>풍월량(hanryang1125)</h4>
                                    <span class="source">Just Chatting</span>
                                </div>
                                <span class="count">6.7K</span>
                            </a>
                        </li>
                        </ul>
                </div>
            </div>
            <div class="join-wrap">
                <div class="txt-wrap">
                    <h2><span class="font-purple">Twitch</span> 커뮤니티와 함께하세요!</h2>
                    <p>어디서나 최고의 생방송을 즐겨보세요.</p>
                    <button type="button" class="btn-purple">회원가입</button>
                </div>
            </div>
            <div class="info-wrap">
                <p>상표명: Sed porttitor lectus nibh. </p>
                <p>대표자: Abcde Fghij, KLMN</p>
                <p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</p>
                <p>123-4567-890</p>
                <p>호스팅 제공업체: Quisque velit nisi</p>

                <ul>
                    <li><a href="#">지원팀에 문의</a></li>
                    <li><a href="#">판매 약관</a></li>
                    <li><a href="#">사업자 정보</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div id="content-banner">
                <div class="layer">
                    <div class="txt-wrap">
                        <h2>Hello</h2>
                        <p>Nice to meet you</p>
                    </div>
                </div>
            </div>

            <div class="content-container">
                <div class="video-section">
                    <div class="title-wrap">
                        <h2>취향 저격 생방송 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">3.6M 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
                                            <p class="source">LPL</p>
                                            <p class="game">League of Legends</p>

                                            <div class="tag-wrap">
                                                <span class="tag">e-sports</span>
                                                <span class="tag">english</span>
                                                <span class="tag">MOBA</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">3.6M 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
                                            <p class="source">LPL</p>
                                            <p class="game">League of Legends</p>

                                            <div class="tag-wrap">
                                                <span class="tag">e-sports</span>
                                                <span class="tag">english</span>
                                                <span class="tag">MOBA</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub"><img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">3.6M 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
                                            <p class="source">LPL</p>
                                            <p class="game">League of Legends</p>

                                            <div class="tag-wrap">
                                                <span class="tag">e-sports</span>
                                                <span class="tag">english</span>
                                                <span class="tag">MOBA</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="category-section">
                    <div class="title-wrap">
                        <h2>취향 저격 <span class="font-purple">카테고리</span></h2>
                    </div>

                    <div class="category-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/146x195">
                                    </div>

                                    <div class="txt-wrap">
                                        <h3>Just Chatting</h3>
                                        <p class="count">311k 시청자</p>

                                        <div class="tag-wrap">
                                            <span class="tag">IRL</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>추천 <span class="font-purple">Just Chatting</span> 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.1K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>⚡복닝와이드⚡</h3>
                                            <p class="source">개복어</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                                <span class="tag">첫 번째 플레이 스루</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.1K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>⚡복닝와이드⚡</h3>
                                            <p class="source">개복어</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                                <span class="tag">첫 번째 플레이 스루</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                            <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.1K 시청자</span>
                                        </div>
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>⚡복닝와이드⚡</h3>
                                            <p class="source">개복어</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                                <span class="tag">첫 번째 플레이 스루</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>모두의 후원 열차에 탑승해 주세요!</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">19.9K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>
                                                LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
                                            </h3>
                                            <p class="source">xQcOW</p>
                                            <p class="game">Hivemind Gameshow</p>

                                            <div class="tag-wrap">
                                                <span class="tag">영어</span>
                                                <span class="tag">일본 만화 영화</span>
                                                <span class="tag">후원 열차</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">19.9K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>
                                                LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
                                            </h3>
                                            <p class="source">xQcOW</p>
                                            <p class="game">Hivemind Gameshow</p>

                                            <div class="tag-wrap">
                                                <span class="tag">영어</span>
                                                <span class="tag">일본 만화 영화</span>
                                                <span class="tag">후원 열차</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">19.9K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>
                                                LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
                                            </h3>
                                            <p class="source">xQcOW</p>
                                            <p class="game">Hivemind Gameshow</p>

                                            <div class="tag-wrap">
                                                <span class="tag">영어</span>
                                                <span class="tag">일본 만화 영화</span>
                                                <span class="tag">후원 열차</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>추천 <span class="font-purple">League of Legends</span> 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">911명의 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>챌린저달리기 40일의 용사</h3>
                                            <p class="source">울부짖는마오카이1 (wahahaha830)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">911명의 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>챌린저달리기 40일의 용사</h3>
                                            <p class="source">울부짖는마오카이1 (wahahaha830)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">911명의 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>챌린저달리기 40일의 용사</h3>
                                            <p class="source">울부짖는마오카이1 (wahahaha830)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>

                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <div class="video-section">
                    <div class="title-wrap">
                        <h2>추천 <span class="font-purple">LOST ARK</span> 채널</h2>
                    </div>

                    <div class="video-wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.2K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>넹북이 악세 맞춰주기</h3>
                                            <p class="source">성대 (dakchyo)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.2K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>넹북이 악세 맞춰주기</h3>
                                            <p class="source">성대 (dakchyo)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <div class="image-wrap-sub">
                                            <img src="https://via.placeholder.com/326x183">
                                            <span class="mark">생방송</span>
                                            <span class="count">1.2K 시청자</span>
                                        </div>    
                                    </div>

                                    <div class="video-bottom">
                                        <img class="thumbnail" src="https://via.placeholder.com/40">
                                        <div class="txt-wrap">
                                            <h3>넹북이 악세 맞춰주기</h3>
                                            <p class="source">성대 (dakchyo)</p>

                                            <div class="tag-wrap">
                                                <span class="tag">한국어</span>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </li>


                        </ul>
                    </div>

                    <button type="button" class="btn-more">더보기</button>
                </div>

                <footer>
                    <div class="txt-wrap">
                        <p>상표명 : Sed porttitor lectus nibh.</p>
                        <p>대표자: Abcde Fghij, KLMN</p>
                        <p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
                        <p>123-4567-890</p>
                        <p>호스팅 제공업체: Quisque velit nisi</p>
                    </div>
                    <div class="footer-bottom">
                        <ul>
                            <li><a href="#">지원팀에 문의</a></li>
                            <li><a href="#">판매 약관</a></li>
                            <li><a href="#">사업자 정보</a></li>
                        </ul>
                    </div>
                </footer>

            </div>


        </div>
    </div>

</body>
</html>

CSS

/* Default */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0e0e10;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: top;
}

input {
    outline: none;
    border: none;
}

button {
    outline: none;
    border: none;
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
input,
button,
a {
    color: #fff;
}

.btn-purple {
    background-color: #9147ff;
    color: #fff;
}

.font-purple {
    color: #9147ff;
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.main-container {
    width: 100%;
    min-width: 1340px; /* 특정 지점에서 더이상 줄어들지 않게 하기 위함 */
    /* padding-top: 50px; */
}

/* Top Nav */
#top-nav {
    /* fixed를 적용하면 크기가 제대로 잡히지 않기 때문에 width 값이 필요하다. */
    position: fixed;
    width: 100%;
    height: 50%;
    background-color: #0e0e10;
    padding: 0 15px;
    min-width: 1340px;
}

/* Nav Left */
#top-nav .nav-wrap .nav-left .log a img {
    width: 24px;
    height: 28px;
}

#top-nav .nav-wrap .nav-left ul li {
    height: 50px;
    font-size: 20px;
    padding: 0 20px;
}

#top-nav .nav-wrap .nav-left ul li:first-child {
    padding-right: 0;
}

#top-nav .nav-wrap .nav-left ul li:first-child a::after {
    position: relative;
    top: 8px;
    content: '';
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: gray;

    margin-left: 20px;
}

#top-nav .nav-wrap .nav-left ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
}

#top-nav .nav-wrap .nav-left .more span {
    display: block;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
}

/* Nav Center */
#top-nav .nav-center {
    /* 중앙에 위치하려면 flex의 영향을 받지 않게 해야 한다. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top-nav .nav-center .search-wrap {
    width: 380px;
    height: 36px;
    background-color: yellow;
    overflow: hidden;
    border-radius: 5px;
}

#top-nav .nav-center .search-wrap input {
    width: calc(100% - 34px);
    height: 100%;
    background-color: gray;
}

#top-nav .nav-center .search-wrap .btn-search {
    width: 34px;
    height: 100%;
    background-color: darkgray;
}

/* Nav Right */
#top-nav .nav-right .mark-wrap {
    position: relative;
}

#top-nav .nav-right .mark-wrap .icon-mark {
    display: block;
    width: 20px;
    height: 20px;
    background-color: yellow;
    cursor: pointer;
}

#top-nav .nav-right .mark-wrap .alarm {
    position: absolute;
    border-radius: 15px;
    background-color: red;
    color: #fff;
    font-size: 14px;

    padding: 4px 8px 4px;

    top: -12px;
    right: -20px;
}

#top-nav .nav-right .btn-login {
    width: 53px;
    height: 30px;
    background-color: gray;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    margin-left: 20px;
    font-size: 12px;
}

#top-nav .nav-right .btn-purple {
    width: 53px;
    height: 30px;
    border-radius: 5px;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

#top-nav .nav-right .btn-profile {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
}

/* Left Area */
.left-area {
    position: fixed;
    width: 240px;
    background-color: #202024;
    top: 50px; /* top nav 높이만큼 내림 */
    bottom: 0; /* height 100% */
    left: 0;
    overflow-y: auto; /* 스크롤 */
}

.left-area .channel-wrap .channel-header {
    padding: 10px;
}

.left-area .channel-wrap .channel-header h3 {
    font-size: 15px;
}

.left-area .channel-wrap .channel-header .icon-arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
}

.left-area .channel-wrap .channel-body {
}

.left-area .channel-wrap .channel-body ul {
}

.left-area .channel-wrap .channel-body li {
}

.left-area .channel-wrap .channel-body a {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    align-items: flex-start;
}

.left-area .channel-wrap .channel-body img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.left-area .channel-wrap .channel-body .txt-wrap {
    width: 110px;
    margin-left: 10px;
}

.left-area .channel-wrap .channel-body .txt-wrap h4 {
    font-size: 13px;
}

.left-area .channel-wrap .channel-body .txt-wrap .source {
    font-size: 12px;
    color: gray;
}

.left-area .channel-wrap .channel-body .count {
    display: block;
    width: 50px;
    font-size: 12px;
}

.left-area .channel-wrap .channel-body .count::before {
    position: relative;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;

    margin-right: 5px;
    top: 1px;
}

/* Join Wrap */
.left-area .join-wrap {
    margin: 10px;
}

.left-area .join-wrap .txt-wrap {
    padding: 20px;
    background-color: #18181a;
}

.left-area .join-wrap .txt-wrap .h2 {
    font-size: 24px;
}

.left-area .join-wrap .txt-wrap h2 span {
}

.left-area .join-wrap .txt-wrap p {
    margin-top: 10px;
    font-size: 13px;
}

.left-area .join-wrap .txt-wrap .btn-purple {
    margin-top: 10px;
    width: 53px;
    height: 30px;
    border-radius: 5px;

    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

.left-area .info-wrap {
    font-size: 12px;
    margin: 0 10px 10px 10px;
}

.left-area .info-wrap p {
    color: gray;
}

.left-area .info-wrap ul {
    margin-top: 10px;
}

.left-area .info-wrap li {
}

.left-area .info-wrap li a {
    color: gray;
}

.left-area .info-wrap li a::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: gray;

    margin: 0 5px;
}

.left-area .info-wrap li:last-child a::after {
    content: none;
}

어려운점

• 신기술이 적용되었다는 점에서 어떻게 적용시키는지 몰라서 아쉬움

해결방법

• 홀로 몇 가지를 찾아봄(자세히 알 수는 없는 것 같음)

학습소감

• 트위치 홈페이지가 네이버 페이지보다 더 흥미로운 것 같음.

• 트위치

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>트위치</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

    <nav id="top-nav">
        <div class="nav-wrap">
            <div class="nav-left">
                <h1 class="logo">
                    <a href="#">
                        <img src="https://via.placeholder.com/24x28">
                    </a>
                </h1>
                <ul>
                    <li><a href="#">탐색</a></li>
                    <li><a href="#">e스포츠</a></li>
                    <li><a href="#">음악</a></li>
                </ul>
                <div class="more">
                    <a href="#">더보기</a>
                </div>
            </div>

            <div class="nav-center">
                <div class="search-wrap">
                    <input type="text" placeholder="검색">
                    <button class="btn-search"></button>
                </div>
            </div>

            <div class="nav-right">
                <div class="mark-wrap">
                    <i class="icon-mark"></i>
                    <span class="alarm">44</span>
                </div>
                <a href="#" class="btn-login">로그인</a>
                <a href="#" class="btn-purple">회원가입</a>
                <button class="btn-profile"></button>
            </div>
        </div>
    </nav>

    <div class="main-container">
        <div class="left-area">
        </div>
        <div class="content">    
        </div>
    </div>

</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0e0e10;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

.clearfix {
    clear: both;
}

button {
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
}

input, textarea {
    outline: none;
    border: none;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
    color: #ffffff;
}

.btn-purple {
    background-color: #9147ff;
    color: #ffffff;
}

.font-purple {
    color: #9147ff;
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* 상단 네비 영역 */

#top-nav {
    position: fixed;
    width: 100%;
    min-width: 1340px;
    height: 50px;
    background-color: #0e0e10;
    padding: 0 15px;

    z-index: 999;
}

#top-nav .nav-wrap .nav-left .logo a img {
    width: 24px;
    height: 28px;
}

#top-nav .nav-wrap .nav-left ul li {
    height: 50px;
    padding: 0 20px;
    font-size: 20px;
}

#top-nav .nav-wrap .nav-left ul li:first-child {
    padding-right: 0;
}

#top-nav .nav-wrap .nav-left ul li:first-child a::after {
    display: inline-block;
    position: relative;
    content: "";
    width: 1px;
    height: 30px;
    background-color: gray;
    margin-left: 20px;

    top: 8px;
}

#top-nav .nav-wrap .nav-left ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
}

#top-nav .nav-wrap .nav-left .more a {
    display: block;
    height: 50px;
    padding-left: 20px;

    line-height: 50px;
    font-size: 20px;
}

 #top-nav .nav-wrap .nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top-nav .nav-wrap .nav-center .search-wrap {
    overflow: hidden;

    width: 380px;
    height: 36px;
    border-radius: 5px;
    background-color: gray;
}

#top-nav .nav-wrap .nav-center .search-wrap input {
    width: calc(100% - 34px);
    height: 100%;
    background-color: darkgrey;
    padding: 5px 10px;
}

#top-nav .nav-wrap .nav-center .search-wrap .btn-search {
    width: 34px;
    height: 100%;
    background: url(../../naver-ex/img/search-white.png) no-repeat;
    background-size: 24px;
    background-position: 5px;
}

#top-nav .nav-wrap .nav-right .mark-wrap {
    position: relative;
}

#top-nav .nav-wrap .nav-right .mark-wrap .icon-mark {
    display: block;
    width: 20px;
    height: 20px;
    background-color: greenyellow;
}

#top-nav .nav-wrap .nav-right .mark-wrap .alarm {
    position: absolute;
    border-radius: 15px;
    background-color: red;
    padding: 2px 5px;

    color: #ffffff;
    font-size: 14px;
    top: -12px;
    right: -12px;
}

#top-nav .nav-wrap .nav-right .btn {
    width: 60px;
    height: 30px;
    border-radius: 5px;

    text-align: center;
    line-height: 30px;
    font-size: 12px;
}

#top-nav .nav-wrap .nav-right .btn-login {
    margin-left: 20px;
    background-color: gray;
    color: #ffffff;
}

#top-nav .nav-wrap .nav-right .btn-purple {
    margin-left: 10px;
}

#top-nav .nav-wrap .nav-right .btn-profile {
    width: 20px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
}

어려운점

• 반응형이 어렵다고 함. 그리고 최신기술이 적용된 홈페이지라 네이버 보다 더 어렵다고 말한 것대로 실제로 적용을 하는데 어렵게 느껴짐.

해결방법

• 복습과 트위치 홈페이지를 뜯어봄.

학습소감

• 개인적으로 길이만 긴 네이버 페이지보다 훨씬 흥미롭게 뜯어보았음. 여전히 혼자서 짜보라고 하면 버겁지만 그래도 이전보다 익숙해짐.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>네이버</title>
</head>
<body>

    <header id="audio-header">
        <div class="audio-container">
            <nav id="audio-nav" class="audio-flex-between">
                <div class="audio-nav-left audio-flex-between">
                    <h1 class="audio-logo">
                        <a href="#">audio clip</a>
                    </h1>
                    <ul class="audio-flex-end">
                        <li><a href="audio.html"><span>홈</span></a></li>
                        <li><a href="#"><span>랭킹</span></a></li>
                        <li><a href="#"><span>연재 채널</span></a></li>
                        <li><a href="#"><span>오디오북</span></a></li>
                        <li><a href="#" class="active"><span>카테고리</span></a></li>
                        <li><a href="#"><span>이벤트</span></a></li>
                    </ul>
                </div>

                <div class="audio-nav-right audio-flex-between">
                    <div class="search-wrap audio-flex-start">
                        <i class="icon-search"></i>
                        <input type="text" placeholder="무엇을 찾으세요?">
                    </div>

                    <div class="profile-wrap">
                        <img src="https://ssl.pstatic.net/static/audio/img/m/2018/img/img_user.png?type=s80" class="profile-img">
                        <a href="#" class="btn-login">로그인</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <main id="audio-main" class="audio-sub-main" role="main">
        <div class="audio-container">
            <div id="audio-category-channel" class="audio-category">
                <div class="title-wrap">
                    <h2>채널</h2>
                    <p>4,989개의 채널</p>
                </div>

                <ul class="audio-category-lists">
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>어학</h3>
                            <p>영어, 중국어, 일본어</p>
                            <img class="thumbnail" src="https://via.placeholder.com/103x103">
                        </a>
                    </li>
                </ul>
            </div>

            <div id="audio-category-book" class="audio-category">
                <div class="title-wrap">
                    <h2>오디오북</h2>
                    <p>20,477개의 오디오북</p>
                </div>

                <ul class="audio-category-lists">
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>
                    <li class="category-list">
                        <a href="#">
                            <h3>소설</h3>
                            <p>
                                세계문학,<br>
                                한국소설
                            </p>
                            <img class="thumbnail" src="https://via.placeholder.com/82x119">
                        </a>
                    </li>    
                </ul>
            </div>
        </div>
    </main>

    <footer id="audio-footer">
        <div class="audio-container">
            <h1>
                <a href="#">audio clip</a>
            </h1>

            <div class="copyright-wrap">
                <p> 동해물과 백두산이
                    동해물과 백두산이.<br>
                    Curabitur aliquet quam id dui posuere blandit.
                </p>
            </div>

            <nav class="footer-nav">
                <ul>
                    <li><a href="#">로그인</a></li>
                    <li><a href="#">오디오클립 소개</a></li>
                    <li><a href="#">공식 포스트</a></li>
                    <li><a href="#">콘텐츠 제안</a></li>
                    <li><a href="#">이용약관</a></li>
                    <li><a href="#" class="on">개인정보처리방침</a></li>
                    <li><a href="#">책임의 한계와 법적고지</a></li>
                    <li><a href="#">결제관문의</a></li>
                    <li><a href="#">고객센터</a></li>
                </ul>
            </nav>
            <a href="#" class="footer-copyright-link">
                <span class="symbol">&copy;</span>
                NAVER
                <span>Corp.</span>
            </a>
        </div>    
    </footer>


</body>
</html>

CSS

/* 메인 오른쪽 */
.audio-main-right {
    float: right;
    width: 330px;
}

#audio-intro {

}

#audio-intro .audio-body ul {

}

#audio-intro .audio-body li {

}

#audio-intro .audio-body li a {

}

#audio-intro .audio-body li img {
    width: 152px;
    height: 152px;
    border-radius: 4px;
}

#audio-intro .audio-body li h2 {
    margin-top: 12px;
    font-size: 13px;
}

#audio-intro .audio-body li .author {
    margin-top: 4px;
    font-size: 12px;
    color: #959595;
}

#audio-intro .audio-body button {
    top: 82px;
}

#audio-discovery {

}

#audio-discovery .audio-header {
    position: relative;
}

#audio-discovery .audio-header h2 {
    font-size: 17px;
    line-height: 24px;
}

#audio-discovery .audio-header p {
    margin-top: 7px;
    font-size: 13px;
    color: #888;
}

#audio-discovery .audio-header .link-setting {
    display: block;
    position: absolute;

    padding: 10px 18px 8px;
    background-color: #ffffff;

    font-size: 13px;
    color: #157efb;
    font-weight: 600;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

    right: 0;
    top: 0px;
}

#audio-discovery .audio-body ul {

}

#audio-discovery .audio-body li {
    width: 152px;
    margin-bottom: 40px;
}

#audio-discovery.audio-body li a {

}

#audio-discovery .audio-body li img {
    width: 100%;
    height: 152px;
    border-radius: 4px;
}

#audio-discovery .audio-body li h2 {
    margin-top: 12px;
    font-size: 13px;

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 36px;

}

#audio-discovery .audio-body .btn-more {
    display: block;

    margin: 0 auto;
    font-size: 14px;
    color: #222;

    padding: 12px 21px 12px;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 /7%);
    font-weight: 600;

    cursor: pointer;
}

#audio-discovery .audio-body .btn-more .color-blue {
    color: #157efb;
}

#audio-discovery .audio-body .btn-more .pages {
    color: #959595;
}

#audio-create {
    padding-top: 0 !important;
}

#audio-create .audio-body {

}

#audio-create .audio-body li {
    padding: 22px 4px;
    border-top: solid 1px #efefef
}

#audio-create .audio-body li:last-child {
    border-bottom: solid 1px #efefef;
}

#audio-create .audio-body li a {

}

#audio-create .audio-body li .txt-wrap {
    width: 225px;
}

#audio-create .audio-body li .txt-wrap h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

#audio-create .audio-body li .txt-wrap p {
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: -.8px;
}

#audio-create .audio-body li .txt-wrap p.color-blue {
    color: #2db8e8;
}

#audio-create .audio-body li .txt-wrap p.color-purple {
    color: #8560f7;
}

#audio-create .audio-body li .list-bg {
    width: 80px;
    height: 64px;
}

#audio-create .audio-body li .list-bg.list-bg-1 {
    background-color: #2db8e8;
}

#audio-create .audio-body li .list-bg.list-bg-2 {
    background-color: #8560f7;
}

#audio-footer {
    background-color: #eaecef;
    padding: 48px 0 164px;
    font-family: Roboto,NotosansKR,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue",Helvetica,Arial,"Malgun Gothic","맑은 ê³ ë”•",Dotum,"돋움",sans-serif;;
}

#audio-footer h1 {
    font-size: 25px;
}

#audio-footer h1 a {
    color: #959595;    
}

#audio-footer .copyright-wrap {
    margin-top: 37px;
}

#audio-footer .copyright-wrap p {
    /*letter-spacing: -.5px;*/
    font-size: 13px;
    color: #959595;
    line-height: 19px;
}

#audio-footer .footer-nav {
    margin-top: 47px;
}

#audio-footer .footer-nav ul {
    overflow: hidden;
}

#audio-footer .footer-nav li {
    float: left;
}

#audio-footer .footer-nav li a {
    font-size: 13px;
    color: #959595;
    letter-spacing: -1px;
}

#audio-footer .footer-nav li a.on {
    font-weight: 600;
}

#audio-footer .footer-nav li a:after {
    display: inline-block;

    content: "";
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #959595;

    /*margin: 4px 7px;*/

    vertical-align: top;
    margin: 9px 7px 0;
}

#audio-footer .footer-nav li:last-child a:after {
    content: none;
}

#audio-footer .footer-copyright-link {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #959595;
}

#audio-footer .footer-copyright-link .symbol {

}

#audio-main.audio-sub-main {
    background-color: #ffffff;
}

.audio-category {
    padding-top: 71px;
}

.audio-category .title-wrap {
    padding-bottom: 20px;
    border-bottom: solid 1px #ececec;
}

.audio-category .title-wrap h2 {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -1px;
}

.audio-category .title-wrap p {
    font-size: 14px;
    color: #959595;
    margin-top: 20px;
}

.audio-category .audio-category-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: stretch;
    margin-top: 22px;
}

.audio-category .audio-category-lists .category-list {
    width: 162px;
    height: 164px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.audio-category .audio-category-lists .category-list:nth-child(6n) {
    margin-right: 0;
}

.audio-category .audio-category-lists .category-list a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(133, 134, 247);
    border-radius: 6px;
    padding: 14px;

    overflow: hidden;
}

.audio-category .audio-category-lists .category-list a h3 {
    font-size: 19px;
    line-height: 1.3;
    color: #ffffff;
}

.audio-category .audio-category-lists .category-list a p {
    position: absolute;
    width: 80px;
    font-size: 13px;
    color: #fefefe;

    bottom: 14px;
}

.audio-category .audio-category-lists .category-list a .thumbnail {
    position: absolute;

    width: 78px;
    height: 78px;
    right: -17px;
    bottom: 0;
    transform: rotate(25deg);
    border-radius: inherit;

    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}

#audio-category-book {
    padding-bottom: 121px;
}

#audio-category-book .category-list a {
    background-color: rgb(200, 100, 108);
}

#audio-category-book .category-list .thumbnail {
    width: 82px;
    height: 119px;
    right: -25px;
}

어려운점

• 카피캣을 그대로 따라했지만, 전체적인 그림을 잘 못그리겠음

• 코드가 길어지고 세부내용에 대한 조정을 실제 혼자서 할 수 있을지 계속 의문이 듦

• 세부 그림이 적용될 때의 값에 대한 어려움

해결방법

• 네이버 카피캣의 처음 부분부터 다시 시작해봄

• 코드의 세부내용은 복습하기로 함

• 세부 값들에 대해 고민하지 않고 조정해보면서 맞춰봄.

학습소감

• 네이버의 카테고리별로 카피캣을 따라해봤는데 과연이게 도움이 될지 의문이 드는 것은 지금까지 따라해봤지만 남이 만들어 놓은 것을 그저 따라한 것이라 과연 혼자 할 수 있을지 의문이 들기 때문임. 혼자서 더 연습이 필요하다고 생각함.

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>네이버</title>
</head>
<body>

    <header id="audio-header">
        <div class="audio-container">
            <nav id="audio-nav" class="audio-flex-between">
                <div class="audio-nav-left audio-flex-between">
                    <h1 class="audio-logo">
                        <a href="#">audio clip</a>
                    </h1>
                    <ul class="audio-flex-end">
                        <li><a href="#" class="active"><span>홈</span></a></li>
                        <li><a href="#"><span>랭킹</span></a></li>
                        <li><a href="#"><span>연재 채널</span></a></li>
                        <li><a href="#"><span>오디오북</span></a></li>
                        <li><a href="audio-category.html"><span>카테고리</span></a></li>
                        <li><a href="#"><span>이벤트</span></a></li>
                    </ul>
                </div>

                <div class="audio-nav-right audio-flex-between">
                    <div class="search-wrap audio-flex-start">
                        <i class="icon-search"></i>
                        <input type="text" placeholder="무엇을 찾으세요?">
                    </div>

                    <div class="profile-wrap">
                        <img src="https://ssl.pstatic.net/static/audio/img/m/2018/img/img_user.png?type=s80" class="profile-img">
                        <a href="#" class="btn-login">로그인</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <main id="audio-main" role="main">
        <div class="audio-container audio-flex-between">
            <div class="audio-main-left">

                <div id="audio-today" class="audio-section">
                    <div class="audio-header">
                        <h2>오늘의 오디오클립</h2>
                    </div>

                    <div class="audio-body">

                        <div class="audio-slide-wrap">

                            <a href="#">
                                <div class="audio-slide audio-flex-start">

                                    <img src="https://via.placeholder.com/380x198">
                                    <div class="txt-wrap">
                                        <h3>[재혼황후]오디오 드라마</h3>
                                        <p>오디오 드라마로 만나는 레전드 웹소설</p>
                                    </div>

                                </div>
                            </a>    


                        <button type="button" class="btn btn-left"></button>
                        <button type="button" class="btn btn-right"></button>

                        </div>

                    </div>
                </div>

                <div id="audio-original" class="audio-section">
                    <div class="audio-header">
                        <h2>오디오클립 추천 오리지널</h2>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>시크릿 - 당신이 모르는 경제이야기</h3>
                                    <span class="author">인포스탁데일리</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>시크릿 - 당신이 모르는 경제이야기</h3>
                                    <span class="author">인포스탁데일리</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>시크릿 - 당신이 모르는 경제이야기</h3>
                                    <span class="author">인포스탁데일리</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>시크릿 - 당신이 모르는 경제이야기</h3>
                                    <span class="author">인포스탁데일리</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>시크릿 - 당신이 모르는 경제이야기</h3>
                                    <span class="author">인포스탁데일리</span>
                                </a>
                            </li>
                        </ul>

                        <button type="button" class="btn btn-right"></button>
                    </div>
                </div>

                <div id="audio-playlist" class="audio-section">
                    <div class="audio-header">
                        <h2>나를 위한 플레이리스트</h2>
                        <p>당신을 위해 메일 새롭게 업데이트 됩니다.</p>

                        <a href="#" class="link-total">전체보기</a>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/152x152">
                                        <i class="icon-like"></i>
                                        <i class="icon-play"></i>
                                    </div>

                                    <h3>이번주 베스트 추천</h3>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/152x152">
                                        <i class="icon-like"></i>
                                        <i class="icon-play"></i>
                                    </div>

                                    <h3>이번주 베스트 추천</h3>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/152x152">
                                        <i class="icon-like"></i>
                                        <i class="icon-play"></i>
                                    </div>

                                    <h3>이번주 베스트 추천</h3>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/152x152">
                                        <i class="icon-like"></i>
                                        <i class="icon-play"></i>
                                    </div>

                                    <h3>이번주 베스트 추천</h3>
                                </a>
                            </li>
                        </ul>

                        <button type="button" class="btn btn-right"></button>
                    </div>
                </div>

                <div id="audio-live" class="audio-section">
                    <div class="audio-header">
                        <h2>라이브 ON</h2>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120">
                                        <div class="live-state">
                                            <span class="live">LIVE</span>
                                        </div>
                                    </div>
                                    <h3>[노래의말들] 가사 읽는 밤</h3>
                                    <span class="author">8. 15. 21:00 예정</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120">
                                        <div class="live-state">
                                            <span class="live">LIVE</span>
                                        </div>
                                    </div>
                                    <h3>[노래의말들] 가사 읽는 밤</h3>
                                    <span class="author">8. 15. 21:00 예정</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120">
                                        <div class="live-state">
                                            <span class="live">LIVE</span>
                                        </div>
                                    </div>
                                    <h3>[노래의말들] 가사 읽는 밤</h3>
                                    <span class="author">8. 15. 21:00 예정</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120">
                                        <div class="live-state">
                                            <span class="live">LIVE</span>
                                        </div>
                                    </div>
                                    <h3>☂빗소리 ASMR 잠못드는 밤</h3>
                                    <span class="author">라이브 중</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120">
                                        <div class="live-state">
                                            <span class="live">LIVE</span>
                                        </div>
                                    </div>
                                    <h3>☂빗소리 ASMR 잠못드는 밤</h3>
                                    <span class="author">라이브 중</span>
                                </a>
                            </li>
                        </ul>

                        <button type="button" class="btn btn-right"></button>
                    </div>
                </div>

                <div id="audio-book" class="audio-section">
                    <div class="audio-header">
                        <h2>셀럽들의 목소리로 듣는 베스트셀러</h2>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120x170">
                                        <span class="status">요약본</span>
                                        <span class="time">1시간 58분</span>
                                    </div>

                                    <h3>은둔의 즐거움</h3>
                                    <span class="author-1">신기율 저</span>
                                    <span class="author-2">금새록 낭독</span>
                                    <span class="price">대여 3,000원</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120x170">
                                        <span class="time">1시간 4분</span>
                                    </div>

                                    <h3>당신의 자리 - 나무로 자라는 방법</h3>
                                    <span class="author-1">신기율 저</span>
                                    <span class="author-2">금새록 낭독</span>
                                    <span class="price">대여 3,000원</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120x170">
                                        <span class="status">요약본</span>
                                        <span class="time">1시간 58분</span>
                                    </div>

                                    <h3>은둔의 즐거움</h3>
                                    <span class="author-1">신기율 저</span>
                                    <span class="author-2">금새록 낭독</span>
                                    <span class="price">대여 3,000원</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120x170">
                                        <span class="status">요약본</span>
                                        <span class="time">1시간 58분</span>
                                    </div>

                                    <h3>은둔의 즐거움</h3>
                                    <span class="author-1">신기율 저</span>
                                    <span class="author-2">금새록 낭독</span>
                                    <span class="price">대여 3,000원</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="image-wrap">
                                        <img src="https://via.placeholder.com/120x170">
                                        <span class="status">요약본</span>
                                        <span class="time">1시간 58분</span>
                                    </div>

                                    <h3>은둔의 즐거움</h3>
                                    <span class="author-1">신기율 저</span>
                                    <span class="author-2">금새록 낭독</span>
                                    <span class="price">대여 3,000원</span>
                                </a>
                            </li>
                        </ul>

                        <button type="button" class="btn btn-right"></button>
                    </div>
                </div>

                <div id="audio-channel" class="audio-section">
                    <div class="audio-header">
                        <h2>새로 나온 채널</h2>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>향기나는편지</h3>
                                    <span class="author">향기나는편지</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>향기나는편지</h3>
                                    <span class="author">향기나는편지</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>향기나는편지</h3>
                                    <span class="author">향기나는편지</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>향기나는편지</h3>
                                    <span class="author">향기나는편지</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/120">

                                    <h3>향기나는편지</h3>
                                    <span class="author">향기나는편지</span>
                                </a>
                            </li>
                        </ul>

                        <button type="button" class="btn btn-right"></button>
                    </div>
                </div>
            </div>

            <div class="audio-main-right">
                <div id="audio-intro" class="audio-section">
                    <div class="audio-header">
                        <h2>인기 채널을 소개합니다.</h2>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/152">
                                    <h2>오늘의 회화 - 영어</h2>
                                    <span class="author">네이버</span>    
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/152">
                                    <h2>내 남편과 결혼해줘</h2>
                                    <span class="author">네이버</span>    
                                </a>
                            </li>
                        </ul>

                        <button type="button" class="btn btn-right"></button>
                    </div>
                </div>

                <div id="audio-discovery" class="audio-section">
                    <div class="audio-header">
                        <h2>
                            오늘의 발견<br>
                            요즘 많이 든는 채널👍
                        </h2>
                        <p>8월 13일 0시부터 24시까지 많이 들은 채널입니다.</p>

                        <a href="#" class="link-setting">관심설정</a>
                    </div>

                    <div class="audio-body">
                        <ul class="audio-flex-between">
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/152x152">
                                    <h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/152x152">
                                    <h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
                                </a>
                            </li>    
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/152x152">
                                    <h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
                                </a>
                            </li>    
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/152x152">
                                    <h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
                                </a>
                            </li>        
                        </ul>

                        <button class="btn-more">
                            <span class="color-blue">더 많이</span> 발견하기 1 <span class="pages">/ 5</span> 
                        </button>
                    </div>
                </div>

                <div id="audio-create" class="audio-section">
                    <div class="audio-body">
                        <ul>
                            <li>
                                <a href="#" class="audio-flex-between">
                                    <div class="txt-wrap">
                                        <h2>오디오클립 채널을 만들어보세요!</h2>
                                        <p class="color-blue">콘텐츠 제안하기</p>
                                    </div>
                                    <div class="list-bg list-bg-1"></div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="audio-flex-between">
                                    <div class="txt-wrap">
                                        <h2>즐거움이 들린다! 오디오클립</h2>
                                        <p class="color-purple">오디오클립이 궁금하시다면?</p>
                                    </div>
                                    <div class="list-bg list-bg-2"></div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer id="audio-footer">
        <div class="audio-container">
            <h1>
                <a href="#">audio clip</a>
            </h1>

            <div class="copyright-wrap">
                <p>
                    Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.<br> Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.<br>
                    Curabitur aliquet quam id dui posuere blandit.
                </p>
            </div>

            <nav class="footer-nav">
                <ul>
                    <li><a href="#">로그인</a></li>
                    <li><a href="#">오디오클립 소개</a></li>
                    <li><a href="#">공식 포스트</a></li>
                    <li><a href="#">콘텐츠 제안</a></li>
                    <li><a href="#">이용약관</a></li>
                    <li><a href="#" class="on">개인정보처리방침</a></li>
                    <li><a href="#">책임의 한계와 법적고지</a></li>
                    <li><a href="#">결제관문의</a></li>
                    <li><a href="#">고객센터</a></li>
                </ul>
            </nav>
            <a href="#" class="footer-copyright-link">
                <span class="symbol">&copy;</span>
                NAVER
                <span>Corp.</span>
            </a>
        </div>    
    </footer>


</body>
</html>

CSS

/* 네이버 오디오 */
.audio-container {
    width: 1080px;
    margin: 0 auto;
}

.audio-flex-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
}

.audio-flex-between {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.audio-flex-end {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
}

.audio-flex-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}
/*--------------------------------> 디폴트값*/



/* 상단 영역 */
#audio-header {
    position: fixed;
    width: 100%;
    height: 61px;
    background-color: #ffffff;
    border-bottom: solid 1px #efeff4;

    left: 0;
    top: 0;

    z-index: 99999;

    font-family: Roboto,NotosansKR,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue",Helvetica,Arial,"Malgun Gothic","맑은 ê³ ë”•",Dotum,"돋움",sans-serif;;
}

#audio-header .audio-nav-left {
    width: 660px;
}

#audio-header .audio-nav-left .audio-logo {
    font-size: 25px;
}

#audio-header .audio-nav-left .audio-logo a {

}

#audio-header .audio-nav-left ul {
    padding-top: 6px;
}

#audio-header .audio-nav-left li {

}

#audio-header .audio-nav-left li a {
    display: block;
    font-size: 17px;
    padding: 12px 13px 17px 12px;
}

#audio-header .audio-nav-left li a.active {
    font-weight: 700;
}

#audio-header .audio-nav-left li a span {
    position: relative;
    display: inline-block;
    height: 21px;
}

#audio-header .audio-nav-left li a.active span:after {
    display: block;
    position: absolute;   
    content: "";
    background-color: #222222;
    border-bottom: solid 3px #222222;
    border-radius: 1.5px;

    z-index: 1;

    left: -4.5px;
    right: -5.5px;
    bottom: -22px;
}

#audio-header .audio-nav-left li a span:hover {
    font-weight: 700;
}

#audio-header .audio-nav-right {
    width: 330px;
} 

#audio-header .audio-nav-right .search-wrap {
    width: 180px;
    height: 40px;
    border: solid 2px rgba(0,86,201,.2);
    border-radius: 4px;
    background-color: #ffffff;
}

#audio-header .audio-nav-right .search-wrap .icon-search {
    display: inline-block;
    width: 32px;
    height: 100%;
    background-image: url(../img/search.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#audio-header .audio-nav-right .search-wrap input {
    width: calc(100% - 32px);
    height: 100%;

    padding: 8px 2px;
    font-size: 15px;

    outline: none;
    border: none;
    caret-color: #22c463;
}


#audio-header .audio-nav-right .profile-wrap {

}

#audio-header .audio-nav-right .profile-wrap .profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}

#audio-header .audio-nav-right .profile-wrap .btn-login {
    font-size: 15px;
    padding-left: 8px;
    vertical-align: middle;
}


/* 메인 영역 */
#audio-main {
    width: 100%;
    background-color: #f6f8fa;

    padding-top: 61px;

    font-family: #;
}

#audio-main .audio-container {
    /*overflow: hidden;*/
    align-items: flex-start;
}

/* 섹션별 공통 디자인 */
.audio-section {
    padding: 32px 0;
}

.audio-section .audio-header {

}

.audio-section .audio-header h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.audio-section .audio-body {
    position: relative;
    padding-top: 19px;
}

.audio-section .audio-body .btn-right {
    display: none;
    position: absolute;

    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 50%;

    right: 0;
    background-image: url(../img/right-arrow.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 55% 50%;

    box-shadow: 3px 3px 15px -7px rgb(0 0 0 / 72%);
    -webkit-box-shadow: 3px 3px 15px -7px rgb(0 0 0 / 72%);
    -moz-box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);
    cursor: pointer;

    right: -17px;
}

.audio-section .audio-body .btn-left {
    display: none;
    left: -17px;
    background-image: url(../img/left-arrow.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 43%;
}

.audio-body:hover .btn {
    display: initial;
}


/* 메인 왼쪽 */
/* 오늘의 오디오 클립 */
.audio-main-left {
    float: left;
    width: 660px;
}

#audio-today .audio-slide .audio-slide-wrap {
    width: 100%;
}

#audio-today .audio-slide {
    align-items: flex-start;
}

#audio-today .audio-slide img {
    width: 380px;
    height: 198px;

    margin-right: 20px;
    border-radius: 8px;
}

#audio-today .audio-slide .txt-wrap {
    width: 240px;
}

#audio-today .audio-slide .txt-wrap h3 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp:  2;
    -webkit-box-orient: vertical;
    max-height: 52px;

    padding-top: 2px;

    font-size: 18px;
    font-weight: 500;

}

#audio-today .audio-slide .txt-wrap p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    margin-top: 12px;
    font-size: 12px;
    color: #666;
}

#audio-today .audio-slide-wrap {
    position: relative;
}

#audio-today .audio-slide-wrap .btn {
    position: absolute;

    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 50%;

    box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);
    -webkit-box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);
    -moz-box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);

    top: 80px;

    cursor: pointer;
}

#audio-today .audio-slide-wrap .btn-right {
    right: 0;
    background-image: url(../img/right-arrow.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 55% 50%;
}


/* 오디오클립 추천 오리지널 */
#audio-original {

}

#audio-original .audio-body {

}

#audio-original .audio-body ul {
    align-items: flex-start;
}

#audio-original .audio-body ul li {
    width: 120px;
}

#audio-original .audio-body li a {

}

#audio-original .audio-body li img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
}

#audio-original .audio-body h3 {
    margin-top: 10px;
    font-size: 13px;

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px;
}

#audio-original .audio-body .author {
    margin-top: 6px;

    font-size: 12px;
    color: #959595;
}

#audio-original .audio-body .btn-right {
    top: 60px;
}



/* 나를 위한 플레이리스트 */
#audio-playlist {

}

#audio-playlist .audio-header {
    position: relative;
}

#audio-playlist .audio-header h2 {

}

#audio-playlist .audio-header p {
    margin-top: 8px;

    font-size: 13px;
    font-weight: 400;
    color: #888;
}

#audio-playlist .audio-header .link-total {
    display: block;
    position: absolute;

    padding: 10px 18px 8px;
    background-color: #ffffff;

    font-size: 13px;
    color: #157efb;
    font-weight: 600;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

    right: 0;
    top: 6px;
}

#audio-playlist .audio-body {

}

#audio-playlist .audio-body ul {
    align-items: flex-start;
}

#audio-playlist .audio-body li {
    width: 152px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

#audio-playlist .audio-body li .image-wrap {
    position: relative;
    width: 150px;
    height: 150px;
}


#audio-playlist .audio-body .image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px 4px 0 0;
}

#audio-playlist .audio-body .image-wrap .icon-like {
    position: absolute;
    width: 20px;
    height: 17px;
    background-image: url(../img/heart.png);
    background-size: 17px 17px;
    background-repeat: no-repeat;

    top: 5px;
    right: 5px;
}

#audio-playlist .audio-body .image-wrap .icon-play {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url(../img/play.png);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 55% 50%;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 50%;

    box-shadow: 2px 2px 7px -2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 2px 2px 7px -2px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 2px 7px -2px rgba(0,0,0,0.5);

    bottom: -16px;
    right: 10px;
}

#audio-playlist .audio-body li h3 {
    padding: 17px 11px;
    font-size: 13px;
    background-color: #ffffff;
    border-radius: 0 0 4px 4px;
}

#audio-playlist .audio-body .btn-right {
    top: 90px;
}


/* 라이브 ON */
#audio-live {

}

#audio-live .audio-body {

}

#audio-live .audio-body ul {
    align-items: flex-start;
}

#audio-live .audio-body li {
    width: 120px;
}

#audio-live .audio-body li .image-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    border: solid 2px #E1E3E4;
    border-radius: 50%;
}

#audio-live .audio-body li.active .image-wrap {
    border: solid 2px #ff0031;
}

#audio-live .audio-body li .image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 2px #f6f8fa;
    border-radius: 50%
}

#audio-live .audio-body li .image-wrap .live-state {
    position: absolute;
    padding: 2px;
    border: solid 1px #ffffff;
    background-color: #ffffff;
    border-radius: 3px;

    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

#audio-live .audio-body li .image-wrap .live-state .live {
    display: inline-block;
    padding: 2px 4px;
    color: #FF0031;
    border: solid 1.5px #FF0031;
    background-color: #ffffff;
    border-radius: 3px;

    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
}

#audio-live .audio-body li.active .image-wrap .live-state .live {
    background-color: #FF0031;
    color: #ffffff;
}

#audio-live .audio-body li h3 {
    margin-top: 16px;
    font-size: 13px;
}

#audio-live .audio-body li .author {
    font-size: 6px;
    font-size: 12px;
    color: #959595;
}

#audio-live .audio-body .btn-right {
    top: 60px
}




/* 셀럽들의 목소리로 듣는 베스트셀러 */
#audio-book {

}

#audio-book .audio-body {

}

#audio-book .audio-body ul {
    align-items: flex-start;
}

#audio-book .audio-body ul li {
    width: 120px;
}

#audio-book .audio-body .image-wrap {
    position: relative;
    width: 100%;
}

#audio-book .audio-body .image-wrap img  {
/*    position: absolute;*/
    width: 100%;
    border-radius: 2px;
}

#audio-book .audio-body .image-wrap .status {
    position: absolute;    
    padding: 2px 5px;
    background-color: rgba(17, 17, 17, .75);

    font-size: 11px;
    color: #ffffff;

    top: 5px;
    left: 5px;
}

#audio-book .audio-body .image-wrap .time {
    position: absolute;

    padding: 2px 5px;
    background-color: rgba(17, 17, 17, .75);

    font-size: 11px;
    color: #ffffff;

    right: 5px;
    bottom: 5px;
}

#audio-book .audio-body li h3 {
    font-size: 13px;
    margin-top: 11px;

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px;
}

#audio-book .audio-body .author-1 {
    display: block;
    margin-top: 4px;

    font-size: 12px;
    color: #959595;
}

#audio-book .audio-body .author-2 {
    display: block;

    font-size: 12px;
    color: #959595;
}

#audio-book .audio-body .price {
    display: block;
    margin-top: 4px;

    font-size: 12px;
    font-weight: 500;
}

#audio-book .audio-body .btn-right {
    top: 85px;
}

/* 새로 나온 채널 */
#audio-channel .audio-body ul {
    align-items: flex-start;
}

#audio-channel .audio-body ul li {
    width: 120px;
}

#audio-channel .audio-body li a {

}

#audio-channel .audio-body li img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
}

#audio-channel .audio-body h3 {
    margin-top: 10px;
    font-size: 13px;

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px;
}

#audio-channel .audio-body .author {
    margin-top: 6px;

    font-size: 12px;
    color: #959595;
}

#audio-channel .audio-body .btn-right {
    top: 60px;
}

어려운점

• 선택자들의 상세한 태그의 기능들

• 각종 padding 값의 미세한 조정

• 디자인이 같은듯 달라서 확인하는데 이게 정확하게 무엇을 뜻하는지 모를 때가 많아서 고민이 됨

• 영상 볼륨 너무 작아서 정말 답답함

해결방법

• 상세 태그 기능을 다시 알아 봄

• 미세 조정값은 컴퓨터 환경에 따라 약간씩 달라질 수도 있고 되도록 같은 값이면 같은 화면으로 보임

• 볼륨은 해결 방법이 없는데 진짜 소리를 100 으로 해도 잘 안들림

학습소감

• 코드가 길어지면서 링크와 링크로 연결된 홈페이지 사이트를 만든다는게 쉬운일이 아니구나라는 것을 다시 깨달음. 그리고 CSS 코드를 따로 만들었지만, 이렇게 까지 긴 줄로 작성되는 거라면 파일을 따로 만들어서 작업을 해야겠다고 생각함. 혹은 HTML에다 STYLE 태그를 사용해서 그 안에 직접 적어넣는 방식으로 한 번 진행해보고 싶다는 생각도 함. 생각보다 다양한 방식이 적용되고 사용되는데 어떤 것이 최적일지 고민됨.

HTML

<div class="right">

    <div id="esport-news-view">
      <h2>많이 본 뉴스</h2>
      <ol>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
        <li>
            <a href="#" class="esport-flex-between">
                <div class="image-wrap">
                <img src="https://via.placeholder.com/84x48" alt="news image">
                <span class="rank">1</span>
                </div>
                <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
            </a>
        </li>
      </ol>
    </div>

    <div id="esport-schedule">
        <h2>e스포츠 경기 일정/결과</h2>
        <div class="schedule-wrap">
            <div class="schedule-header esport-flex-between">
            <button class="arrow arrow-left"></button>
            <span>06.05 토</span>
            <button class="arrow arrow-right"></button>
            </div>
            <div class="schedule-body">
                <ul>
                    <li>
                        <h3>2021 LCK AS 챔피언십 풀리그 3일차</h3>
                        <div class="status-wrap esport-flex-center">
                            <span class="status">진행중</span>
                            <span class="time">10:00</span>
                        </div>
                        </li>
                    <li>
                        <h3>2021 LCK AS 챔피언십 풀리그 3일차</h3>
                        <div class="status-wrap esport-flex-center">
                            <span class="status">진행중</span>
                            <span class="time">10:00</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

#esport-main .right {
    float: right;
    width: 357px;
    height: 2000px;
}

#esport-news-view {
    padding: 20px;
    border: solid 1px gray;
    border-radius: 10px;

    margin-bottom: 30px;
}

#esport-news-view h2 {
    font-size: 18px;
}

#esport-news-view ol {
    margin-top: 20px;
}

#esport-news-view li {
    margin-bottom: 8px;
}

#esport-news-view li:last-child {
    margin-bottom: 0;
}

#esport-news-view li a {
}

#esport-news-view .image-wrap {
    overflow: hidden;
    position: relative;
    width: 84px;
    height: 48px;
    border: solid 1px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

#esport-news-view .image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#esport-news-view .image-wrap .rank {
    position: absolute;
    background-color: #4e41db;
    border-bottom-right-radius: 4px;

    padding: 4px 10px;

    top: 0;
    left: 0;

    font-size: 13px;
    color: #fff;
    font-weight: 800;
}

#esport-news-view li h3 {
    display: -webkit-box;
    overflow: hidden;

    width: 218px;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    font-size: 14px;
    line-height: 19px;
}

#esport-schedule {

}

#esport-schedule h2 {
    font-size: 18px;
}

#esport-schedule .schedule-wrap {
    margin-top: 15px;
    border: solid 1px gray;
    border-radius: 10px;
}

#esport-schedule .schedule-wrap .schedule-header {
    padding: 10px 15px;
    border-bottom: solid 1px gray;
}

#esport-schedule .schedule-wrap .schedule-header .arrow {
    width: 20px;
    height: 20px;
}

#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-left {
    background-color: yellow;
}

#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-right {
    background-color: greenyellow;
}

#esport-schedule .schedule-wrap .schedule-header span {
    position: relative;

    font-size: 18px;
    font-weight: 800;

    top: 3px;
}

#esport-schedule .schedule-body {
    padding: 17px 0;
}

#esport-schedule .schedule-body li {
}

#esport-schedule .schedule-body li:first-child::after {
    content: '';
    display: block;
    width: calc(100%-40px);
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);

    margin: 17px auto;
}

#esport-schedule .schedule-body li h3 {
    font-size: 14px;
    margin-bottom: 12px;
    text-align: center;
}

#esport-schedule .schedule-body li .status-wrap {
}

#esport-schedule .schedule-body li .status-wrap:hover {
    background-color: yellow;
    cursor: pointer;
}

#esport-schedule .schedule-body li .status-wrap .status {
    background-color: rgba(255, 0, 0, 0.1);
    color: red;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;

    margin-right: 4.5px;

    padding: 2px 4px;
}

#esport-schedule .schedule-body li .status-wrap .time {
    position: relative;

    top: 1px;
    font-size: 15px;
    font-weight: 700;
}

/*오디오*/
.audio-container {
    width: 1080px;
    margin: 0 auto;
}

.audio-flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.audio-flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.audio-flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.audio-flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#audio-header {
    position: fixed;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #efeff4;

    left: 0;
    top: 0;

    z-index: 99999;
}

#audio-header .audio-nav-left {
    width: 660px;
}

#audio-header .audio-nav-left .audio-logo {
    font-size: 25px;
}

#audio-header .audio-nav-left .audio-logo a {
}

#audio-header .audio-nav-left ul {
    padding-top: 10px;
}

#audio-header .audio-nav-left li {
}

#audio-header .audio-nav-left li a {
    display: block;
    font-size: 17px;
    font-weight: 700;
    padding: 12px 13px 17px 12px;
}

#audio-header .audio-nav-left li a.active {
    font-weight: 700;
}

#audio-header .audio-nav-left li a span {
    position: relative;
    display: inline-block;
    height: 21px;
}

#audio-header .audio-nav-left li a.active span::after {
    display: block;
    position: absolute;
    content: '';
    border-bottom: solid 3px #222;
    border-radius: 1.5px;

    z-index: 1;

    left: -4.5px;
    right: -5.5px;
    bottom: -17px;
}

#audio-header .audio-nav-right {
    width: 330px;
}

#audio-header .audio-nav-right .search-wrap {
    width: 180px;
    height: 40px;
    background-color: white;
    border: solid 2px rgba(0, 86, 201, 0.2);
    border-radius: 4px;
}

#audio-header .audio-nav-right .search-wrap .icon-search {
    width: 40px;
    height: 100%;
    background-color: yellow;
}

#audio-header .audio-nav-right .search-wrap input {
    width: calc(100% - 40px);
    height: 100%;

    padding: 8px 15px;
    font-size: 14px;

    outline: none;
    border: none;
}

#audio-header .audio-nav-right .search-wrap input:focus {
    outline: none;
}

#audio-header .audio-nav-right .profile-wrap {
}

#audio-header .audio-nav-right .profile-wrap .profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

#audio-header .audio-nav-right .profile-wrap .btn-login {
    font-size: 15px;
    padding-left: 8px;
}

어려운점

• position을 활용한 공간 만들기

• padding 값을 활용한 것들

• 강의 볼륨

해결방법

• position 과 padding 태그에 대해 다시 복습

• 앞의 강의 복습

학습소감

• 카피캣 수업을 하면서 손으로 익혔던 것을 되집어보면서 동작하는 방법에 대해 좀더 이해할 수 있었음 익숙한 페이지들 이지만 같으면서 동시에 다른 부분을 세팅해나가는 것이 신기함. 선택자와 CSS의 꾸밈을 통해 같으면서도 충분히 다른 느낌을 줄 수 있어 신기함. 영상 강의 볼륨은 정말 너무 힘듦. 아직도 부족하므로 계속 복습해야 한다고 생각함.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>네이버</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body id="game-body">

    <header id="esport-header">
        <nav id="esport-nav">
            <div class="esport-container">

                <div class="nav-wrap esport-flex-between">

                    <div class="left esport-flex-start">
                        <h1><a href="#">e스포츠</a></h1>
                        <ul class="esport-flex-start">
                            <li><a href="#">GAME</a></li>
                            <li><a href="#">PC게임</a></li>
                        </ul>
                    </div>

                    <div class="center">
                        <ul class="esport-flex-center">
                            <li><a href="#" class="active">홈</a></li>
                            <li><a href="#">뉴스</a></li>
                            <li><a href="#">영상</a></li>
                            <li><a href="#">일정</a></li>
                            <li><a href="#">순위</a></li>
                        </ul>
                    </div>

                    <div class="right esport-flex-end">
                        <a href="#">로그인</a>
                        <a href="#">메뉴</a>
                    </div>

                </div>

            </div>
        </nav>
    </header>

    <main id="esport-main" role="main">

        <div id="esport-main-top">
            <div class="esport-container">

                <div class="timeline-wrap">

                    <ul class="esport-flex-start">
                        <li>
                            <a href="#">
                                <span class="date">오늘 (06.05)</span>
                                <h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

                                <div class="status-wrap esport-flex-between">
                                    <span class="live">LIVE</span>
                                    <span class="status">진행중</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="date">오늘 (06.05)</span>
                                <h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

                                <div class="status-wrap esport-flex-between">
                                    <span class="live">LIVE</span>
                                    <span class="status">진행중</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="date">오늘 (06.05)</span>
                                <h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

                                <div class="status-wrap esport-flex-between">
                                    <span class="live">LIVE</span>
                                    <span class="status">진행중</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="date">오늘 (06.05)</span>
                                <h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

                                <div class="status-wrap esport-flex-between">
                                    <span class="live">LIVE</span>
                                    <span class="status">진행중</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="date">오늘 (06.05)</span>
                                <h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

                                <div class="status-wrap esport-flex-between">
                                    <span class="live">LIVE</span>
                                    <span class="status">진행중</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="date">오늘 (06.05)</span>
                                <h2>2021 LCK AS 챔피언십 풀리그 3일차</h2>

                                <div class="status-wrap esport-flex-between">
                                    <span class="live">LIVE</span>
                                    <span class="status">진행중</span>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>

                <div class="live-wrap">
                    <h2>라이브중인 경기 <span class="count">2</span></h2>
                    <ul class="esport-flex-between">
                        <li>
                            <a href="#" class="esport-flex-between">
                                <img src="https://via.placeholder.com/442x250">
                                <div class="txt-wrap">
                                    <span>진행중</span>
                                    <h3>2021 PMPS S1 WEEKLY FINAL DAY 3</h3>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="esport-flex-between">
                                <img src="https://via.placeholder.com/442x250">
                                <div class="txt-wrap">
                                    <span>진행중</span>
                                    <h3>2021 PMPS S1 WEEKLY FINAL DAY 3</h3>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>        
            </div>                
        </div>

        <div class="esport-container">

            <div class="content-wrap">
                <div class="left">

                    <div id="esport-main-article">

                    </div>

                        <div class="article one full">
                            <img src="https://via.placeholder.com/150">
                            <div class="txt-wrap">
                                <h3>Title</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </p>
                                <span class="source">포모스</span>
                            </div>
                        </div>

                        <div class="article">
                            <img src="https://via.placeholder.com/150">
                            <div class="txt-wrap">
                                <h3>Title</h3>
                                <span class="source">포모스</span>
                            </div>
                        </div>

                        <div class="article">
                            <img src="https://via.placeholder.com/150">
                            <div class="txt-wrap">
                                <h3>Title</h3>
                                <span class="source">포모스</span>
                            </div>
                        </div>

                        <div class="article two half">

                        </div>

                        <div class="article three half">

                        </div>


                <div class="right">


                    <div id="esports_news_view">
                        <h2>많이 본 뉴스</h2>
                        <ol>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="esport-flex-between">
                                    <div class="image_wrap">
                                        <img src="https://via.placeholder.com/84x48">
                                        <span class="rank">1</span>
                                    </div>

                                    <h3>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 </h3>
                                </a>
                            </li>
                        </ol>
                    </div>

                    <div id="esports_schedule">
                        <h2>e스포츠 경기 일정/결과</h2>

                        <div class="schedule_wrap">

                            <div class="schedule_header esport-flex-between">
                                <button type="button" class="arrow arrow_left"></button>
                                <span>08.12 목</span>
                                <button type="button" class="arrow arrow_right"></button>        
                            </div>


                            <div class="schedule_body">
                                <ul>
                                    <li>
                                        <h3>2021 LCK 챔피언십 풀리그 3일차</h3>
                                        <div class="status_wrap esport-flex-center">
                                            <span class="status">진행중</span>
                                            <span class="time">10:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <h3>2021 LCK 챔피언십 풀리그 3일차</h3>
                                        <div class="status_wrap esport-flex-center">
                                            <span class="status">진행중</span>
                                            <span class="time">10:00</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>


                </div>

    </main>

</body>
</html>

CSS

#esports_news_view {
    padding: 20px;
    border: solid 1px grey;
    border-radius: 10px;

    margin-bottom: 30px;
}

#esports_news_view h2 {
    font-size: 18px;
}

#esports_news_view ol {
    margin-top: 20px;
}

#esports_news_view li {
    margin-bottom: 8px;
}
#esports_news_view li:last-child {
    margin-bottom: 0;
}


#esports_news_view li a {
}

#esports_news_view li a .image_wrap {
    position: relative;
    overflow: hidden;
    width: 84px;
    height: 48px;
    border: solid 1px rgba(0, 0, 0, .04);
    border-radius: 4px;
}

#esports_news_view .image_wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#esports_news_view .image_wrap .rank {
    position: absolute;

    padding: 4px 10px;
    border-bottom-right-radius: 4px;

    top: 0;
    left: 0;

    background-color: #4e41db;
    font-size: 13px;
    color: #fff;
    font-weight: 800;

}

#esports_news_view h3 {
    display: -webkit-box;

    overflow: hidden;

    width: 218px;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    font-size: 14px;
    line-height: 19px;
}


#esports_schedule {}

#esports_schedule h2 {
    font-size: 18px;
}

#esports_schedule .schedule_wrap {
    margin-top: 15px;
    border: solid 1px grey;
    border-radius: 4px;
}

#esports_schedule .schedule_wrap .schedule_header{
    padding: 14px 15px;
    border-bottom: solid 1px grey;
}

#esports_schedule .schedule_wrap .schedule_header .arrow{
    width: 20px;
    height: 20px;
}

#esports_schedule .schedule_wrap .schedule_header .arrow.arrow_left{
    background-color: yellow;
}

#esports_schedule .schedule_wrap .schedule_header .arrow.arrow_right {
    background-color: greenyellow;
}

#esports_schedule .schedule_wrap .schedule_header span{
    position: relative;
    font-size: 18px;
    font-weight: 800;

    top: 3px;
}

#esports_schedule .schedule_wrap .schedule_body {
    padding: 17px 0;
}

#esports_schedule .schedule_wrap .schedule_body ul {
}

#esports_schedule .schedule_wrap .schedule_body ul li {
    /*padding: 17px 0;*/
}

#esports_schedule .schedule_wrap .schedule_body ul li:first-child:after{
    display: block;

    content: "";
    width: calc(100% - 40px);
    height: 1px;
    background-color: rgba(0, 0, 0, .05);

    margin: 17px auto;
}

#esports_schedule .schedule_wrap .schedule_body li h3 {
    font-size: 14px;
    margin-bottom: 12px;
    text-align: center;
}

#esports_schedule .schedule_wrap .schedule_body li .status_wrap{

}

#esports_schedule .schedule_wrap .schedule_body li .status_wrap:hover{
    background-color: yellow;
    cursor: pointer;
}

#esports_schedule .schedule_wrap .schedule_body .status_wrap .status {
    background-color: rgba(225, 0, 0, .1);
    color: red;
    font-weight: 500;
    font-size: 11px;
    border-radius: 3px;

    margin-right: 4.5px;
    padding: 2px 4px;
}

#esports_schedule .schedule_wrap .schedule_body .status_wrap .time {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    top: 1px;

}

어려운점

• padding 값과 span 과 같은 태그와 class 상속 개념에 대해서 여전히 생각이 잘 안나서 문제

해결방법

• 복습과 함께 다시 해봄 그리고 HTML을 따로 분해해서 보려고 함

학습소감

• 큰 구조에 대해서는 이해가 되는데 여전히 디테일한 부분과 디자인과의 연계에 대해서 이해가 잘 안됨 날을 잡고 한 번 더 봐야할 것 같으나, 시간이 너무 오래 걸려서 문제. 학습 방법에 대해 다시 한 번 생각해봐야 할 것 같음.