2021.06.29 (네이버 게임 3)
학습한 내용
[네이버 게임 오른쪽 부분]
<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">
<p>관심있는 게임을 검색해보세요.</p>
<div class="input_wrap game_flex_start">
<input type="text" 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>
<a href="#" 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/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>리그 오브 레전드</h3>
<span class="genre">MOBA</span>
</div>
</a>
</li>
<li>
<a href="#" 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/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>슈퍼스트링</h3>
<span class="genre">RPG</span>
</div>
</a>
</li>
<li>
<a href="#" 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/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>FIFA 온라인 4</h3>
<span class="genre">스포츠</span>
</div>
</a>
</li>
<li>
<a href="#" 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/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>배틀그라운드 배틀그라운드 배틀그라운드 배틀그라운드</h3>
<span class="genre">서바이벌 슈팅</span>
</div>
</a>
</li>
<li>
<a href="#" 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/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>로스트아크</h3>
<span class="genre">MMORPG</span>
</div>
</a>
</li>
</ol>
<p class="time">2021.06.29 업데이트</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>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count red">1</span>
</div>
<div class="image_wrap">
<img src="https://via.placeholder.com/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>리그 오브 레전드</h3>
<span class="genre">MOBA</span>
</div>
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count red">2</span>
</div>
<div class="image_wrap">
<img src="https://via.placeholder.com/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>슈퍼스트링</h3>
<span class="genre">RPG</span>
</div>
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">3</span>
</div>
<div class="image_wrap">
<img src="https://via.placeholder.com/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>FIFA 온라인 4</h3>
<span class="genre">스포츠</span>
</div>
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">4</span>
</div>
<div class="image_wrap">
<img src="https://via.placeholder.com/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>배틀그라운드 배틀그라운드 배틀그라운드 배틀그라운드</h3>
<span class="genre">서바이벌 슈팅</span>
</div>
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">5</span>
</div>
<div class="image_wrap">
<img src="https://via.placeholder.com/55x55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>로스트아크</h3>
<span class="genre">MMORPG</span>
</div>
</a>
</li>
</ol>
<p class="time">2021.06.29 10:00 업데이트</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="#">[창간 기획] LCK 윤수빈-이정현 아나운서가 말하는 e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK 아나운서가 말하는 e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK 윤수빈-이정현 아나운서가 말하는 e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK 윤수빈-이정현 아나운서가 말하는 e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK 윤수빈-이정현</a></li>
<li><a href="#">[창간 기획] LCK 윤수빈-이정현</a></li>
<li><a href="#">[창간 기획] LCK 아나운서가 말하는 e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK 윤수빈-이정현 아나운서가 말하는 e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK e스포츠…2부</a></li>
<li><a href="#">[창간 기획] LCK 윤수빈-이정현 아나운서가 말하는 e스포츠…2부</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>스포츠, 모바일</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>스포츠, 모바일</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="#">NAVER Corp.</a>
</div>
</div>#game_main .right {
width: 358px;
}
.right_section {
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
border-radius: 12px;
background-color: #ffffff;
padding: 30px;
margin-bottom: 24px;
}
.right_section .title_wrap h2 {
font-size: 17px;
}
.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 {
position: relative;
width: 250px;
height: 44px;
background-color: #f5f6fa;
border-radius: 12px;
overflow: hidden;
margin-top: 18px;
}
#visitor_section .text_wrap .input_wrap input {
width: calc(100% - 44px);
height: 100%;
font-size: 15px;
background-color: transparent;
border: none;
padding: 10px 16px;
}
#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 li {
margin-bottom: 16px;
}
.rank_section .right_section_body li:last-child {
margin-bottom: 0;
}
.rank_section .right_section_body a:after {
display: inline-block;
content: "";
width: 14px;
height: 14px;
background-color: grey;
}
.rank_section .right_section_body a .count_wrap {
position: relative;
width: 25px;
text-align: center;
margin-right: 5px;
}
.rank_section .right_section_body a .count_wrap .count {
font-size: 17px;
font-weight: 700;
font-style: italic;
}
.rank_section .right_section_body a .count_wrap .count.red {
color: #ff4c51;
}
.rank_section .right_section_body a .count_wrap .up_and_down_wrap {
position: absolute;
left: 6px;
bottom: -13px;
}
.rank_section .right_section_body a .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 a .count_wrap .up_and_down_wrap .up {
color: red;
}
.rank_section .right_section_body a .count_wrap .up_and_down_wrap .up:before {
background-color: red;
}
.rank_section .right_section_body a .count_wrap .up_and_down_wrap .down {
color: blue;
}
.rank_section .right_section_body a .count_wrap .up_and_down_wrap .down:before {
background-color: blue;
}
.rank_section .right_section_body a .count_wrap .up_and_down_wrap span {
font-size: 10px;
}
.rank_section .right_section_body a .count_wrap .up_and_down_wrap span:before {
position: relative;
display: inline-block;
content: "";
width: 5px;
height: 3px;
background-color: red;
top: -2px;
margin-right: 1px;
}
.rank_section .right_section_body a .image_wrap {
position: relative;
width: 55px;
height: 55px;
border-radius: 12px;
margin-right: 10px;
}
.rank_section .right_section_body a .image_wrap img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 12px;
}
.rank_section .right_section_body a .image_wrap .chk {
position: absolute;
width: 21px;
height: 21px;
background-color: grey;
border-radius: 50%;
top: -2px;
right: -2px;
}
.rank_section .right_section_body a .txt_wrap h3 {
width: 178px;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 10px;
}
.rank_section .right_section_body a .txt_wrap .genre {
font-size: 13px;
color: #999;
}
.rank_section .right_section_body .time {
font-size: 13px;
color: #999;
margin-top: 12px;
}
#news_section .right_section_body ul li {
width: 287px;
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 {
position: relative;
display: inline-block;
content: "";
width: 3px;
height: 3px;
background-color: #9da5b6;
top: -5px;
margin-right: 5px;
}
#week_section .right_section_body ul li {
margin-bottom: 16px;
}
#week_section .right_section_body ul li:last-child {
margin-bottom: 0;
}
#week_section .right_section_body ul li a img {
width: 128px;
height: 74px;
border-radius: 8px;
margin-right: 16px;
}
#week_section .right_section_body ul li a:after {
display: inline-block;
content: "";
width: 14px;
height: 14px;
background-color: grey;
}
#week_section .right_section_body ul li a .txt_wrap {
width: 129px;
margin-right: 10px;
}
#week_section .right_section_body ul li a .txt_wrap h3 {
font-size: 15px;
}
#week_section .right_section_body ul li a .txt_wrap span {
font-size: 13px;
color: #999999;
}
#game_footer_section a {
display: inline-block;
font-size: 12px;
color: #666;
}
#game_footer_section a:after {
display: inline-block;
content: "";
width: 1px;
height: 11px;
background-color: #ddd;
vertical-align: top;
margin: 4px 10px 0;
}
#game_footer_section a:last-child:after {
content: initial;
}
학습내용 중 어려웠던 점
인기 게임 라운지에서 앞에 숫자와 그 밑에 등락을 표시하는것을 정렬하는 부분이 처음 영상을 따라 갈때 조금 햇갈리는 부분이 있었습니다.
해결방법
이미지안에 다른 content를 표시하는 형태로 이해하니 해결이 되었습니다. 부모를 relative로 주고 안에 자식을 absolute로 줘서 up_and_down_wrap을 3차원적으로 띄워서 별개의 레이아웃 배치를 가지도록 하고 count_wrap기준으로 left와 bottom값을 조정해서 맞추는 식으로 이해했습니다.
학습소감
공통으로 클래스를 빼서 작업하는 방식에 어느정도 익숙해져서 기존에 선택자를 전부 적어서 하는것보다 많은 시간이 단축되고 있고 중간에 잘못된 표기나 이런거를 짚어주었고, 기존 레이아웃 배치를 응용해서 다양한 배치를 할수 있다는 것을 알수 있었습니다.
Author And Source
이 문제에 관하여(2021.06.29 (네이버 게임 3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lstem12/2021.06.29-naver-game-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
