2021.08.24트위치3

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

오늘의 강의 내용

* 트위치컨텐츠 영역 나머지 부분 카피캣


카피캣 영역인 트위치 컨텐츠영역 나머지 부분


트위치 컨텐츠영역 나머지 부분 카피캣 완료된 모습

<!-- twitch.html언어 -->
<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">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<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 font_purple">더보기</button>
				</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">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<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 font_purple">더보기</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">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<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 font_purple">더보기</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">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<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 font_purple">더보기</button>
				</div>

				<div class="video_section">
					<div class="title_wrap">
						<h2>추천 <span class="font_purple">StarCraft</span> 채널</h2>
					</div>	

					<div class="video_wrap">
						<ul>
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<span class="tag">한국어</span>
												<span class="tag">독일어</span>
												<span class="tag">후원 열차</span>
											</div>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/333x186">
										<span class="mark">생방송</span>
									</div>

									<div class="video_bottom">
										<img class="thumbnail" src="https://via.placeholder.com/40">
										<div class="txt_wrap">
											<h3>2021 LCK Summer Split</h3>
											<p class="source">LCK_Korea</p>
											<p class="game">League of Legend</p>

											<div class="tag_wrap">
												<span class="tag">e스포츠</span>
												<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 font_purple">더보기</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="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x203">

									<div class="txt_wrap">
										<h3>Apex Legends</h3>
										<p class="count">시청자 4.1만명</p>

										<div class="tag_wrap">
											<span class="tag">e스포츠</span>
											<span class="tag">한국어</span>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>


				<footer>
					<div class="txt_wrap">
						<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
						<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
						<p>상호명: 동해물과 백두산이 마르고 닳도록</p>
						<p>상호명: 동해물과 백두산이 마르고 닳도록</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>
            
<!-- style.css언어 -->
.content {
	overflow-y: auto;
	position: absolute;
	top: 50px;
	left: 240px;

	bottom: 0;
	right: 0;
}

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

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

	top: 0;
	left: 0;
}

.content #content_banner .layer .txt_wrap {
	position: absolute;
	top: 170px;
	right: 200px;
}

.content .content_container {
	width: 1240px;
	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;
	color: #ffffff;
	background-color: gray;
	border-radius: 8px;

	padding: 2px 4px 0;

	margin-right: 5px;
}

.content_container .tag_wrap .tag:last-child {
	margin-right: 0;
}

.content_container .txt_wrap {

}

.content_container .txt_wrap h3 {
	font-size: 16px;	
}


/* 비디오 섹션 */
.video_section {
	position: relative;
	padding-top: 60px;
	padding-bottom: 40px;

	border-bottom: solid 1px gray;
}

.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: center;
}

.video_section .video_wrap li {
	width: 333px;
}

.video_section .video_wrap a {
	
}

.video_section .video_wrap .image_wrap {
	position: relative;
	width: 333px;
	height: 186px;
	background-color: #9147ff;
}

.video_section .video_wrap .image_wrap img {
	width: 100%;
	height: 100%;

	transition: transform 0.15s linear;
}

.video_section .video_wrap .image_wrap:hover img {
	transform: translate(10px, -10px);
}

.video_section .video_wrap .image_wrap .mark {
	position: absolute;

	top: 15px;
	left: 15px;

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

	padding: 2px 4px 0;

	font-size: 14px;
}

.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;
}

.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: 14px;
	color: gray;
}



.video_section .btn_more {
	position: absolute;

	width: 100px;
	height: 30px;
	background-color: #0e0e10;

	text-align: center;
	line-height: 30px;

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

.category_section {
	padding-top: 60px;
	padding-bottom: 40px;
}

.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: 152px;
}

.category_section .category_wrap img {
	width: 152px;
	height: 203px;
	margin-bottom: 10px;
}

.category_section .category_wrap .txt_wrap {
	
}

.category_section .category_wrap .txt_wrap .count {
	font-size: 14px;
	color: gray;
}


footer {
	width: 100%;
	padding: 80px 0 150px;
}

footer .txt_wrap {
	text-align: center;
}

footer .txt_wrap p {
	font-size: 14px;
}

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

	margin-top: 20px;
}

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

footer ul li {

}

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

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

	width: 1px;
	height: 12px;
	background-color: gray;

	margin: 0 8px;

	position: relative;
	top: 1px;
}

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

강의를 끝난후 소감

트위치 카피캣 강의가 분량이 많아 배울점과 새로운방식을 많이 배울수 있어 좋았다.

힘든점, 문제점

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

개선방안

연습과정에서 트위치 작업중에 배운 코드방식으로 연습을 해보아야겠다.

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

2021.08.23트위치3

다음 포스트

네이버모바일2

0개의 댓글

관련 채용 정보