학습내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Twitch</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 트위치 상단 영역 -->
<nav id="top-nav">
<div class="nav-wrap twitch-flex-between">
<div class="nav-left twitch-flex-start">
<h1 class="logo">
<a href="#">
<img src="https://via.placeholder.com/24x28">
</a>
</h1>
<ul class="twitch-flex-start">
<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 twitch-flex-between">
<input type="text" placeholder="검색">
<button class="btn-search"></button>
</div>
</div>
<div class="nav-right twitch-flex-end">
<div class="prime-icon-wrap">
<i class="prime-icon"></i>
<span class="alarm">39</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 twitch-flex-between">
<h3>추천 채널</h3>
<i class="icon-arrow"></i>
</div>
<div class="channel-body">
<ul>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자1(idtest1)</h4>
<span class="category">Dead Space 3</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자2(idtest2idtest2)</h4>
<span class="category">World of Tank</span>
</div>
<span class="count">235</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자1(idtest1)</h4>
<span class="category">Dead Space 3</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자2(idtest2idtest2)</h4>
<span class="category">World of Tank</span>
</div>
<span class="count">235</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자1(idtest1)</h4>
<span class="category">Dead Space 3</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자2(idtest2idtest2)</h4>
<span class="category">World of Tank</span>
</div>
<span class="count">235</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자1(idtest1)</h4>
<span class="category">Dead Space 3</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자2(idtest2idtest2)</h4>
<span class="category">World of Tank</span>
</div>
<span class="count">235</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자1(idtest1)</h4>
<span class="category">Dead Space 3</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#" class="twitch-flex-start">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>방송자2(idtest2idtest2)</h4>
<span class="category">World of Tank</span>
</div>
<span class="count">235</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>상호명: Twitch Interactive, Inc.</p>
<p>대표자명: 홍길동</p>
<p>주소: 350 Bush Street, 2nd Floor, SanFrancisco, Califonia 94104, USA</p>
<ul class="twitch-flex-start">
<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 class="twitch-flex-between">
<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>로마의 진정한 후예 조선</h3>
<p class="source">스트리머 1(streamer 1)</p>
<p class="game">HUMANKIND</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 2(streamer 2)</p>
<p class="game">Just Chatting</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 3(streamer 3)</p>
<p class="game">HUMANKIND</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 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 class="twitch-flex-between">
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">시청자 40.5만명</p>
<div class="tag-wrap">
<span class="tag">리얼라이프</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>World of Tanks</h3>
<p class="count">시청자 1,548명</p>
<div class="tag-wrap">
<span class="tag">시뮬레이션</span>
<span class="tag">FPS</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>LOST ARK</h3>
<p class="count">시청자 7,681명</p>
<div class="tag-wrap">
<span class="tag">RPG</span>
<span class="tag">액션</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Diablo II: Resurrected</h3>
<p class="count">시청자 123명</p>
<div class="tag-wrap">
<span class="tag">RPG</span>
<span class="tag">액션</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>World of Tanks</h3>
<p class="count">시청자 1,548명</p>
<div class="tag-wrap">
<span class="tag">시뮬레이션</span>
<span class="tag">FPS</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>LOST ARK</h3>
<p class="count">시청자 7,681명</p>
<div class="tag-wrap">
<span class="tag">RPG</span>
<span class="tag">액션</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>World of Tanks</h3>
<p class="count">시청자 1,548명</p>
<div class="tag-wrap">
<span class="tag">시뮬레이션</span>
<span class="tag">FPS</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>LOST ARK</h3>
<p class="count">시청자 7,681명</p>
<div class="tag-wrap">
<span class="tag">RPG</span>
<span class="tag">액션</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 class="twitch-flex-between">
<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>로마의 진정한 후예 조선</h3>
<p class="source">스트리머 1(streamer 1)</p>
<p class="game">HUMANKIND</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 2(streamer 2)</p>
<p class="game">Just Chatting</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 3(streamer 3)</p>
<p class="game">HUMANKIND</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 class="btn-more font-purple">더 보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>모두 후원 열차에 탑승해 주세요!</h2>
</div>
<div class="video-wrap">
<ul class="twitch-flex-between">
<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>로마의 진정한 후예 조선</h3>
<p class="source">스트리머 1(streamer 1)</p>
<p class="game">HUMANKIND</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 2(streamer 2)</p>
<p class="game">Just Chatting</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 3(streamer 3)</p>
<p class="game">HUMANKIND</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 class="btn-more font-purple">더 보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">World of Tanks</span> 채널</h2>
</div>
<div class="video-wrap">
<ul class="twitch-flex-between">
<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>로마의 진정한 후예 조선</h3>
<p class="source">스트리머 1(streamer 1)</p>
<p class="game">HUMANKIND</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 2(streamer 2)</p>
<p class="game">Just Chatting</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 3(streamer 3)</p>
<p class="game">HUMANKIND</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 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 class="twitch-flex-between">
<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>로마의 진정한 후예 조선</h3>
<p class="source">스트리머 1(streamer 1)</p>
<p class="game">HUMANKIND</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 2(streamer 2)</p>
<p class="game">Just Chatting</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">
<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>Long Title Long Title Long Title</h3>
<p class="source">스트리머 3(streamer 3)</p>
<p class="game">HUMANKIND</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 class="btn-more font-purple">더 보기</button>
</div>
<footer>
<div class="txt-wrap">
<p>상호명: Twitch Interactive, Inc.</p>
<p>대표자: 홍길동</p>
<p>주소: 350 Bush Street, 2nd Floor, San Francisco, California 94104, USA</p>
<p>호스팅 서비스 제공자: Amazon Web Services, Inc.</p>
</div>
<div class="footer-bottom">
<ul class="twitch-flex-start">
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</footer>
</div>
</div>
</div>
</body>
</html>
AI School for Daegu