2021.08.30유튜브3

dogyeomyeo4444·2021년 8월 30일
대구AI스쿨

오늘의 강의 내용

* 왼쪽 컨텐츠 영역, 메인 컨텐츠 영역 카피캣


카피캣 영역인 유튜브 왼쪽 컨텐츠, 메인 컨텐츠


유튜브 왼쪽 컨텐츠, 메인 컨텐츠 카피캣 완료된 모습

<!-- index.html언어 -->
<nav id="youtube_left_nav">
			<div id="youtube_left_content">
				
				<div class="nav_section">
					
					<div class="nav_body">
						<ul>
							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_1"></i>
									<span>홈</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_2"></i>
									<span>탐색</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_3"></i>
									<span>구독</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="nav_section">
					
					<div class="nav_body">
						<ul>
							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_4"></i>
									<span>보관함</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_5"></i>
									<span>시청 기록</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

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

				<div class="nav_section">
					
					<div class="nav_title_wrap">
						<h2>인기 YOUTUBE</h2>
					</div>
					<div class="nav_body">
						<ul>
							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_6"></i>
									<span>음악</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_7"></i>
									<span>스포츠</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_8"></i>
									<span>게임</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_9"></i>
									<span>영화</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_10"></i>
									<span>뉴스</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_11"></i>
									<span>실시간</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_12"></i>
									<span>학습</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_13"></i>
									<span>360° 동영상</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="nav_section">
					
					<div class="nav_body">
						<ul>
							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_4"></i>
									<span>채널 탐색</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="nav_section">
					
					<div class="nav_title_wrap">
						<h2>YOUTUBE 더보기</h2>
					</div>
					<div class="nav_body">
						<ul>
							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_6"></i>
									<span>You Tube Premium</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_7"></i>
									<span>실시간</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="nav_section">
					
					<div class="nav_body">
						<ul>
							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_4"></i>
									<span>설정</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_4"></i>
									<span>신고기록</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_4"></i>
									<span>고객센터</span>
								</a>
							</li>

							<li>
								<a href="#" class="flex_align_start">
									<i class="icon icon_4"></i>
									<span>의견 보내기</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<footer class="youtube_footer">
					<div class="txt_wrap">
						<a href="#">정보</a>
						<a href="#">보도자료</a>
						<a href="#">저작권</a>
						<a href="#">문의하기</a>
						<a href="#">크리에이터</a>
						<a href="#">광고</a>
						<a href="#">개발자</a>
					</div>
					<div class="txt_wrap">
						<a href="#">약관</a>
						<a href="#">개인정보처리방침</a>
						<a href="#">정책 및 안전</a>
						<a href="#">Youtube 자동의 원리</a>
						<a href="#">새로운 기능 테스트하기</a>
					</div>
					<div class="txt_wrap">
						<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>
					</div>
				</footer>

			</div>
		</nav>


		<main role="main" id="youtube_main">
			
			<div id="youtube_main_content">
				<ul class="flex_align_between">
					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

					</li>

					<li>
						<div class="video_thumbnail">
							<a href="#">
								<img src="https://via.placeholder.com/1024x640">
								<span class="time">00:20</span>
							</a>
						</div>

						<div class="video_txt_wrap flex_align_start">
							<a href="#" class="image_link">
								<img class="profile" src="https://via.placeholder.com/36">
							</a>

							<div class="txt">
								<h3>
									<a href="#" class="title_link">
										[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
									</a>
								</h3>

								<p><a href="#" class="channel_link">MBC 엔터테이먼</a></p>

								<div class="txt_bottom">
									<span class="count">조회수 71만회</span>
									<span class="date">6개월 전</span>
								</div>
							</div>
						</div>

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

		</main>
        
<!-- style.css언어 -->
/* 왼쪽 사이드 메뉴 */
#youtube_left_content {
	position: absolute;
	width: 225px;
	height: 100%;
}



