8월 31일 Velog

류영서·2021년 8월 31일
대구AI스쿨
0

학습한 내용

Youtube 실습 #4

https://www.youtube.com/

3-2. Youtube Main Content

[html]

			<div id="youtube_main_content">
				<ul class="flex_between">
					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">15:31</span>
							</a>
						</div>

						<div class="video_info flex_between">
							<a href="#" class="profile"><img src="https://via.placeholder.com/36"></a>
							<div class="txt_wrap">

								<h3><a href="#">[무도] 자식 이름 지어주다 싸움 나게 생겼어요👊 오늘도 유 부장 속 터지는 무한상사 ‘무한상사 : 정리해고' 1편 MBC130427방송</a></h3>

								<p class="channel"><a href="">용두의마블</a></p>

								<div class="txt_bottom">
									<a href="#">
										<span class="count">조회수 60만회</span>
										<span class="date">4일전</span>
									</a>
								</div>

							</div>
						</div>
					</li>
				</ul>
			</div>

[css]

#youtube_main #youtube_main_content {
	width: 100%;

	margin-top: 72px;
	padding: 0 24px;

}

#youtube_main #youtube_main_content ul {
	width: 100%;
	height: 100%;

	align-items: flex-start;
	align-content: flex-start;
}

#youtube_main #youtube_main_content ul li {
	width: 24%;

	margin-bottom: 40px;

}

#youtube_main #youtube_main_content ul li .video_thumbnail {
	width: 100%;

	margin-bottom: 12px;
}

#youtube_main #youtube_main_content .video_thumbnail a {
	display: block;
	position: relative;

	width: 100%;
}

#youtube_main #youtube_main_content .video_thumbnail a img {
	width: 100%;
}

#youtube_main #youtube_main_content .video_thumbnail a .time {
	position: absolute;
	/*img에는 position 지정하면 안됨*/

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

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

	right: 4px;
	bottom: 4px;
}

#youtube_main #youtube_main_content ul li .video_info {
	align-items: stretch;
}

#youtube_main #youtube_main_content .video_info .profile {
	display: block;

	width: 36px;
	height: 36px;

	margin-right: 12px;
}

#youtube_main #youtube_main_content .video_info .profile img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

#youtube_main #youtube_main_content .video_info .txt_wrap {
	width: calc(100% - 48px);
}

#youtube_main #youtube_main_content .video_info .txt_wrap h3 a {
	display: block;

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

  	overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	-webkit-line-clamp: 2;
  	-webkit-box-orient: vertical;

	margin-bottom: 6px;
}

#youtube_main #youtube_main_content .video_info .txt_wrap .channel a {
	font-size: 14px;
	color: #aaaaaa;
}

#youtube_main #youtube_main_content .video_info .txt_wrap .txt_bottom {
	font-size: 14px;
}

#youtube_main #youtube_main_content .video_info .txt_wrap .txt_bottom a .count {
	color: #aaaaaa;
}

#youtube_main #youtube_main_content .video_info .txt_wrap .txt_bottom a .count:after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #aaaaaa;
	border-radius: 50%;

	vertical-align: 5px;
	margin: 0 2px 0 6px;
}


#youtube_main #youtube_main_content .video_info .txt_wrap .txt_bottom a .date {
	color: #aaaaaa;
}

수정

1. center nav에 nowrap 적용

리사이즈 했을 때 레이어가 틀어지는 것을 보안하기 위함

[html]

			<div class="nav_center flex_start">
				<div class="search_wrap flex_between">
					<input type="text" placeholder="검색">
					<button class="btn_search" type="button"></button>
				</div>
				<button class="btn_voice" type="button"></button>
			</div>

[css]

#youtube_top_nav .nav_center {
	position: absolute;

	flex-wrap: nowrap;

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

내가 디폴트로 만들어놓은 flex는 flex-wrap: wrap;을 가지고 있기 때문에 flex-wrap: nowrap;를 캐스캐이딩하여 자동 줄바꿈을 보완한다.

2. align-content:flex-start;

줄바꿈이 일어나는 경우 각 li 태그에 지정한 margin-bottom 값을 그대로 사용하고자 할 때 적용한다. 브라우저상에서는 큰 변화를 느낄 수 없어 flexbox help를 참고함.

[html]

			<div id="youtube_main_content">
				<ul class="flex_between"></ul>
			</div>

[css]

#youtube_main #youtube_main_content ul {
	width: 100%;
	height: 100%;

	align-items: flex-start;
	align-content: flex-start;
}
  • align-content: flex-start; 적용 전
  • align-content: flex-start; 적용 후

3. body 태그에 디폴트로 배경색상 적용

main에 적용한 배경색은 브라우저 기준으로만 적용되기 때문에 스크롤을 내리면 배경색상이 적용되지 않음. body 태그에 미리 배경색상 넣어둔다.

[css]

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

	background-color: #181818;
}

4. category에 fixed 적용, main content에 margin값 변경

category도 top nav와 마찬가지로 고정되어 있는 영역이다.

category에 fixed를 적용하면 형제 태그인 main content가 뒤로 겹치므로 margin 값으로 원래 주고자하는 값(24px) + category의 높이값(58px)을 합해서 적용한다.

[css]

#youtube_main #youtube_main_content {
	width: 100%;

	margin-top: 72px;
	padding: 0 24px;

}

5. top nav, category에 z-index 적용

