학습한 내용
html - game
<div class="title-wrap game-flex-between">
<h2>최근 방문</h2>
<a href="#">MY라운지 이동</a>
</div>
<div class="right-section-body">
<div class="text-wrap">
<p>관심있는 게임을 검색해보세요.</p>
<div class="input-wrap game-flex-start">
<input type="" placeholder="라운지 검색">
<button type="button"></button>
</div>
</div>
</div>
</div>
<div id="popular-section-1" class="right-section rank-section">
<div class="title-wrap game-flex-between">
<h2>인기 게임 라운지 TOP5</h2>
<a href="#">더보기</a>
</div>
<div class="right-section-body">
<ol>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count red">1</span>
<div class="up-and-down-wrap">
<div class="equal"></div>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>리그 오브 레전드</h3>
<span class="genre">MOBA</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count red">2</span>
<div class="up-and-down-wrap">
<div class="equal"></div>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>슈퍼스트링</h3>
<span class="genre">RPG</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count">3</span>
<div class="up-and-down-wrap">
<div class="equal"></div>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>피파 온라인 4</h3>
<span class="genre">스포츠</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count">4</span>
<div class="up-and-down-wrap">
<span class="up">1</span>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>배틀그라운드</h3>
<span class="genre">스포츠</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count">5</span>
<div class="up-and-down-wrap">
<span class="down">1</span>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>로스트아크</h3>
<span class="genre">스포츠</span>
</div>
</li>
</ol>
<p class="time">2021.06.02 업데이트</p>
</div>
</div>
<div id="popular-section-2" class="right-section rank-section">
<div class="title-wrap game-flex-between">
<h2>급상승 게임 라운지 TOP5</h2>
<a href="#">더보기</a>
</div>
<div class="right-section-body">
<ol>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count red">1</span>
<div class="up-and-down-wrap">
<div class="equal"></div>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>리그 오브 레전드</h3>
<span class="genre">MOBA</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count red">2</span>
<div class="up-and-down-wrap">
<div class="equal"></div>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>슈퍼스트링</h3>
<span class="genre">RPG</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count">3</span>
<div class="up-and-down-wrap">
<div class="equal"></div>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>피파 온라인 4</h3>
<span class="genre">스포츠</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count">4</span>
<div class="up-and-down-wrap">
<span class="up">1</span>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>배틀그라운드</h3>
<span class="genre">스포츠</span>
</div>
</li>
<li class="game-flex-start">
<div class="count-wrap">
<span class="count">5</span>
<div class="up-and-down-wrap">
<span class="down">1</span>
</div>
</div>
<div class="image-wrap">
<img src="https://via.placeholder.com/55">
<i class="chk"></i>
</div>
<div class="txt-wrap">
<h3>로스트아크</h3>
<span class="genre">스포츠</span>
</div>
</li>
</ol>
<p class="time">2021.06.02 업데이트</p>
</div>
</div>
<div id="news-section" class="right-section">
<div class="title-wrap game-flex-between">
<h2>e스포츠 주요 뉴스</h2>
<a href="#">더보기</a>
</div>
<div class="right-section-body">
<ul>
<li><a href="#">동해물과 백수산이</a></li>
<li><a href="#">동해물과 백수산이</a></li>
<li><a href="#">동해물과 백수산이</a></li>
<li><a href="#">동해물과 백수산이</a></li>
<li><a href="#">동해물과 백수산이</a></li>
<li><a href="#">동해물과 백수산이</a></li>
</ul>
</div>
</div>
<div id="week-section" class="right-section">
<div class="title-wrap game-flex-between">
<h2>이번 주 신생 라운즈</h2>
</div>
<div class="right-section-body">
<ul>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/128x72">
<div class="txt-wrap">
<h3>무신의 칼</h3>
<span>MMORPG</span>
</div>
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/128x72">
<div class="txt-wrap">
<h3>무신의 칼</h3>
<span>MMORPG</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div id="game-footer-section">
<a href="#">네이버 이용약관</a>
<a href="#">네이버 게임 운영정책</a>
<a href="#">개인정보처리 방침</a>
<a href="#">네이버 게임 고객센터</a>
</div>
</div>css
.right-section {
background-color: #ffffff;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
border-radius: 12px;
padding: 30px;
margin-bottom: 24px;}
.right-section .title-wrap {
}
.right-section .title-wrap h2 {
font-size: 17px;
font-weight: 400;
}
.right-section .title-wrap a {
font-size: 13px;
font-weight: 400;
color: #444;
}
.right-section .right-section-body {
margin-top: 20px;
}
#visitor-section .text-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#visitor-section .text-wrap p {
font-size: 13px;
color: #9da5b6;
text-align: center;
margin-top: 20px;}
#visitor-section .text-wrap .input-wrap {
overflow: hidden;
position: relative;
width: 250px;
height: 44px;
background-color: #f5f6fa;
border-radius: 12px;
margin-top: 18px;}
#visitor-section .text-wrap .input-wrap input {
width: calc(100% - 44px);
height: 100%;
background-color: transparent;
padding: 10px 16px;
border: none;
font-size: 15px;}
#visitor-section .text-wrap .input-wrap input:focus {
outline: none;
}
#visitor-section .text-wrap .input-wrap button {
width: 44px;
height: 100%;
background-color: grey;
}
.rank-section .right-section-body {
}
.rank-section .right-section-body ol {
}
.rank-section .right-section-body li {
margin-bottom: 16px;
}
.rank-section .right-section-body li:after {
content: '';
width: 14px;
height: 14px;
background-color: grey;
}
.rank-section .right-section-body li:last-child {
margin-bottom: 0;
}
.rank-section .right-section-body li .count-wrap{
position: relative;
width: 25px;
text-align: center;
margin-right: 5px;
}
.rank-section .right-section-body .count-wrap .count{
font-size: 17px;
font-weight: 700;
}
.rank-section .right-section-body .count-wrap .count.red{
color: #ff4c51;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap {
position: absolute;
left: 6px;
bottom: -13px;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .equal{
display: inline-block;
width: 5px;
height: 3px;
background-color: grey;
margin-left: 3px;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .up {
color: red;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .up:before {
background-color: red;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .down{
color: blue;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .down:before {
background-color: blue;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap span {
font-size: 10px;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap span:before {
content: '';
display: inline-block;
position: relative;
width: 7px;
height: 3px;
top: -2px;
margin-right: 1px;
}
.rank-section .right-section-body .image-wrap {
position: relative;
width: 55px;
height: 55px;
margin-right: 5px;
}
.rank-section .right-section-body .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 12px;
}
.rank-section .right-section-body .image-wrap .chk{
position: absolute;
width: 21px;
height: 21px;
background-color: grey;
border-radius: 50%;
top: -2px;
right: -2px;}
.rank-section .right-section-body .txt-wrap {
}
.rank-section .right-section-body .txt-wrap h3 {
width: 182px;
font-size: 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 10px;}
.rank-section .right-section-body .txt-wrap .genre {
font-size: 13px;
color: #999;
}
.rank-section .right-section-body .time {
margin-top: 12px;
font-size: 13px;
color: #999;
}
#news-section .right-section-body ul {
}
#news-section .right-section-body ul li {
margin-bottom: 5px;
}
#news-section .right-section-body ul li:last-child {
margin-bottom: 0;
}
#news-section .right-section-body ul a {
display: block;
}
#news-section .right-section-body ul a:before {
content: '';
position: relative;
display: inline-block;
width: 3px;
height: 3px;
background-color: #9da5b6;
top: -5px;
margin-right: 5px;}
#week-section li {
margin-bottom: 16px;
}
#week-section li:last-child {
margin-bottom: 0;
}
#week-section img {
width: 128px;
height: 72px;
border-radius: 8px;
margin-right: 10px;}
#week-section .txt-wrap h3 {
font-size: 15px;
}
#week-section .txt-wrap span {
font-size: 13px;
color: #999999;
}
#game-footer-section {
}
#game-footer-section a {
display: inline-block;
font-size: 12px;
color: #666;
}
#game-footer-section a:after {
content: '';
display: inline-block;
width: 1px;
height: 11px;
margin: 1px 10px 0;
background-color: #ddd;
vertical-align: top;
}
결과물
학습내용 중 어려웠던 점
수업의 속도가 빠르다보니 코드를 입력하는데 따라가기가 힘들었다.
해결방법
수업 배속을 느리게하고 머릿속에서 코드를 어떻게 작성하면 되는지 확인을 한다.
학습소감
이제 요류가 나는 코드들은 결과물에서 다른 것들을 확인하고 거기에 해당되는 코드만 수정하면 되서 쉽게 고칠 수 있다.
