[dg_ai_school] 웹프로그래밍 39

이채환·2021년 8월 20일
0

webprogramming

목록 보기
39/51

학습내용

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

/* Default */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    background-color: #0e0e10;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: top;
}

input {
    outline: none;
    border: none;
}

button {
    outline: none;
    border: none;
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
input,
button,
a {
    color: #fff;
}

.btn-purple {
    background-color: #9147ff;
    color: #fff;
}

.font-purple {
    color: #9147ff;
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.main-container {
    width: 100%;
    min-width: 1340px; /* 특정 지점에서 더이상 줄어들지 않게 하기 위함 */
    /* padding-top: 50px; */
}

/* Top Nav */
#top-nav {
    /* fixed를 적용하면 크기가 제대로 잡히지 않기 때문에 width 값이 필요하다. */
    position: fixed;
    width: 100%;
    height: 50%;
    background-color: #0e0e10;
    padding: 0 15px;
    min-width: 1340px;
}

/* Nav Left */
#top-nav .nav-wrap .nav-left .log a img {
    width: 24px;
    height: 28px;
}

#top-nav .nav-wrap .nav-left ul li {
    height: 50px;
    font-size: 20px;
    padding: 0 20px;
}

#top-nav .nav-wrap .nav-left ul li:first-child {
    padding-right: 0;
}

#top-nav .nav-wrap .nav-left ul li:first-child a::after {
    position: relative;
    top: 8px;
    content: '';
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: gray;

    margin-left: 20px;
}

#top-nav .nav-wrap .nav-left ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
}

#top-nav .nav-wrap .nav-left .more span {
    display: block;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
}

/* Nav Center */
#top-nav .nav-center {
    /* 중앙에 위치하려면 flex의 영향을 받지 않게 해야 한다. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top-nav .nav-center .search-wrap {
    width: 380px;
    height: 36px;
    background-color: yellow;
    overflow: hidden;
    border-radius: 5px;
}

#top-nav .nav-center .search-wrap input {
    width: calc(100% - 34px);
    height: 100%;
    background-color: gray;
}

#top-nav .nav-center .search-wrap .btn-search {
    width: 34px;
    height: 100%;
    background-color: darkgray;
}

/* Nav Right */
#top-nav .nav-right .mark-wrap {
    position: relative;
}

#top-nav .nav-right .mark-wrap .icon-mark {
    display: block;
    width: 20px;
    height: 20px;
    background-color: yellow;
    cursor: pointer;
}

#top-nav .nav-right .mark-wrap .alarm {
    position: absolute;
    border-radius: 15px;
    background-color: red;
    color: #fff;
    font-size: 14px;

    padding: 4px 8px 4px;

    top: -12px;
    right: -20px;
}

#top-nav .nav-right .btn-login {
    width: 53px;
    height: 30px;
    background-color: gray;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    margin-left: 20px;
    font-size: 12px;
}

#top-nav .nav-right .btn-purple {
    width: 53px;
    height: 30px;
    border-radius: 5px;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

#top-nav .nav-right .btn-profile {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
}

/* Left Area */
.left-area {
    position: fixed;
    width: 240px;
    background-color: #202024;
    top: 50px; /* top nav 높이만큼 내림 */
    bottom: 0; /* height 100% */
    left: 0;
    overflow-y: auto; /* 스크롤 */
}

.left-area .channel-wrap .channel-header {
    padding: 10px;
}

.left-area .channel-wrap .channel-header h3 {
    font-size: 15px;
}

.left-area .channel-wrap .channel-header .icon-arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
}

.left-area .channel-wrap .channel-body {
}

.left-area .channel-wrap .channel-body ul {
}

.left-area .channel-wrap .channel-body li {
}

.left-area .channel-wrap .channel-body a {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    align-items: flex-start;
}

.left-area .channel-wrap .channel-body img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.left-area .channel-wrap .channel-body .txt-wrap {
    width: 110px;
    margin-left: 10px;
}

.left-area .channel-wrap .channel-body .txt-wrap h4 {
    font-size: 13px;
}

.left-area .channel-wrap .channel-body .txt-wrap .source {
    font-size: 12px;
    color: gray;
}

.left-area .channel-wrap .channel-body .count {
    display: block;
    width: 50px;
    font-size: 12px;
}

.left-area .channel-wrap .channel-body .count::before {
    position: relative;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;

    margin-right: 5px;
    top: 1px;
}

/* Join Wrap */
.left-area .join-wrap {
    margin: 10px;
}

.left-area .join-wrap .txt-wrap {
    padding: 20px;
    background-color: #18181a;
}

.left-area .join-wrap .txt-wrap .h2 {
    font-size: 24px;
}

.left-area .join-wrap .txt-wrap h2 span {
}

.left-area .join-wrap .txt-wrap p {
    margin-top: 10px;
    font-size: 13px;
}

.left-area .join-wrap .txt-wrap .btn-purple {
    margin-top: 10px;
    width: 53px;
    height: 30px;
    border-radius: 5px;

    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

.left-area .info-wrap {
    font-size: 12px;
    margin: 0 10px 10px 10px;
}

.left-area .info-wrap p {
    color: gray;
}

.left-area .info-wrap ul {
    margin-top: 10px;
}

.left-area .info-wrap li {
}

.left-area .info-wrap li a {
    color: gray;
}

.left-area .info-wrap li a::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: gray;

    margin: 0 5px;
}

.left-area .info-wrap li:last-child a::after {
    content: none;
}

어려운점

  • 신기술이 적용되었다는 점에서 어떻게 적용시키는지 몰라서 아쉬움

해결방법

  • 홀로 몇 가지를 찾아봄(자세히 알 수는 없는 것 같음)

학습소감

  • 트위치 홈페이지가 네이버 페이지보다 더 흥미로운 것 같음.
profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 38

다음 포스트

[dg_ai_school] 웹프로그래밍 40

0개의 댓글