📌 학습한 내용

유튜브 실습

전체 코드 : 💾

상단 영역

상세 작업 전 큰 틀 작업을 우선적으로 함
브라우저 확대시, 레이아웃이 틀어지는 것을 방지하기 위해 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;로 수정해보려 했지만 자바스크립트 기능과 연동된 부분이 있어 가운데 정렬작업이 제대로 되지 않았다. 이번에는 레이아웃을 중점적으로 하자는 마음으로 아쉽지만 접어 두었다. 🤔

Author And Source

이 문제에 관하여(210819 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiyoon_jeong2005/210819-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

210819 개발일지