개발일지 21/06/29

학습내용
1. 네이버 게임 오른쪽 영역

game html

				<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

.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;
}