Day 31. NAVERゲーム左側エリア2
69107 ワード
08月9日
1.学習内容
人気ゲーム動画(パート4)~急上昇ゲームカフェ(パート6)
HTML
<div id="game-section-4" class="game-section">
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">인기 게임 영상</h2>
</div>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263px*148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원 기아 vs RNC</h3>
<div class="game-flex-between">
<span class="source">리그오브레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263px*148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원 기아 vs RNC</h3>
<div class="game-flex-between">
<span class="source">리그오브레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
</ol>
</div>
</div>
<!-- 섹션 1을 사용하여 커스텀 -->
<div id="game-section-5" class="game-section">
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">이번달 출시 게임</h2>
<a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
</div>
<nav class="section-middle-nav">
<ul class="game-flex-start">
<li><a href="#" class="active">금 05.28</a></li>
<li><a href="#">토 05.29</a></li>
<li><a href="#">일 05.30</a></li>
</ul>
</nav>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<!-- 섹션 3를 사용 -->
<div id="game-section-6" class="game-section">
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">급상승 공식 게임카페</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/80px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
CSS
#game-section-4 .section-body-wrap ol li a {
display: block;}
#game-section-4 .section-body-wrap ol li a .image-wrap {
position: relative;
width: 263px;
height: 148px;
border-radius: 8px;
overflow: hidden;}
#game-section-4 .section-body-wrap ol li a .image-wrap img {
position: absolute;
width: 100%;
height: 100%;}
#game-section-4 .section-body-wrap ol li a .image-wrap .icon-play {
position: absolute;
width: 25px;
height: 25px;
background-color: grey;
left: 10px;
bottom: 12px;}
#game-section-4 .section-body-wrap ol li a .image-wrap .time {
position: absolute;
background-color: rgba(0, 0, 0, .5);
padding: 0 6px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
right: 10px;
bottom: 10px;}
#game-section-4 .section-body-wrap ol li a .image-txt {
margin-top: 10px;
width: 100%;}
#game-section-4 .section-body-wrap ol li a .image-txt h3 {
font-size: 15px;}
#game-section-4 .section-body-wrap ol li a .image-txt .source {
font-size: 13px;
color: #999;}
#game-section-4 .section-body-wrap ol li a .image-txt .count {
font-size: 13px;
color: #999;}
#game-section-5 .section-title-wrap .info {
font-size: 13px;
color: #999999;}
#game-section-5 .section-body-wrap .image-wrap {
position: relative;
width: 190px;
height: 120px;}
#game-section-5 .section-body-wrap .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
border: none;
margin-right: 0;}
#game-section-5 .section-body-wrap .image-wrap .badge {
position: absolute;
display: inline-block;
color: #ffffff;
background-color: #4e41db;
font-size: 15px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
top: -5px;
left: -5px;}
#game-section-5 .section-body-wrap .image-wrap .badge.open {
background-color: red;}
#game-section-5 .section-body-wrap .txt-wrap {
margin-top: 12px;}
#game-section-5 .section-body-wrap .txt-wrap h3 {
font-size: 15px;
font-weight: 600;}
#game-section-5 .section-body-wrap .txt-wrap p {
font-size: 13px;
font-weight: 500;}
#game-section-5 .section-body-wrap .txt-wrap span {
font-size: 13px;
color: grey;}
#game-section-6 .section-body-wrap img {
width: 80px;
height: 80px;
border-radius: 30px;}
- 기존에 설정된 크기를 다시 설정
#game-section-6 .section-body-wrap .txt {
width: 300px;}
- 사진이 줄어든 만큼 넓이도 다시 설정
#game-section-6 .section-body-wrap .category {
font-size: 15px;}
#game-section-6 .section-body-wrap .title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 기존 두줄을 한줄로 만들고 말줄임표
font-size: 13px;
color: #666;}
2.勉強中の難点
前の難点と同じです.
3.ソリューション
構造をよく観察する
4.勉強の心得
ヘルプなしで完成本を作りたい
Reference
この問題について(Day 31. NAVERゲーム左側エリア2), 我々は、より多くの情報をここで見つけました
https://velog.io/@s_ongt_aemin/Day-31.-네이버-게임-왼쪽-영역-2
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
人気ゲーム動画(パート4)~急上昇ゲームカフェ(パート6)
HTML
<div id="game-section-4" class="game-section">
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">인기 게임 영상</h2>
</div>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263px*148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원 기아 vs RNC</h3>
<div class="game-flex-between">
<span class="source">리그오브레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
<li class="game-m-t-20">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/263px*148px">
<i class="icon-play"></i>
<span class="time">01:06:26</span>
</div>
<div class="image-txt">
<h3>담원 기아 vs RNC</h3>
<div class="game-flex-between">
<span class="source">리그오브레전드 네이버 스포츠</span>
<span class="count">17,161</span>
</div>
</div>
</a>
</li>
</ol>
</div>
</div>
<!-- 섹션 1을 사용하여 커스텀 -->
<div id="game-section-5" class="game-section">
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">이번달 출시 게임</h2>
<a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
</div>
<nav class="section-middle-nav">
<ul class="game-flex-start">
<li><a href="#" class="active">금 05.28</a></li>
<li><a href="#">토 05.29</a></li>
<li><a href="#">일 05.30</a></li>
</ul>
</nav>
<div class="section-body-wrap">
<ol class="game-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge open">오픈</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/190px*120px">
<span class="badge">사전예약</span>
</div>
<div class="txt-wrap">
<h3>타이틀</h3>
<p>2021 ~ 05 ~ 28</p>
<span>닌텐도 스위치</span>
</div>
</a>
</li>
</ol>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>
<!-- 섹션 3를 사용 -->
<div id="game-section-6" class="game-section">
<div class="section-title-wrap game-flex-between">
<h2 class="font-19">급상승 공식 게임카페</h2>
</div>
<div class="section-body-wrap">
<div class="image-txt-wrap">
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/80px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
<div class="image-txt game-flex-start game-m-t-20">
<img src="https://via.placeholder.com/180px*100px">
<div class="txt">
<span class="category">에픽뷰</span>
<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
<span class="source">멤버 412,800명</span>
</div>
</div>
</div>
</div>
<a href="#" class="btn-circle icon-plus"></a>
</div>CSS
#game-section-4 .section-body-wrap ol li a {
display: block;}
#game-section-4 .section-body-wrap ol li a .image-wrap {
position: relative;
width: 263px;
height: 148px;
border-radius: 8px;
overflow: hidden;}
#game-section-4 .section-body-wrap ol li a .image-wrap img {
position: absolute;
width: 100%;
height: 100%;}
#game-section-4 .section-body-wrap ol li a .image-wrap .icon-play {
position: absolute;
width: 25px;
height: 25px;
background-color: grey;
left: 10px;
bottom: 12px;}
#game-section-4 .section-body-wrap ol li a .image-wrap .time {
position: absolute;
background-color: rgba(0, 0, 0, .5);
padding: 0 6px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
right: 10px;
bottom: 10px;}
#game-section-4 .section-body-wrap ol li a .image-txt {
margin-top: 10px;
width: 100%;}
#game-section-4 .section-body-wrap ol li a .image-txt h3 {
font-size: 15px;}
#game-section-4 .section-body-wrap ol li a .image-txt .source {
font-size: 13px;
color: #999;}
#game-section-4 .section-body-wrap ol li a .image-txt .count {
font-size: 13px;
color: #999;}
#game-section-5 .section-title-wrap .info {
font-size: 13px;
color: #999999;}
#game-section-5 .section-body-wrap .image-wrap {
position: relative;
width: 190px;
height: 120px;}
#game-section-5 .section-body-wrap .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
border: none;
margin-right: 0;}
#game-section-5 .section-body-wrap .image-wrap .badge {
position: absolute;
display: inline-block;
color: #ffffff;
background-color: #4e41db;
font-size: 15px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
top: -5px;
left: -5px;}
#game-section-5 .section-body-wrap .image-wrap .badge.open {
background-color: red;}
#game-section-5 .section-body-wrap .txt-wrap {
margin-top: 12px;}
#game-section-5 .section-body-wrap .txt-wrap h3 {
font-size: 15px;
font-weight: 600;}
#game-section-5 .section-body-wrap .txt-wrap p {
font-size: 13px;
font-weight: 500;}
#game-section-5 .section-body-wrap .txt-wrap span {
font-size: 13px;
color: grey;}
#game-section-6 .section-body-wrap img {
width: 80px;
height: 80px;
border-radius: 30px;}
- 기존에 설정된 크기를 다시 설정
#game-section-6 .section-body-wrap .txt {
width: 300px;}
- 사진이 줄어든 만큼 넓이도 다시 설정
#game-section-6 .section-body-wrap .category {
font-size: 15px;}
#game-section-6 .section-body-wrap .title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 기존 두줄을 한줄로 만들고 말줄임표
font-size: 13px;
color: #666;}2.勉強中の難点
前の難点と同じです.
3.ソリューション
構造をよく観察する
4.勉強の心得
ヘルプなしで完成本を作りたい
Reference
この問題について(Day 31. NAVERゲーム左側エリア2), 我々は、より多くの情報をここで見つけました
https://velog.io/@s_ongt_aemin/Day-31.-네이버-게임-왼쪽-영역-2
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
構造をよく観察する
4.勉強の心得
ヘルプなしで完成本を作りたい
Reference
この問題について(Day 31. NAVERゲーム左側エリア2), 我々は、より多くの情報をここで見つけました
https://velog.io/@s_ongt_aemin/Day-31.-네이버-게임-왼쪽-영역-2
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について(Day 31. NAVERゲーム左側エリア2), 我々は、より多くの情報をここで見つけました https://velog.io/@s_ongt_aemin/Day-31.-네이버-게임-왼쪽-영역-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol