[dg_ai_school] 웹프로그래밍 40

학습내용

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>트위치</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<nav id="top-nav">
		<div class="nav-wrap">
			<div class="nav-left">
				<h1 class="logo">
					<a href="#">
						<img src="https://via.placeholder.com/24x28">
					</a>
				</h1>
				<ul>
					<li><a href="#">탐색</a></li>
					<li><a href="#">e스포츠</a></li>
					<li><a href="#">음악</a></li>
				</ul>
				<div class="more">
					<a href="#">더보기</a>
				</div>
			</div>
			<div class="nav-center">
				<div class="search-wrap">
					<input type="text" placeholder="검색">
					<button class="btn-search"></button>
				</div>
			</div>
			<div class="nav-right">
				<div class="mark-wrap">
					<i class="icon-mark"></i>
					<span class="alarm">43</span>
				</div>
				<a href="#" class="btn-login">로그인</a>
				<a href="#" class="btn-purple">회원가입</a>
				<button class="btn-profile"></button>
			</div>
		</div>	
	</nav>

	<div class="main-container">
		<div class="left-area">
			<div class="channel-wrap">
				<div class="channel-header">
					<h3>추천 채널</h3>
					<i class="icon-arrow"></i>
				</div>
				<div class="channel-body">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
<li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        <li>
							<a href="#">
								<img src="https://via.placeholder.com/30">
								<div class="txt-wrap">
									<h4>풍월량(hanryang1125)</h4>
									<span class="source">Just Chatting</span>
								</div>
								<span class="count">6.7K</span>
							</a>
						</li>
                        </ul>
				</div>
			</div>
			<div class="join-wrap">
				<div class="txt-wrap">
					<h2><span class="font-purple">Twitch</span> 커뮤니티와 함께하세요!</h2>
					<p>어디서나 최고의 생방송을 즐겨보세요.</p>
					<button type="button" class="btn-purple">회원가입</button>
				</div>
			</div>
			<div class="info-wrap">
				<p>상표명: Sed porttitor lectus nibh. </p>
				<p>대표자: Abcde Fghij, KLMN</p>
				<p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</p>
				<p>123-4567-890</p>
				<p>호스팅 제공업체: Quisque velit nisi</p>

				<ul>
					<li><a href="#">지원팀에 문의</a></li>
					<li><a href="#">판매 약관</a></li>
					<li><a href="#">사업자 정보</a></li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div id="content-banner">
				<div class="layer">
					<div class="txt-wrap">
						<h2>Hello</h2>
						<p>Nice to meet you</p>
					</div>
				</div>
			</div>

			<div class="content-container">
				<div class="video-section">
					<div class="title-wrap">
						<h2>취향 저격 생방송 채널</h2>
					</div>

					<div class="video-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">3.6M 시청자</span>
										</div>
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
											<p class="source">LPL</p>
											<p class="game">League of Legends</p>

											<div class="tag-wrap">
												<span class="tag">e-sports</span>
												<span class="tag">english</span>
                                                <span class="tag">MOBA</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">3.6M 시청자</span>
										</div>
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
											<p class="source">LPL</p>
											<p class="game">League of Legends</p>

											<div class="tag-wrap">
												<span class="tag">e-sports</span>
												<span class="tag">english</span>
                                                <span class="tag">MOBA</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub"><img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">3.6M 시청자</span>
										</div>
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
											<p class="source">LPL</p>
											<p class="game">League of Legends</p>

											<div class="tag-wrap">
												<span class="tag">e-sports</span>
												<span class="tag">english</span>
                                                <span class="tag">MOBA</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
										
									</div>
								</a>
							</li>
						</ul>
					</div>

					<button type="button" class="btn-more">더보기</button>
				</div>

				<div class="category-section">
					<div class="title-wrap">
						<h2>취향 저격 <span class="font-purple">카테고리</span></h2>
					</div>

					<div class="category-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/146x195">
									</div>

									<div class="txt-wrap">
										<h3>Just Chatting</h3>
										<p class="count">311k 시청자</p>

										<div class="tag-wrap">
											<span class="tag">IRL</span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/146x195">
									</div>

									<div class="txt-wrap">
										<h3>Just Chatting</h3>
										<p class="count">311k 시청자</p>

										<div class="tag-wrap">
											<span class="tag">IRL</span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/146x195">
									</div>

									<div class="txt-wrap">
										<h3>Just Chatting</h3>
										<p class="count">311k 시청자</p>

										<div class="tag-wrap">
											<span class="tag">IRL</span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/146x195">
									</div>

									<div class="txt-wrap">
										<h3>Just Chatting</h3>
										<p class="count">311k 시청자</p>

										<div class="tag-wrap">
											<span class="tag">IRL</span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/146x195">
									</div>

									<div class="txt-wrap">
										<h3>Just Chatting</h3>
										<p class="count">311k 시청자</p>

										<div class="tag-wrap">
											<span class="tag">IRL</span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/146x195">
									</div>

									<div class="txt-wrap">
										<h3>Just Chatting</h3>
										<p class="count">311k 시청자</p>

										<div class="tag-wrap">
											<span class="tag">IRL</span>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="video-section">
					<div class="title-wrap">
						<h2>추천 <span class="font-purple">Just Chatting</span> 채널</h2>
					</div>

					<div class="video-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">1.1K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>⚡복닝와이드⚡</h3>
											<p class="source">개복어</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
												<span class="tag">첫 번째 플레이 스루</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">1.1K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>⚡복닝와이드⚡</h3>
											<p class="source">개복어</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
												<span class="tag">첫 번째 플레이 스루</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
											<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">1.1K 시청자</span>
										</div>
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>⚡복닝와이드⚡</h3>
											<p class="source">개복어</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
												<span class="tag">첫 번째 플레이 스루</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
						</ul>
					</div>

					<button type="button" class="btn-more">더보기</button>
				</div>

				<div class="video-section">
					<div class="title-wrap">
						<h2>모두의 후원 열차에 탑승해 주세요!</h2>
					</div>

					<div class="video-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">19.9K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>
												LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
											</h3>
											<p class="source">xQcOW</p>
											<p class="game">Hivemind Gameshow</p>

											<div class="tag-wrap">
												<span class="tag">영어</span>
												<span class="tag">일본 만화 영화</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">19.9K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>
												LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
											</h3>
											<p class="source">xQcOW</p>
											<p class="game">Hivemind Gameshow</p>

											<div class="tag-wrap">
												<span class="tag">영어</span>
												<span class="tag">일본 만화 영화</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">19.9K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>
												LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
											</h3>
											<p class="source">xQcOW</p>
											<p class="game">Hivemind Gameshow</p>

											<div class="tag-wrap">
												<span class="tag">영어</span>
												<span class="tag">일본 만화 영화</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
						</ul>
					</div>

					<button type="button" class="btn-more">더보기</button>
				</div>

				<div class="video-section">
					<div class="title-wrap">
						<h2>추천 <span class="font-purple">League of Legends</span> 채널</h2>
					</div>

					<div class="video-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">911명의 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>챌린저달리기 40일의 용사</h3>
											<p class="source">울부짖는마오카이1 (wahahaha830)</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">911명의 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>챌린저달리기 40일의 용사</h3>
											<p class="source">울부짖는마오카이1 (wahahaha830)</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">911명의 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>챌린저달리기 40일의 용사</h3>
											<p class="source">울부짖는마오카이1 (wahahaha830)</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>

						</ul>
					</div>

					<button type="button" class="btn-more">더보기</button>
				</div>

				<div class="video-section">
					<div class="title-wrap">
						<h2>추천 <span class="font-purple">LOST ARK</span> 채널</h2>
					</div>

					<div class="video-wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">1.2K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>넹북이 악세 맞춰주기</h3>
											<p class="source">성대 (dakchyo)</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">1.2K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>넹북이 악세 맞춰주기</h3>
											<p class="source">성대 (dakchyo)</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<div class="image-wrap-sub">
											<img src="https://via.placeholder.com/326x183">
											<span class="mark">생방송</span>
											<span class="count">1.2K 시청자</span>
										</div>	
									</div>

									<div class="video-bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt-wrap">
											<h3>넹북이 악세 맞춰주기</h3>
											<p class="source">성대 (dakchyo)</p>

											<div class="tag-wrap">
												<span class="tag">한국어</span>
											</div>
										</div>
										
									</div>
								</a>
							</li>
						

						</ul>
					</div>

					<button type="button" class="btn-more">더보기</button>
				</div>

				<footer>
					<div class="txt-wrap">
						<p>상표명 : Sed porttitor lectus nibh.</p>
						<p>대표자: Abcde Fghij, KLMN</p>
						<p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
						<p>123-4567-890</p>
						<p>호스팅 제공업체: Quisque velit nisi</p>
					</div>
					<div class="footer-bottom">
						<ul>
							<li><a href="#">지원팀에 문의</a></li>
							<li><a href="#">판매 약관</a></li>
							<li><a href="#">사업자 정보</a></li>
						</ul>
					</div>
				</footer>

			</div>

			
		</div>
	</div>

