8月30日Velog

60609 ワード

大邱AI学校テキストリンク

学習の内容

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:単語単位で改行-単語単位で改行する属性単語単位で改行を強制します.

Reference

この問題について(8月30日Velog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/830Velog

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

TIL-wecode 24日目

[BOJ/C+]13398回連続2