20210824
학습한 내용
트위치 콘텐츠 영역
index.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">44</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>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>기발자(gi_balja)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">10,000</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>상호명: 동해물과 백두산이</p>
<p>대표자명: 동해물</p>
<p>동해물과 백두산이 마르고 닳도록 하난님이 보우하사 우리 나라만세</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">
<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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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 legeneds</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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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 Legends</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="cateogry-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>
</div>
</div>
</body>
</html>학습내용 중 어려웠던 점
크게 어려운 점은 없었다.
해결방법
반복해서 손에 익히려고 하였다.
학습소감
이제 별로 남지않은 기간동안 집중력있게 들어야겠다.