#youtube_left_content .nav_section {
	padding: 8px 0; 
	border-bottom: solid 1px rgba(255, 255, 255, 0.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 {

}

#youtube_left_content .nav_section .nav_body ul {
	
}

#youtube_left_content .nav_section .nav_body li {
	
}

#youtube_left_content .nav_section .nav_body li a {
	height: 40px;
	padding: 0 24px;
}

#youtube_left_content .nav_section .nav_body li .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	margin-right: 24px;
}

#youtube_left_content .nav_section .nav_body li span {
	font-size: 13px;
	color: #ffffff;
}

#youtube_left_content .nav_section .nav_body .txt_wrap {
	padding: 0 24px;
}

#youtube_left_content .nav_section .nav_body .txt_wrap p {
	color: #ffffff;
	font-weight: 400;
	font-size: 13px;
}

#youtube_left_content .nav_section .nav_body .txt_wrap .btn_login {
	display: inline-block;

	border: solid 1px #3ea6ff;
	padding: 10px 12px 8px;
	font-size: 14px;
	color: #3ea6ff;

	margin-top: 12px;
}

#youtube_left_content .youtube_footer {
	padding-bottom: 150px;
}

#youtube_left_content .youtube_footer .txt_wrap {
	padding: 12px 24px 0;
}

#youtube_left_content .youtube_footer .txt_wrap a {
	margin-right: 8px;

	color: #aaaaaa;
	font-size: 12px;
	font-weight: 500;

	word-break: keep-all;
}

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


/* 유튜브 메인 */
#youtube_main {
	position: absolute;
	left: 240px;
	top: 56px;
	right: 0;
	bottom: 0;
	background-color: #212121;
}

#youtube_main_content {
	width: 100%;
	height: 100%;
	padding: 24px;
}

#youtube_main_content ul {
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	height: 100%;
}

#youtube_main_content ul li {
	width: 24%;
	background-color: #212121;
	margin-bottom: 40px;
}

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

#youtube_main_content ul li .video_thumbnail a {
	position: relative;
	display: block;	
	width: 100%;
}

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

#youtube_main_content ul li .video_thumbnail .time {
	position: absolute;

	background-color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	color: #ffffff;

	padding: 3px 4px;

	bottom: 4px;
	right: 4px;
}

#youtube_main_content ul li .video_txt_wrap {
	align-items: flex-start;
	margin-top: 12px;
}

#youtube_main_content ul li .video_txt_wrap .image_link {
	display: block;
	width: 36px;
	height: 36px;

	margin-right: 12px;
}

#youtube_main_content ul li .video_txt_wrap .image_link img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

#youtube_main_content ul li .video_txt_wrap .txt {
	width: calc(100% - 48px);
}

#youtube_main_content ul li .video_txt_wrap .txt h3 {
	font-size: 15px;
	margin-bottom: 6px;
}

#youtube_main_content ul li .video_txt_wrap .txt h3 .title_link {
	color: #ffffff;
}

#youtube_main_content ul li .video_txt_wrap .txt p {
	font-size: 12px;
}

#youtube_main_content ul li .video_txt_wrap .txt p .channel_link {
	color: #aaaaaa;
}

#youtube_main_content ul li .video_txt_wrap .txt_bottom {
	
}

#youtube_main_content ul li .video_txt_wrap .txt_bottom .count,
#youtube_main_content ul li .video_txt_wrap .txt_bottom .date {
	font-size: 12px;
	color: #aaaaaa;
}

  • word-break :텍스트의 줄바꿈의 영향을 주는 css속성

  • word-break: keep-all 단어를 기준으로 줄바꿈

강의가 끝난후 소감

해외 사이트라 소스코드 방식이 국내 사이트랑은 다른점이 있어 다양한 방법을 익히는데 유용했다.

힘든점, 문제점

딱히 이번강의에서 힘든점은 없었다.

개선방안

다른 방식을 익히기에 연습량을 늘려야겠다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.08.27유튜브2

다음 포스트

2021.08.31유튜브4

0개의 댓글