학습한 내용
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="http://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="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="http://via.placeholder.com/38x38"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="http://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
</ol>
<a href="#" class="btn-circle icon-arrow"></a>
</div>css
#game-main .left .left-banner{
overflow: hidden;
width: 900px;
height: 120px;
border-radius: 12px;
margin-bottom: 24px;
}
#game-main .left .left-banner a{
display: block;
width: 100%;
height: 100%;
}
#game-main .left .left-banner img{
width: 100%;
}
.game-section{
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-wrap: wrap;
flex-direction: row;
align-items: center;
border-bottom: 1px solid rgba(0, 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 .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.5;
left: 37%;
transform: translateX(-50%);
}
.game-section .btn-circle.icon-arrow{
background-color: gray;
}
#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{
margin-right: 10px;
border-radius: 8px;
}
#game-section-1 ol li .txt-info{
margin-right: 10px;
width: 690px;
}
#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;
}학습내용 중 어려웠던 점
어려운 부분은 없었따.
해결 방법
어려운 부분 없었다!
학습소감
처음에는 서랍?을 왜이렇게 많이 만드는지 이해가 잘 안갔는데 슬슬 구조나누는 부분이 이해가 조금씩 되고 있따.
hello