학습내용

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>

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;
}

---

어려웠던 점과 해결방안

1. 각 부모태그마다 width와 height값을 작성해 주었는데, 100%로 입력한 값에는 주석처리를 해 보았다.
   부모의 공간 크기를 상속받아서 그대로 적용된 것을 확인함

• transform: translateX(50%);
  오브젝트의 현재 위치를 기준으로, 오브젝트의 반 만큼 오른쪽으로 이동
• transform: translateX(-50%);
  오브젝트의 현재 위치를 기준으로, 오브젝트의 반 만큼 왼쪽으로 이동

---

학습소감

배웠던 내용이라도 헷갈리면 무조건 다시 찾아볼 것