20210809
학습한 내용
네이버 게임 2편
왼쪽 영역 (2)
game.html
<main role="main" id="game-main">
<div class="game-container game-flex-between">
<div class="left">
<div class="left-banner game-shadow">
<a href="#">
<img src="https://via.placeholder.com/900x120">
</a>
</div>
<div id="game-section-1" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">게임 라운지 인기글</h2>
<div class="section-btn-wrap">
<a href="#" class="active">전체</a>
<a href="#">Joined</a>
</div>
</div>
<nav class="section-middle-nav">
<ul>
<li><a href="#" class="active">공략</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</nav>
<ol>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">김인권</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
</ol>
<a href="#" class="btn-circle icon-arrow"></a>
</div>
<div id="game-section-2" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">생생 주요 게임 뉴스</h2>
<a href="#" class="more">더보기</a>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
<ul>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
<li>
<a href="#" class="game-flex-between">
<h3 class="title">라이엇게임즈</h3>
<span class="source">인벤</span>
</a>
</li>
</ul>
</div>
</div>
<div id="game-section-3" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">오리지널 시리즈</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<div id="game-section-4" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">인기게임 영상</h2>
</div>
<div class="section-body-wrap">
<ol>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263x148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263x148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263x148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263x148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263x148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263x148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원기아 vs RNG 1세트</h3>
<div class="game-flex-between">
<span class="source">리그 오브 레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
</ol>
</div>
</div>
<div id="game-section-5" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">이번 달 출시 게임</h2>
<a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
</div>
<nav class="section-middle-nav">
<ul>
<li><a href="#" class="active">금 05.28</a></li>
<li><a href="#">토 05.29</a></li>
<li><a href="#">일 05.30</a></li>
</ul>
</nav>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05. 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05. 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05. 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190x120">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05. 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<div id="game-section-6" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">급상승 공식 게임 카페</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">맴버 412,800명</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
</div>학습내용 중 어려웠던 점
같은 부분 반복으로 실수하는 부분이 발생하였다.
해결 방법
사이트와 반복된 비교로 잘못된 점을 찾아 보았다.
학습소감
코드 작성만 무작정 따라하지않고 사이트들과 내가 만든것들을 비교하면서 발전해가야겠다.