</body>
</html>

css

/* 컨텐츠 영역 */
.content {
	overflow-y: auto;
	position: absolute;
	top: 50px;
	left: 240px;

	bottom: 0;
	right: 0;
}

.content h1 {
	font-size: 40px;
}

.content #content-banner {
	position: relative;
	width: 100%;
	height: 350px;
	background: url(../img/game.jpg) no-repeat center; 
	background-size: cover;
}

.content #content-banner .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);

	top: 0;
	left: 0;
}

.content #content-banner .layer .txt-wrap {
	position: absolute;
	top: 170px;
	right: 200px;
}

.content .content-container {
	width: 1060px;
	margin: 0 auto;
}

/* 태그 디폴트 */
.content-container .tag-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-top: 5px;
}

.content-container .tag-wrap .tag {
	font-size: 12px;
	font-weight: bold;
	color: #d3d3d3;
	background-color: #ffffff26;
	border-radius: 10px;

	padding: 3px 8px;

	margin-right: 5px;
}

.content-container .tag-wrap .tag:hover {
	background-color: rgb(255, 255, 255, 0.2);
}	

.content-container .tag-wrap .tag:last-child {
	margin-left: 0;
}

.content-container .txt-wrap {

}

.content-container .txt-wrap h3 {
	font-size: 16px;
	color: #dedee3;
	letter-spacing: 1px;
	margin-bottom: 4px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.content-container .txt-wrap h3:hover {
	color: #9147ff;
}

/* 비디오 섹션 */
.video-section {
	position: relative;
	padding-top: 50px;
	padding-bottom: 30px;

	border-bottom: solid 1px #ffffff1a;
}

.video-section .title-wrap {
	padding-bottom: 10px;
}

.video-section .title-wrap h2 {
	font-size: 20px;
}

.video-section .video-wrap {

}

.video-section .video-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.video-section .video-wrap li {
	width: 32%;
	margin-right: auto;
}

.video-section .video-wrap li:last-child {
	margin-right: 0;
}

.video-section .video-wrap a {

}

.video-section .video-wrap .image-wrap {
	position: relative;
	width: 100%;
	height: 183px;
	background-color: #9147ff;
}

.video-section .video-wrap .image-wrap .image-wrap-sub {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover .image-wrap-sub {
	transform: translate(6px, -6px);
}

.video-section .video-wrap .image-wrap img {
	width: 100%;
	height: 100%;
}

.video-section .video-wrap .image-wrap .mark {
	position: absolute;

	top: 10px;
	left: 10px;

	border-radius: 5px;
	background-color: red;

	padding: 3px 5px;

	font-size: 14px;
	font-weight: bold;
}

.video-section .video-wrap .image-wrap .count {
	position: absolute;

	bottom: 10px;
	left: 10px;

	border-radius: 2px;
	background-color: rgba(0, 0, 0, .6);

	padding: 2px;

	font-size: 13px;
}

.video-section .video-wrap .video-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;

	margin-top: 10px;
}

.video-section .video-wrap .video-bottom .thumbnail {
	width: 40px;
	height: 40px;

	border-radius: 50%;
}

.video-section .video-wrap .video-bottom .txt-wrap {
	width: calc(100% - 50px);
}

.video-section .video-wrap .video-bottom .txt-wrap .source,
.video-section .video-wrap .video-bottom .txt-wrap .game {
	font-size: 13px;
	color: #adadb8;
	margin-top: 3px;
}

.video-section .video-wrap .video-bottom .txt-wrap .source:hover,
.video-section .video-wrap .video-bottom .txt-wrap .game:hover {
	color: #9147ff;
}

.video-section .btn-more {
	position: absolute;

	width: 100px;
	height: 30px;
	background-color: #0e0e10;
	border-radius: 20px;
	padding: 0 10px;

	text-align: center;
	line-height: 30px;
	font-weight: bold;
	color: #bf94ff;

	bottom: -16px;
	left: 50%;
	transform: translate(-50%);

	cursor: pointer;
}

.video-section .btn-more:hover {
	background-color: rgba(255, 255, 255, .3);
	border-radius: 4px;
}

/* 카테고리 영역 */
.category-section {
	padding-top: 50px;
	padding-bottom: 30px;

	border-bottom: solid 1px #ffffff1a;
}

.category-section .title-wrap {
	padding-bottom: 10px;
}

.category-section .title-wrap h2 {
	font-size: 20px;
}

.category-section .category-wrap {

}

.category-section .category-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.category-section .category-wrap li {
	width: 15%;
	margin-right: auto;
}

.category-section .category-wrap li:last-child {
	margin-right: 0;
}

.category-section .category-wrap .image-wrap {
	background-color: #9147ff;
}

.category-section .category-wrap .image-wrap img {
	width: 100%;
	height: 195px;

	transition: transform 0.15s linear;
}

.category-section .category-wrap .image-wrap:hover img {
	transform: translate(6px, -6px);
}

.category-section .category-wrap .txt-wrap {
	margin-top: 8px;
}

.category-section .category-wrap .txt-wrap .count {
	font-size: 13px;
    color: #adadb8;
    margin-top: 3px;
}

.category-section .category-wrap .txt-wrap .count:hover {
	color: #9147ff;
}

/* 하단 영역 */
footer {
	width: 100%;
	padding: 80px 0 120px;
}

footer .txt-wrap {
	text-align: center;
}

footer .txt-wrap p {
	font-size: 14px;
	color: #efeff1;
	line-height: 1.5;
}

footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-items: stretch;

	margin-top: 20px;
}

footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-items: stretch;
}

footer ul li {

}

footer ul li a {
	font-size: 14px;
	color: #adadb8;
}

footer ul li a:after {
	content: "";
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: #adadb8;

	margin: 0 8px;

	position: relative;
	top: 1px;
}

footer ul li a:hover {
	text-decoration: underline;
	text-decoration-color: #9147ff;
}

footer ul li:last-child a:after {
	content: none;
}

어려운점

  • background size 와 position 관련 세부조정

해결방법

  • 따로 복습함

학습소감

  • 쉬운 것 같으면서 쉽지 않고 새로운 방법이 있는데 어떻게 적용시키는지 알지 못해 아쉬웠지만 다른 방법을 찾아봄.

좋은 웹페이지 즐겨찾기