2021.06.29(NAVERゲーム3)
97162 ワード
学習の内容
[NAVERゲーム右側部分]
<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;
}
学習内容の難点
人気ゲームラウンジでは、前の数字と下の上がり下がりのソート部分が、初めてビデオに追随したときに太陽の光の部分があります.
解決策
画像に異なる内容が表示されると理解され,この点が解決された.親を子に相対的に絶対的に親に与え、up and down wrapを3次元オフセットして個別のレイアウトレイアウトを持たせ、count wrapに基づいてleftとbottom値を調整することで理解できます.
学習の心得.
共通のクラスからクラスを削除することに慣れている可能性があります.これにより、既存のすべての選択者を書くよりも時間が短縮され、誤ったタグやそのような内容が途中で指摘され、既存のレイアウトを適用して異なる部署を行うことができます.
Reference
この問題について(2021.06.29(NAVERゲーム3)), 我々は、より多くの情報をここで見つけました https://velog.io/@lstem12/2021.06.29-naver-game-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol