8月10日Verlog
学習の内容
https://game.naver.com/
[hmtl]
[css]
[html]の内容を1列(y軸方向)で中央に揃えます.
※wrapを適用しない場合は、一列(x軸方向)に並べてサイズを調整します.
[html]
[html]
[css] count wrap導入方法 flexの中心ソート、countとup and down wrapは中心ソートです. countだけが中心に立ちたいとき->up and down wrapで絶対位置を与えます.(親範囲基準を移動するには、親ラベルに相対位置を設定する必要があります.)これでflexの影響を受けません. equalはup,downとはサイズが異なるのでequalにもう1つの余白-左を付けて移動させます.
[html]
[html]
[html]
NAVERゲーム実習#4
https://game.naver.com/
4. Main Right
こうぞう
[hmtl]
<div class="game_main_right">
<div id="visitor_section" class="right_section"></div>
<div id="popular_section_1" class="right_section rank_section"></div>
<div id="popular_section_2" class="right_section rank_section"></div>
<div id="game_news_section" class="right_section"></div>
<div id="game_week_section" class="right_section"></div>
<div id="game_footer_section"></div>
</div>
class:right sectionデフォルト
[css]
.right_section {
background-color: #ffffff;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
border-radius: 12px;
padding: 30px;
margin-bottom: 24px;
}
.right_section .title_wrap h2 {
font-size: 17px;
font-weight: 900;
}
.right_section .title_wrap a {
font-size: 13px;
font-weight: 400;
color: #444;
}
.right_section .right_section_body {
margin-top: 20px;
}
(1) visitor section
[html]
<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="txt_wrap">
<p>관심있는 게임을 검색해보세요.</p>
<div class="input_wrap">
<input type="text" placeholder="라운지 검색">
<button type="button" class="btn_search"></button>
</div>
</div>
</div>
</div>
[css]#visitor_section .right_section_body .txt_wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#visitor_section .right_section_body .txt_wrap p {
font-size: 13px;
color: #9da5b6;
text-align: center;
margin-top: 20px;
}
#visitor_section .right_section_body .txt_wrap .input_wrap {
position: relative;
overflow: hidden;
width: 250px;
height: 44px;
background-color: #f5f6fa;
border-radius: 12px;
margin-top: 18px;
}
#visitor_section .right_section_body .txt_wrap .input_wrap input {
position: absolute;
width: calc(100% - 44px);
height: 100%;
background-color: transparent;
border: none;
padding: 10px 16px;
}
#visitor_section .right_section_body .txt_wrap .input_wrap input:focus {
outline: none;
}
#visitor_section .right_section_body .txt_wrap .input_wrap input::placeholder {
font-size: 15px;
color: grey;
}
#visitor_section .right_section_body .txt_wrap .input_wrap .btn_search {
position: absolute;
width: 44px;
height: 100%;
background-color: grey;
right: 0;
}
※wrapを適用しない場合は、一列(x軸方向)に並べてサイズを調整します.
(2) popular section 1
[html]
<div id="popular_section_1" class="right_section rank_section">
<div class="title_wrap game_flex_between">
<h2>인기 게임 라운지 TOP</h2>
<a href="#" class="more">더보기</a>
</div>
<div class="right_section_body">
<ol>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">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>
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">2</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">핵앤슬래시 MMORPG</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">
<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>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">
<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">서바이벌 슈팅</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">
<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>
</a>
</li>
</ol>
<p class="time">2021.08.10 업데이트</p>
</div>
</div>
(3) popular section 2
[html]
<div id="popular_section_2" class="right_section rank_section">
<div class="title_wrap game_flex_between">
<h2>급상승 게임 라운지 TOP5</h2>
<a href="#" class="more">더보기</a>
</div>
<div class="right_section_body">
<ol>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">1</span>
</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>
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<div class="count_wrap">
<span class="count">2</span>
</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>
</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/55">
<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">4</span>
</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>
</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/55">
<i class="chk"></i>
</div>
<div class="txt_wrap">
<h3>끄투</h3>
<span class="genre">끝말잇기</span>
</div>
</a>
</li>
</ol>
<p class="time">2021.08.10 14:00 업데이트</p>
</div>
</div>
class:rank sectionデフォルト
[css]
.rank_section .right_section_body ol li {
margin-bottom: 16px;
}
.rank_section .right_section_body ol li:last-child {
margin-bottom: 0;
}
.rank_section .right_section_body ol li a {
width: 100%;
}
.rank_section .right_section_body ol li a:after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-color: lightgrey;
}
.rank_section .right_section_body .count_wrap {
position: relative;
width: 25px;
}
.rank_section .right_section_body .count_wrap .count {
font-size: 17px;
font-weight: 700;
font-style: italic;
}
.rank_section .right_section_body .count_wrap .up_and_down_wrap {
position: absolute; -> flex의 영향을 받지 않는다.
top: 11px;
}
.rank_section .right_section_body .count_wrap .up_and_down_wrap .equal {
display: inline-block; -> margin-left 적용시키기 위해서
width: 5px;
height: 2px;
background-color: lightgrey;
margin-left: 3px;
}
.rank_section .right_section_body .count_wrap .up_and_down_wrap .up {
font-size: 10px;
color: red;
}
.rank_section .right_section_body .count_wrap .up_and_down_wrap .up:before {
content: "";
display: inline-block;
width: 5px;
height: 2px;
background-color: red;
margin: 0 1px 2px 0;
}
.rank_section .right_section_body .count_wrap .up_and_down_wrap .down {
font-size: 10px;
color: blue;
}
.rank_section .right_section_body .count_wrap .up_and_down_wrap .down:before {
content: "";
display: inline-block;
width: 5px;
height: 2px;
background-color: blue;
margin: 0 1px 2px 0;
}
.rank_section .right_section_body .image_wrap {
position: relative;
width: 55px;
height: 55px;
}
.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: #4e41db;
border-radius: 50%;
top: -2px;
right: -2px;
}
.rank_section .right_section_body .txt_wrap {
margin: 0 50px 0 14px;
}
.rank_section .right_section_body .txt_wrap h3 {
width: 135px;
font-size: 15px;
line-height: 19px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rank_section .right_section_body .txt_wrap .genre {
font-size: 13px;
line-height: 15px;
color: #999;
}
.rank_section .right_section_body .time {
margin-top: 13px;
font-size: 13px;
color: #999;
}
(4) game news section
[html]
<div id="game_news_section" class="right_section">
<div class="title_wrap game_flex_between">
<h2>e스포츠 주요 뉴스</h2>
<a href="#" class="more">더보기</a>
</div>
<div class="right_section_body">
<ul>
<li><a href="#"><strong>페이커-쇼메이커가 생각하는 초시계의 가치</strong></a></li>
<li><a href="#"><strong>'1위 리브 샌박·농심 3위 DK 4위 T1' 2021 LCK 서머 8주차 순위</strong></a></li>
<li><a href="#">[LPL Report] '한 번도 경험해보지 못한 성적' iG, 내년엔 다를까?</a></li>
<li><a href="#">[LPL] 정규시즌 1위 일등공신 ‘도인비’, 9주차 MVP 선정</a></li>
<li><a href="#">[LCK CL] T1 역습 허용해 마지막 경기 패배, 프레딧-한화생명은 마지막 기회 얻어</a></li>
<li><a href="#">[LCK 서머] PO 순위 결정 짓는 메인 매치 '담원 vs 리브', '농심 vs 젠지'</a></li>
<li><a href="#">[LCS] 팀 리퀴드-EG, 승자조 2R 진출...'퍽즈'의 C9는 패자조行</a></li>
<li><a href="#">[오피셜] 이스타V5, 스웨덴 게임단 NIP와 합병 발표</a></li>
<li><a href="#">[영상 인터뷰] '페이트' 유수혁 "처음 해보는 공동 1등…뜻깊다"</a></li>
<li><a href="#">[LCK CL] PO 2R 직행 티켓의 주인공, 젠지와 아프리카 프릭스 2군</a></li>
</ul>
</div>
</div>
[css]#game_news_section ul li {
margin-bottom: 5px;
}
#game_news_section ul li:last-child {
margin-bottom: 0;
}
#game_news_section ul li a {
display: block;
width: 100%;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10px;
}
#game_news_section ul li a:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
background-color: grey;
vertical-align: top;
margin: 10px 5px 0 0;
}
(5) game week section
[html]
<div id="game_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 class="genre">오픈 월드 액션 RPG, PC</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 class="genre">전력, 모바일</span>
</div>
</a>
</li>
</ul>
</div>
</div>
[css]#game_week_section li:first-child {
margin-bottom: 16px;
}
#game_week_section img {
width: 128px;
height: 72px;
border-radius: 8px;
margin-right: 16px;
}
#game_week_section .txt_wrap h3 {
font-size: 15px;
}
#game_week_section .txt_wrap .genre {
font-size: 13px;
color: #999;
}
(6) game footer section
[html]
<div id="game_footer_section">
<a href="#">네이버 이용약관</a>
<a href="#">네이버 게임 운영정책</a>
<a href="#">개인정보처리 방침</a>
<a href="#">네이버 게임 고객센터</a>
<a href="#">서비스 소개 및 제휴 안내</a>
<p>ⓒ NAVER Corp.</p>
</div>
[css]#game_footer_section {
margin-left: 10px;
}
#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;
background-color: #ddd;
margin: 1px 8px 0;
vertical-align: top;
}
#game_footer_section p {
font-size: 12px;
font-weight: 700;
color: #666;
margin-top: 4px;
}
Reference
この問題について(8月10日Verlog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/810Velogテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol