210806 개발일지
1) 학습한 내용
국내외 사이트 카피캣 (네이버 게임 2편)
> 네이버 게임 왼쪽영역 (1) - 게임라운지 인기글
<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>
.game-section
{position: relative;
background-color: #ffffff;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
border-radius: 12px;
padding: 27px 30px 40px;
margin-bottom: 40px;}
.game-section .section-title-wrap
{display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;}
.game-section .section-title-wrap h2
{font-size: 19px;
font-weight: 400;}
.game-section .section-middle-nav {}
.game-section .section-middle-nav ul
{display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, .07);}
.game-section .section-middle-nav li {}
.game-section .section-middle-nav a
{display: block;
padding: 14px;
border-bottom: solid 3px transparent;
color: #777;}
.game-section .section-middle-nav a.active
{border-bottom: solid 3px #7776ff;
font-weight: 700;
color: #7776ff;}
.game-section .section-body-wrap
{margin-top: 18px;}
.game-section .section-body-wrap .image-txt-wrap
{display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;}
.game-section .section-body-wrap .image-txt
{width: 407.5px;}
.game-section .section-body-wrap img
{width: 180px;
height: 100px;
border-radius: 8px;
border: solid 1px rgba(0, 0, 0, .06);
margin-right: 15px;}
.game-section .section-body-wrap .txt
{width: 212px;}
.game-section .section-body-wrap .title
{font-size: 15px;
font-weight: 600;
line-height: 20px;
margin-bottom: 3px;}
.game-section .section-body-wrap .source
{font-size: 13px;
color: #999;}
.game-section .btn-circle
{position: absolute;
width: 55px;
height: 55px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
bottom: -27.5px;
left: 50%;
transform: translateX(-50%);}
.game-section .btn-circle.icon-arrow
{background-color: grey;}
.game-section .btn-circle.icon-plus
{background-color: blue;}
#game-section-1 {}
#game-section-1 .section-btn-wrap {}
#game-section-1 .section-btn-wrap a
{font-size: 14px;
color: #9da5b6;
font-weight: 700;}
#game-section-1 .section-btn-wrap a.active
{color: #7776ff;}
#game-section-1 .section-btn-wrap a:last-child
{margin-left: 14px;}
#game-section-1 ol {}
#game-section-1 ol li
{padding: 10px 0;
border-bottom: solid 1px rgba(0, 0, 0, .03);}
#game-section-1 ol li a {}
#game-section-1 ol li .game-thumbnail
{border-radius: 8px;
margin-right: 10px;}
#game-section-1 ol li .txt-info
{width: 690px;
margin-right: 10px;}
#game-section-1 ol li .txt-info h3
{font-size: 16px;
font-weight: 600;
margin-bottom: 3px;}
#game-section-1 ol li .txt-info .source-wrap {}
#game-section-1 ol li .txt-info .source-wrap .game
{font-size: 13px;
color: #858894;
margin-right: 5px;}
#game-section-1 ol li .txt-info .source-wrap .author
{font-size: 13px;
color: #858894;
margin-right: 5px;}
#game-section-1 ol li .txt-info .source-wrap .level
{font-size: 13px;
color: #858894;
margin-right: 5px;}
#game-section-1 ol li .txt-info .source-wrap .rank
{font-size: 13px;
color: #858894;}
#game-section-1 ol li .blog-thumbnail
{border-radius: 8px;}2)학습한 내용 중 어려웠던 점 또는 해결못한 것들
내용이 갑자기 줄어서 좋았다!
어려운 점은 없었다.
3)해결방법 작성
열심히 듣는 방법밖에 없다.
4)학습 소감
8월 첫째주가 지나갔다.
다음주도 화이팅
