📌 학습한 내용
유튜브 실습
전체 코드 : 💾
상단 영역
- 상세 작업 전 큰 틀 작업을 우선적으로 함
- 브라우저 확대시, 레이아웃이 틀어지는 것을 방지하기 위해
min-width: 1380px;적용
#youtube-top-nav {
position: fixed;
width: 100%;
min-width: 1380px;
height: 56px;
background-color: #212121;
padding: 0 16px;
z-index: 999999;
}
#youtube-left-nav {
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
bottom: 0;
left: 0;
}
#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
}
#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
}왼쪽 영역
- 왼쪽 스크롤을 생성할 것을 전제로 작업.
#youtube-left-nav를 스크롤을 포함한 넓이로 잡고, 그 안쪽으로#youtube-left-content영역을 잡아주어 스크롤의 영향을 받지 않게 한다.
#youtube-left-nav {
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
bottom: 0;
left: 0;
}
#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
}-
overflow-y: scroll;: 항상 스크롤을 보이게 함
overflow-y: auto;: 컨텐츠가 영역을 넘어 갔을 때, 스크롤을 생성 -
<footer>영역을 제외하고는 전부<nav-section>으로 묶어 작업
/* 디폴트 값 */
#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 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 .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;
}word-break: keep-all;: 단어를 기준으로 줄바꿈을 함 (단어가 잘리지 않도록)
컨텐츠 영역
태그 영역
tag-wrap영역도 상단 영역과 동일하게min-width값을 주고, 브라우저 확대시 레이아웃 틀어짐을 방지
#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);
z-index: 2000;
}👉 width: 100%; 속성값을 지정할 때는 min-width 속성이 필요한지 확인 필요
배너 영역
- 메인 영역 안에서 배너 영역을 잡아주고, 안쪽으로
banner-container를 잡아 각 요소의 배치작업을 해준 뒤,margin: 0 auto;로 중앙정렬 해주었다.
#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;
}- 닫기 버튼은
banner-container바깥쪽으로 빼, 브라우저 비율 축소 시, 컨테이너 영역과는 다르게 전체 배너를 기준으로 오른쪽에 위치시켰다.
영상 영역
-
<a>안에<a>사용할 수 없음 -
일정 부분부터 배경 컬러가 비는 원인
->background-color: #000000;이 적용된 부분은#youtube-main영역이다. 반면 스크롤은 브라우저 기준으로 생성되었기 때문에 아래 빈 부분은<body>영역이 보이게 된 것이다. 따라서<body>영역에도background-color: #000000;을 적용해주어야 한다.
📌 학습내용 중 어려웠던 점
-
컨텐츠 부분 위쪽에
.tag-wrap을 추가해 줬는데,flex-align-between을 적용했더니 태그들 간의 간격이 원본 페이지 보다 더 컸다.
-
.tag-wrap의<li>에:hover가상 선택자를 넣어 색상 변화를 자연스럽게 하려 했다.2-2. 첫 번째
<li>인 'All'에는 마우스 오버시 아무 변화가 일어나지 않도록 하려 했다.
📌 해결방법
-
.tag-wrap의<ul>에justify-content: center;속성값을 적용했다.
-
원래 존재하는
<li>요소에transition을 추가,easy-out속성값 사용 (참고 사이트: https://skydoor2019.tistory.com/6)
#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:hover {
background-color: rgba(136, 136, 136, .6);
}2-2. 방법은 두 가지로 hover 시키고 싶지 않은 영역을 따로 빼 다른 영역으로 작업, 또는 해당 영역에 hover시 본래의 속성들을 그대로 적용하는 방법이 이다. 첫 번째 방법은 코드 수정이 조금 복잡해질 것 같고, 시간이 더 소요될 것 같아 두 번째 방법으로 적용했다.
📌 학습소감
강의에서는 왼쪽 영역의 아이콘들을 모두 흰색으로 넣어주는 것으로 대체했지만, 좀 더 실제와 비슷하게 작업하고 싶어 아이콘 이미지를 하나씩 찾았다. 비슷한 이미지를 찾지 못해 고생한게 더 힘들었던 것 같다. (무료 아이콘 : https://icons8.com/) 또한 강의 내용에는 다루지 않았던 위쪽의 태그와 배너 영역도 만들어 주었다. 태그 영역이 상단, 왼쪽 영역과 같이 고정되어 있다는 것을 작업이 모두 끝난 후 알아서 position: fixed;로 수정해보려 했지만 자바스크립트 기능과 연동된 부분이 있어 가운데 정렬작업이 제대로 되지 않았다. 이번에는 레이아웃을 중점적으로 하자는 마음으로 아쉽지만 접어 두었다. 🤔
