[대구AI스쿨] 개발일지 30일차 210806
학습내용
1. 네이버 게임 (2)
1) 게임 왼쪽 영역 (1)
<main role="main" id="game-main">
<div class="game-container game-flex-between">
<div class="left">
<div class="left-banner game-shadow">
<a href="#">
<img src="https://via.placeholder.com/900x120">
</a>
</div>
<div id="game-section-1" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">게임 라운지 인기글</h2>
<div class="section-btn-wrap">
<a href="#" class="active">전체</a>
<a href="#">joined</a>
</div>
</div>
<nav class="section-middle-nav">
<ul>
<li><a href="#" class="active">공략</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</nav>
<ol>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
</ol>
<a href="#" class="btn-circle icon-arrow"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
</div>
<div class="right">
</div>
</div>
</main>
<main role="main" id="game-main">
<div class="game-container game-flex-between">
<div class="left">
<div class="left-banner game-shadow">
<a href="#">
<img src="https://via.placeholder.com/900x120">
</a>
</div>
<div id="game-section-1" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">게임 라운지 인기글</h2>
<div class="section-btn-wrap">
<a href="#" class="active">전체</a>
<a href="#">joined</a>
</div>
</div>
<nav class="section-middle-nav">
<ul>
<li><a href="#" class="active">공략</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</nav>
<ol>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
<li>
<a href="#" class="game-flex-start">
<img src="https://via.placeholder.com/38" class="game-thumbnail">
<div class="txt-info">
<h3>롤 패치노트 11.11 간단 요약! 돌격 넥서스 추가 및 신규 프로젝트 스킨 업데이트</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">MOVA</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
</ol>
<a href="#" class="btn-circle icon-arrow"></a>
<!-- btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 -->
</div>
</div>
<div class="right">
</div>
</div>
</main>
css↓
/* main */
#game-main {
margin-top: 24px;
}
#game-main .game-container {
align-items: stretch;
}
/* main 왼쪽영역 */
#game-main .left {
width: 900px;
/*height: 2000px;*/
/*background-color: yellow;*/
padding-bottom: 200px;
}
#game-main .left .left-banner {
/*width: 900px;*/
height: 120px;
border-radius: 12px;
/* 여기까지만 입력하면 border-radius가 적용되지 않는다. left-banner 안의 img가 들어가 있기 때문에 img는 border-radius가 적용되지 않은 상태이다. */
/* overflow: hidden;으로 공간을 벗어난 부분을 보이지 않게 만들어 준다 */
overflow: hidden;
margin-bottom: 24px;
}
#game-main .left .left-banner a {
display: block;
/*width: 100%;*/
/*height: 100%;*/
/* width와 height값을 각 부모태그마다 설정을 하였는데, 100%로 입력한 부분은 주석처리를 해도 부모의 공간크기를 상속받는 것을 확인할 수 있었다. */
}
#game-main .left .left-banner img {
width: 100%;
height: 100%;
}
/* game-section */
.game-section {
position: relative;
background-color: #fff;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
border-radius: 12px;
padding: 27px 30px 40px;
margin-bottom: 24px;
/* btn-circle이 포함된 game-section에서는 margin-bottom을 39px로 설정할 것 */
/* game-section에서 margin-bottom을 39px로 설정하면 여기 설정된 24px과 겹쳐진다. */
/* 각 섹션의 id에서 margin-bottom: 39px;을 작성해야한다. */
}
.game-section .section-title-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.game-section .section-title-wrap h2 {
font-size: 19px;
font-weight: 400;
}
.game-section .section-middle-nav {
margin-bottom: 20px;
}
.game-section .section-middle-nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
/*
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
*/}
.game-section .section-middle-nav li {
}
.game-section .section-middle-nav a {
display: block;
padding: 14px;
border-bottom: solid 3px transparent;
color: #777;
}
.game-section .section-middle-nav a.active {
border-bottom: solid 3px #7776ff;
font-weight: 700;
color: #7776ff;
}
.game-section .section-body-wrap {
margin-bottom: 18px;
}
.game-section .section-body-wrap .image-txt-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.game-section .section-body-wrap .image-txt {
width: 407.5px;
}
.game-section .section-body-wrap img {
width: 180px;
height: 100px;
border-radius: 8px;
border: solid 1px rgba(0, 0, 0, 0.06);
margin-right: 15px;
}
.game-section .section-body-wrap .txt {
width: 212px;
}
.game-section .section-body-wrap .title {
font-size: 15px;
font-weight: 600;
line-height: 20px;
margin-bottom: 3px;
}
.game-section .section-body-wrap .source {
font-size: 13p;
color: #999;
}
.game-section .btn-circle {
position: absolute;
width: 55px;
height: 55px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 50px 0 rgb(0 0 0 / 6%);
bottom: -27.5px;
left: 50%;
transform: translateX(-50%);
/* translateX(-50%)는 오브젝트의 현재 위치에서 오브젝트의 반 만큼 왼쪽으로 이동 */
/* translateY(50%)는 오브젝트의 현재 위치에서 오브젝트의 반 만큼 오른쪽으로 이동 */
}
.game-section .btn-circle.icon-arrow {
background-color: lightsalmon;
}
.game-section .btn-circle.icon-plus {
background-color: lightblue;
}
/* game-section-1 */
#game-section-1 {
margin-bottom: 39px;
}
#game-section-1 .section-btn-wrap a {
font-size: 14px;
color: #9da5b6;
font-weight: 700;
}
#game-section-1 .section-btn-wrap a.active {
color: #7776ff;
}
#game-section-1 .section-btn-wrap a:last-child {
margin-left: 14px;
}
#game-section-1 ol li {
padding: 10px 0;
border-bottom: solid 1px rgba(0, 0, 0, 0.03);
}
#game-section-1 ol img { /* game-tumbnail, blog-thumbnail */
border-radius: 8px;
}
#game-section-1 ol .game-thumbnail {
margin-right: 10px;
}
#game-section-1 ol .txt-info {
width: 690px;
margin-right: 10px;
}
#game-section-1 ol .txt-info h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 3px;
}
#game-section-1 ol .txt-info .source-wrap span {
font-size: 13px;
color: #858894;
margin-right: 5px;
}
#game-section-1 ol .txt-info .source-wrap .rank {
margin-right: 0;
}
어려웠던 점과 해결방안
-
각 부모태그마다 width와 height값을 작성해 주었는데, 100%로 입력한 값에는 주석처리를 해 보았다.
부모의 공간 크기를 상속받아서 그대로 적용된 것을 확인함
transform: translateX(50%);
오브젝트의 현재 위치를 기준으로, 오브젝트의 반 만큼 오른쪽으로 이동
transform: translateX(-50%);
오브젝트의 현재 위치를 기준으로, 오브젝트의 반 만큼 왼쪽으로 이동
학습소감
각 부모태그마다 width와 height값을 작성해 주었는데, 100%로 입력한 값에는 주석처리를 해 보았다.
부모의 공간 크기를 상속받아서 그대로 적용된 것을 확인함
transform: translateX(50%);
오브젝트의 현재 위치를 기준으로, 오브젝트의 반 만큼 오른쪽으로 이동
transform: translateX(-50%);
오브젝트의 현재 위치를 기준으로, 오브젝트의 반 만큼 왼쪽으로 이동
배웠던 내용이라도 헷갈리면 무조건 다시 찾아볼 것
Author And Source
이 문제에 관하여([대구AI스쿨] 개발일지 30일차 210806), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seona056/대구AI스쿨-개발일지-30일차-210806저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)