□ 유튜브 1/3

★ 작성코드

Git 링크.유튜브 카피캣

1. 유튜브 전체 구역 설정

● 유튜브 왼쪽 메뉴 영역 공간 만들기

• 유튜브 왼쪽 메뉴 영역에서 스크롤바가 content 영역을 침범하지 않게 하기위해 구역을 하나 더 추가함
• 왼쪽 메뉴 전체 영역의 width 값(240px)에서 스크롤바 생성 크기를 제외한 값을 content 영역의 width 값(225px)으로 설정함

예시)

[html]
<nav id="youtube-left-nav">
     <div id="youtube-left-content">
              
     </div>
</nav>

[CSS]
#youtube-left-nav {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;

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

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

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

2. 유튜브 상단 영역

● 결과 스크린샷

□ 어려웠던 점

특별히 어려웠던 내용은 없었습니다.

□ 해결방법

강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.

□ 학습 소감

실생활에서 가장 많이 보는 사이트 중 하나인 유튜브 사이트의 구조에 대해 이해할 수 있었습니다.