[대구AI스쿨] 21.08.26 개발일지
□ 유튜브 1/3
★ 작성코드
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. 유튜브 상단 영역
● 결과 스크린샷
□ 어려웠던 점
특별히 어려웠던 내용은 없었습니다.
□ 해결방법
강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.
□ 학습 소감
실생활에서 가장 많이 보는 사이트 중 하나인 유튜브 사이트의 구조에 대해 이해할 수 있었습니다.
Author And Source
이 문제에 관하여([대구AI스쿨] 21.08.26 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rim_chaeeop/대구AI스쿨-21.08.26-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)