8月6日Verlog
学習の内容
https://game.naver.com/
[css]
[html]領域全体に
複数のgameセクションで、cssが繰り返される場合、デフォルト値をタグの親領域に割り当てずにclassとして事前に指定し、サブタグのclassと一致させて、繰り返されるcssを適用する方法.
[css]
[html]
NAVERゲーム実習#2
https://game.naver.com/
0. Default
[css]
.game_shadow {
box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);
}
3. Main Left
こうぞう
<div class="game_main_left">
<div class="banner_left game_shadow"></div>
<div id="game_section_1" class="game_section"></div>
</div>
(1) banner left
[html]
<div class="banner_left game_shadow">
<a href="#">
<img src="https://via.placeholder.com/900x120">
</a>
</div>
[css]#game_main .game_main_left .banner_left {
overflow: hidden;
width: 900px;
height: 120px;
border-radius: 12px;
margin-bottom: 24px;
}
#game_main .game_main_left .banner_left a {
display: block;
width: 100%;
height: 100%;
}
#game_main .game_main_left .banner_left a img {
width: 100%;
height: 100%;
}
overflow: hidden;
を適用し、border−radius外のimg領域を非表示処理する.ゲーム設定のデフォルト値の設定
複数のgameセクションで、cssが繰り返される場合、デフォルト値をタグの親領域に割り当てずにclassとして事前に指定し、サブタグのclassと一致させて、繰り返されるcssを適用する方法.
[css]
.game_section {
position: relative;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);
padding: 27px 30px 40px;
margin-bottom: 40px;
}
.game_section .game_title_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.game_section .game_title_wrap h2 {
font-size: 19px;
font-weight: 900;
}
.game_section .game_middle_nav ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
border-bottom: solid 1px rgba(0, 0, 0, 0.07);
}
.game_section .game_middle_nav ul li a {
display: block;
border-bottom: solid 3px transparent;
font-size: 15px;
color: #777;
margin: 14px 28px 0 0;
padding-bottom: 12px;
}
.game_section .game_middle_nav ul li.active a {
border-bottom: solid 3px #000000;
font-weight: 700;
color: #000000;
}
.game_section .btn_circle {
position: absolute;
width: 55px;
height: 55px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);
bottom: -27.5px;
/*x축 중앙정렬 공식*/
left: 50%;
transform: translateX(-50%);
}
.game_section .btn_circle.icon_arrow {
background-color: grey;
}
※idはclassより優先されるため、デフォルト値はclassとして指定され、idで個別にカスタマイズされます.(2) game section 1
[html]
<div id="game_section_1" class="game_section">
<div class="game_title_wrap">
<h2>게임 라운지 인기 글</h2>
<div class="game_btn_wrap">
<a href="#" class="active">전체</a>
<a href="#">Joined</a>
</div>
</div>
<nav class="game_middle_nav">
<ul>
<li class="active"><a href="#">커뮤니티</a></li>
<li><a href="#">공략+</a></li>
</ul>
</nav>
<ol>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
<li>
<a href="#" class="game_flex_start">
<img class="game_thumbnail" src="https://via.placeholder.com/38">
<div class="txt_info">
<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
<div class="source_wrap">
<span class="game">FIFA 온라인 4</span>
<span class="author">배고픈 끝판왕 2441</span>
<span class="level">LV8</span>
<span class="rank">9</span>
</div>
</div>
<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
</a>
</li>
</ol>
<a href="#" class="btn_circle icon_arrow"></a>
</div>
[css]#game_section_1 .game_title_wrap .game_btn_wrap a {
font-size: 14px;
font-weight: 700;
color: #9da5b6;
}
#game_section_1 .game_title_wrap .game_btn_wrap a.active {
color: #000000;
}
#game_section_1 .game_title_wrap .game_btn_wrap a:last-child {
margin-left: 14px;
}
#game_section_1 ol li {
height: 64px;
border-bottom: solid 1px rgba(0, 0, 0, 0.03);
}
#game_section_1 ol li a {
height: 100%;
}
#game_section_1 ol li a .game_thumbnail {
border-radius: 8px;
margin-right: 10px;
}
#game_section_1 ol li a .txt_info {
width: 692px;
margin-right: 10px;
}
#game_section_1 .txt_info h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 3px;
}
#game_section_1 .txt_info .source_wrap {
font-size: 13px;
}
#game_section_1 .txt_info .source_wrap .game {
font-weight: 500;
color: #444;
margin-right: 5px;
}
#game_section_1 .txt_info .source_wrap .author {
color: #868894;
margin-right: 5px;
}
#game_section_1 .txt_info .source_wrap .level {
color: #868894;
margin-right: 5px;
}
#game_section_1 .txt_info .source_wrap .rank {
color: #868894;
}
#game_section_1 .blog_thumbnail {
border-radius: 8px;
}
Reference
この問題について(8月6日Verlog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/86Velogテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol