8월 30일 Velog

학습한 내용

Youtube 실습 #3

https://www.youtube.com/

2. Youtube Left Nav

구조

[html]

		<nav id="youtube_left_nav">
			<div id="youtube_left_content">

				<div class="nav_section section_1"></div>
				<div class="nav_section section_2"></div>
                                <div class="nav_section section_3"></div>
                                <div class="nav_section section_4"></div>
                                <div class="nav_section section_5"></div>
                                <div class="nav_section section_6"></div>
                                <div class="nav_section section_7"></div>            
				<footer id="youtube_footer"></footer>	
				
			</div>
		</nav>

[css]

#youtube_left_nav {
	position: fixed;

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

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

	/*overflow-y: auto;*/
	overflow-y: overlay;
	overflow-x: hidden;
}

#youtube_left_nav #youtube_left_content {
	position: absolute;
	
	height: 100%;

	left: 0;
	right: 24px;
}

nav section 기본값

[css]

#youtube_left_nav #youtube_left_content .nav_section {
	padding: 8px 0;

	border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.nav_section .nav_title_wrap h2 {
	font-size: 14px;
	font-weight: 500;
	color: #aaaaaa;

	padding: 8px 0;
	padding-left: 24px;
}

.nav_section ul li a {
	height: 40px;

	padding-left: 24px;
}

.nav_section ul li a:hover {
	background-color: #383838;
}

.nav_section ul li a .icon {
	display: inline-block;

	width: 24px;
	height: 24px;
	background-color: #d2d2d2;
	border-radius: 50%;

	margin-right: 24px;
}


.nav_section ul li a span {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
}

.nav_section ul li.active a {
	background-color: #383838;
}

.nav_section ul li.active a .icon {
	background-color: #ffffff;
}

.nav_section .txt_wrap {
	padding: 8px 8px 8px 32px;
}

.nav_section .txt_wrap p {
	font-size: 14px;
	font-weight: 400;
	color: #fff;

	margin-bottom: 12px;
}

.nav_section .txt_wrap .btn_login {
	display: inline-block;

	border: solid 1px #3ea6ff;
	border-radius: 2px;

	padding: 8px 12px;

	font-size: 14PX;
	color: #3ea6ff;
}

(1) nav section 1

[html]

				<div class="nav_section section_1">
					<ul class="nav_body">
						<li class="active">
							<a href="#" class="flex_start">
								<i class="icon icon_1"></i>
								<span>홈</span>
							</a>
						</li>
						<li>
							<a href="#" class="flex_start">
								<i class="icon icon_2"></i>
								<span>탐색</span>
							</a>
						</li>
						<li>
							<a href="#" class="flex_start">
								<i class="icon icon_3"></i>
								<span>구독</span>
							</a>
						</li>
					</ul>
				</div>

[css]

#youtube_left_nav #youtube_left_content .nav_section.section_1 {
	padding: 12px 0;
}

(2) nav section 3

[html]

				<div class="nav_section section_3">
					<div class="txt_wrap">
						<p>로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수 있습니다.</p>
						<a href="#" class="btn_login">로그인</a>
					</div>
				</div>

(3) nav section 6

[html]

				<div class="nav_section section_6">
					<div class="nav_title_wrap">
						<h2><strong>YOUTUBE</strong> 더보기</h2>
					</div>

					<ul class="nav_body">
						<li>
							<a href="#" class="flex_start">
								<i class="icon icon_1"></i>
								<span>Youtube Premium</span>
							</a>
						</li>
						<li>
							<a href="#" class="flex_start">
								<i class="icon icon_2"></i>
								<span>실시간</span>
							</a>
						</li>									
					</ul>
				</div>

(4) footer

[html]

				<footer id="youtube_footer">
					<ul class="flex_start">
						<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>
						<li><a href="#">광고</a></li>
						<li><a href="#">개발자</a></li>
					</ul>

					<ul class="flex_start">
						<li><a href="#">약관</a></li>
						<li><a href="#">개인정보처리방침</a></li>
						<li><a href="#">정책 및 안전</a></li>
						<li><a href="#">Youtube 작동의 원리</a></li>
						<li><a href="#">새로운 기능 테스트하기</a></li>
					</ul>

					<div class="footer_info">
						<p>© 2021 Google LLC</p>
						<p>CEO: 선다 피차이</p>
						<p>주소: 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.</p>
						<p>전화: 080-822-1450(무료)</p>
					</div>
				</footer>

[css]

#youtube_left_nav #youtube_left_content #youtube_footer {
	padding: 16px 0;
	padding-left: 24px;
}

#youtube_footer ul {
	margin-bottom: 12px;
}

#youtube_footer ul li {
	font-size: 0;
	/*li 태그에 생긴 공백을 없애는 설정*/
}

#youtube_footer ul li a {
	display: inline-block;

	margin-right: 8px;

	font-size: 13px;
	font-weight: 500;
	color: #aaaaaa;
}

#youtube_footer .footer_info {
	padding-top: 4px;
}

#youtube_footer .footer_info p {
	font-size: 12px;
	font-weight: 400;
	color: #717171;

	line-height: 18px;
}

3. Main

[html]

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

			<div class="main_category"></div>
			
			<div id="youtube_main_content"></div>
		</main>

[css]

#youtube_main {
	position: absolute;

	background-color: #181818;

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

3-1. Main Category

[html]

			<div class="main_category">
				<ul class="flex_center">
					<li class="active"><button type="button">전체</button></li>
					<li><button type="button">음악</button></li>
					<li><button type="button">실시간</button></li>
					<li><button type="button">관광</button></li>
					<li><button type="button">요리 프로그램</button></li>
					<li><button type="button">축구</button></li>
					<li><button type="button">액션 어드벤처 게임</button></li>
					<li><button type="button">반려동물</button></li>
					<li><button type="button">최근에 업로드된 동영상</button></li>
				</ul>
			</div>

[css]

#youtube_main .main_category {
	width: 100%;
	height: 58px;
	background-color:  #202020;
	border-top: solid 1px rgba(255, 255, 255, 0.1);
	border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

#youtube_main .main_category ul li button {
	/*display: inline-block;*/
	
	padding: 0 12px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.1);
	border: solid 1px rgba(255, 255, 255, 0.1);;
	border-radius: 16px;

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

	margin: 12px;
	margin-left: 0;
}

#youtube_main .main_category ul li button:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.2);
}

#youtube_main .main_category ul li.active button {
	background-color: #ffffff;
	color: #000000;
}

#youtube_main .main_category ul li.active button:hover {
	background-color: #ffffff;
}

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: 24px;
	padding: 0 24px;

}

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

	align-items: 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;
}

추가로 학습한 내용

word-break
: 텍스트들을 줄을 바꾸면서 표시해야 할때 텍스트를 어떤식으로 줄바꿈 해줄지 정하는 속성

break-all : 문자 단위로 줄바꿈 - 문자 단위로 줄바꿈을 해주는 속성 문자를 강제로 줄바꿈을 해준다.
keep-all : 단어 단위로 줄바꿈 - 단어 단위로 줄바꿈을 해준는 속성 단어단위로 강제로 줄바꿈을 해준다.

Author And Source

이 문제에 관하여(8월 30일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/830Velog

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

8월 30일 Velog

Youtube 실습 #3

2. Youtube Left Nav

구조

nav section 기본값

(1) nav section 1

(2) nav section 3

(3) nav section 6

(4) footer

3. Main

3-1. Main Category

3-2. Youtube Main Content

Author And Source

좋은 웹페이지 즐겨찾기