하위 영역들에 3차원 position을 부여했기 때문에 제일 위의 레이어에 위치하도록 fixed를 사용하고자 하는 영역에 z-index를 꼭 적용한다.

Youtube Channel 실습

https://www.youtube.com/user/TheChtvn/featured

top nav/left nav는 앞의 youtube 채널과 동일한 코드를 사용한다.

Main의 구조

[html]

		<main role="main" id="youtube_main">

			<div id="youtube_channel_content">
				
				<div id="channel_banner"></div>


				<div id="channel_header"></div>


				<nav id="channel_nav"></nav>


				<div id="channel_content"></div>

			</div>
			
		</main>
  • youtube_channel_content를 따로 만드는 이유 : youtube 홈 화면의 padding 값이 여기에서는 적용되지 않기 때문에 새로운 id로 영역을 만들어 준다.

1. Channel Banner

[html]

<div id="channel_banner"></div>

[css]

#youtube_channel_content #channel_banner {
	width: 100%;
	height: 250px;
	background-color: darkblue;
}

2. Channel Header

[html]

				<div id="channel_header">
					<div class="channel_container">
						
						<div class="channel_profile_wrap flex_between">
							<div class="channel_profile flex_start">
								<img class="channel_thumbnail" src="https://via.placeholder.com/80">
								<div class="txt_wrap">
									<h2>tvN</h2>
									<p>구독자 327만명</p>
								</div>
							</div>

							<button type="button" class="btn_sub">구독</button>
						</div>

					</div>
				</div>

[css]

.channel_container {
	width: 1070px;
	margin: 0 auto;
}


#youtube_channel_content #channel_header {
	margin: 16px 0 4px;
}

#channel_header .channel_profile_wrap .channel_profile img {
	width: 80px;
	height: 80px;
	border-radius: 50%;

	margin-right: 24px;
}

#channel_header .channel_profile_wrap .channel_profile .txt_wrap h2 {
	font-size: 24px;
	font-weight: 400;
	color: #ffffff;
}

#channel_header .channel_profile_wrap .channel_profile .txt_wrap p {
	font-size: 14px;
	font-weight: 400;
	color: #aaaaaa;
}

#channel_header .channel_profile_wrap .btn_sub {
	padding: 10px 20px;
	background-color: #cc0000;
	border-radius: 2px;

	font-size: 14px;
	color: #ffffff;
}

내부 컨텐츠들이 중앙에 쏠려있기 때문에 디폴트로 container를 만들고 시작한다.

3. Channel Nav

[html]

				<nav id="channel_nav">
					<div class="channel_container">
						<ul class="flex_start">
							<li class="active"><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="#">정보</a></li>
						</ul>
					</div>
				</nav>

[css]

#channel_nav ul li a {
	display: block;

	padding: 0 32px;
	height: 47px;
	border-bottom: solid 2px transparent;

	font-size: 14px;
	color: #aaaaaa;	

	line-height: 47px;
}

#channel_nav ul li.active a {
	border-bottom: solid 2px #aaaaaa;

	color: #ffffff;
}

4. Channel Content

[html]

				<div id="channel_content">
					<div class="channel_container">
						
						<div id="channel_recent"></div>

					</div>
				</div>

[css]

#youtube_channel_content #channel_content {
	background-color: #0f0f0f;
}

4-1. Channel Recent

[html]

						<div id="channel_recent" class="flex_start">
							<div class="image_wrap">
								<img src="https://via.placeholder.com/246x138">
								<span class="mark">실시간</span>
							</div>

							<div class="recent_info">
								<h3>맛있는 음식도 먹고🍖 흥미진진한 이야기도 듣고👂 [스트리트 푸드 파이터] 스트리밍</h3>
								<span class="channel">tvN</span>
								<span class="count">3.3천명 시청 중</span>
								<p class="description">음식에는 맛뿐 아니라 흥미로운 이야기도 얽혀있는 법😁
								백종원과 스푸파 끝장나게 즐기고, 노포의 (특별한) 영업비밀도 들으러 와요😉
								[스트리트...</p>
							</div>
						</div>

[css]

#channel_content #channel_recent {
	align-items: stretch;

	padding: 24px 0;

	border-bottom: solid 1px #252525;
}

#channel_recent .image_wrap {
	position: relative;
	width: 246px;
	height: 138px;
}

#channel_recent .image_wrap img {
	width: 100%;
	height: 100%;
}

#channel_recent .image_wrap .mark {
	position: absolute;

	padding: 3px 4px;
	background-color: red;

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

	right: 4px;
	bottom: 4px;
}

#channel_recent .recent_info {
	width: 600px;

	margin-left: 16px;
}

#channel_recent .recent_info h3 {
	font-size: 18px;
	font-weight: 400;
	color: #ffffff;
}

#channel_recent .recent_info .channel,
#channel_recent .recent_info .count,
#channel_recent .recent_info .description {
	font-size: 12px;
	color: #aaaaaa;
}

#channel_recent .recent_info .channel:after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #aaaaaa;
	border-radius: 50%;

	vertical-align: 3px;

	margin: 0 1px 0 5px;
}


#channel_recent .recent_info .description {
	margin-bottom: 8px;

	padding-top: 8px;
}

profile
류영서
이전 포스트

8월 30일 Velog

다음 포스트

9월 1일 Velog

0개의 댓글

관련 채용 정보