학습내용
1. 네이버 게임 (4)
1) 게임 오른쪽 영역
<div class="right">
<div id="visitor-section" class="right-section">
<div class="title-wrap game-flex-between">
<h2>최근 방문</h2>
<a href="#">MY라운지 이동</a>
</div>
<div class="right-section-body">
<div class="text-wrap game-flex-center">
<p class="game-m-t-20">관심있는 게임을 검색해보세요.</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 red">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>FIFA 온라인 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">핵앤슬러시 MMORPG</span>
</div>
</li>
</ol>
<p class="time">2021.06.02 업데이트</p>
</div>
</div>
<div id="popular-section-2" class="right-section rank-section"> <!-- popluar-section-1 변형 -->
<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 red">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>FIFA 온라인 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">핵앤슬러시 MMORPG</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>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<a href="#">[기자수첩] 텐센트는 왜 롤드컵 개최지를 급하게 변경했을까?</a>
<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/128x74">
<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/128x74">
<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>
<a href="#">네이버 게임 고객센터</a>
<a href="#">서비스 소개 및 제휴 안내</a>
</div>
</div>css↓
/* main 오른쪽영역 */
#game-main .right {
width: 358px;
/*height: 2000px;*/
/*background-color: lightpink;*/
}
/* right-section */
.right-section {
background-color: #fff;
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 */
#visitor-section .text-wrap p {
font-size: 13px;
color: #9da5b6;
text-align: center;
}
#visitor-section .text-wrap .input-wrap {
position: relative;
width: 250px;
height: 44px;
background-color: #f5f6fa;
border-radius: 12px;
margin-top: 18px;
overflow: hidden;
}
#visitor-section .text-wrap .input-wrap input {
width: calc(100% - 44px);
height: 100%;
padding: 10px 16px;
border: none;
background-color: transparent;
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: dodgerblue;
}
/* popular-section */
.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: lightslategrey;
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 .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;
background-color: red;
top: -2px;
margin-right: 1px;
}
.rank-section .right-section-body .image-wrap {
position: relative;
/*overflow: hidden;*/
width: 55px;
height: 55px;
/*border-radius: 12px;*/
margin-right: 5px;
}
/* overflow: hidden;을 image-wrap에 적용시켜서 border-radius를 적용시키면, chk의 동그란 오브젝트도 함께 image-wrap의 크기만큼 잘려서 나오게 된다. */
/* img에 직접 overflow: hidden;과 boredr-raidus: 12px;을 적용시키는 것이 좋다. */
.rank-section .right-section-body .image-wrap img {
position: absolute;
overflow: hidden;
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;
text-overflow: ellipsis;
white-space: nowrap;
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 */
#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 li a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#news-section .right-section-body ul li a:before {
content: '';
position: relative;
display: inline-block;
width: 3px;
height: 3px;
background-color: #9da5b6;
top: -5px;
margin-right: 5px;
}
/* week-section */
#week-section li {
margin-bottom: 16px;
}
#week-section li:last-child {
margin-bottom: 16px;
}
#week-section img {
width: 128px;
height: 74px;
border-radius: 8px;
margin-right: 10px;
}
#week-section .txt-wrap h3 {
font-size: 15px;
}
#week-section .txt-wrap img {
font-size: 13px;
color: #999;
}
/* game-footer-section */
#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;
}
어려웠던 점과 해결 방안
학습소감
화면을 확대해 보았는데, 메인 영역이 완전히 잘렸다.
헤더부분은 그 정도까지는 아니었지만 100%이하의 비율로 볼때랑은 구성이 깨져서 어떻게 해결하면 좋을지 고민이다.
→ 원본인 네이버 게임 페이지도 똑같음.
