Day 30. 네이버 게임 왼쪽 영역 1

SUN·2021년 8월 6일
0

08월 06일

1. 학습 내용

광고 ~ 게임 라운지 인기글 (섹션 1 )

HTML

<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/900px*120px">
				</a>
			</div>

			<div id="game-section-1" class="game-section">
				<div class="section-title-wrap game-flex-between">
					<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 class="game-flex-start">
						<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/38px" 
							class="game-thumbnail">
							<div class="txt-info">
								<h3>롤 패치</h3>
								<div class="source-wrap">
									<span class="game">리그 오브 레전드</span>
									<span class="author">송태민</span>
									<span class="level">LV8</span>
									<span class="rank">3</span>
								</div>
							</div>
							<img src="https://via.placeholder.com/90px*50px" 
							class="blog-thumbnail">
						</a>
					</li>
                    - 여러개 복붙하여 구성하기
				</ol>

				<a href="#" class="btn-circle icon-arrow"></a>
			</div>

CSS

#game-main {
	padding-bottom: 300px;}

#game-main .game-container {
	align-items: stretch;}

#game-main .left {
	width: 900px;}

#game-main .left .left-banner {
	width: 900px;
	height: 120px;

	border-radius: 12px;

	overflow: hidden;
	/* left banner를 제외한 모든 요소를 히든처리 */

	margin-bottom: 24px;}

#game-main .left .left-banner a {
	display: block;
	width: 100%;
	height: 100%;}

#game-main .left .left-banner img {
	width: 100%;
	height: 100%;}


/* 공통된 부분을 .game-section으로 묶기 */
.game-section {
	position: relative;

	background-color: #ffffff;
	box-shadow: 0 2px 30px 0 rgb(0, 0, 0 / 6%);
	border-radius: 12px;

	padding: 27px 30px 40px;
    margin-bottom: 40px;}

.game-section .section-title-wrap {
	align-items: center;}

.game-section .section-title-wrap h2 {
	font-size: 19px;
	font-weight: 400;}

.game-section .section-middle-nav ul {
	border-bottom: solid 1px rgba(0, 0, 0, 0.07);}

.game-section .section-middle-nav li {
	margin-bottom: -1px;}

.game-section .section-middle-nav li a {
	display: block;
	padding: 14px;
	border-bottom: solid 3px transparent;
	color: #777;}

.game-section .section-middle-nav li a.active {
	border-bottom: solid 3px #7776ff;
	font-weight: 700;
	color: #7776ff;}
    
.game-section .section-body-wrap {
margin-top: 18px;}
    
    
/* 하단 가운데 모양 */
.game-section .btn-circle {
	position: absolute;
	width: 55px;
	height: 55px;

	background-color: #ffffff;

	border-radius: 50%;
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);

	bottom: -27.5px;
	left: 50%;
	transform: translateX(-50%);}

.game-section .btn-circle.icon-arrow {
	background-color: grey;}
    
.game-section .btn-circle.icon-plus {
	background-color: blue;}
    
    

#game-section-1 .section-title-wrap .section-btn-wrap a.active {
	color: #7776ff;}

#game-section-1 .section-title-wrap .section-btn-wrap a {
	font-size: 14px;
	font-weight: 700;
	color: #9da5b6;}

#game-section-1 .section-title-wrap .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 li a .game-thumbnail {
	margin-right: 10px;

	border-radius: 8px;}

#game-section-1 ol li .txt-info {
	width: 690px;

	margin-right: 10px;}

#game-section-1 ol li .txt-info h3 {
	font-size: 16px;
	font-weight: 600;

	margin-bottom: 3px;}

#game-section-1 ol li .txt-info .source-wrap .game {
	font-size: 13px;
	color: #858894;

	margin-right: 5px;}

#game-section-1 ol li .txt-info .source-wrap .author {
	font-size: 13px;
	color: #858894;

	margin-right: 5px;}

#game-section-1 ol li .txt-info .source-wrap .level {
	font-size: 13px;
	color: #858894;

	margin-right: 5px;}

#game-section-1 ol li .txt-info .source-wrap .rank {
	font-size: 13px;
	color: #858894;}

#game-section-1 ol li .blog-thumbnail {
	border-radius: 8px;}

생생 게임뉴스(섹션 2) ~ 오리지널 시리즈(섹션 3)

HTML

			<div id="game-section-2" class="game-section">
				<div class="section-title-wrap game-flex-between">
					<h2 class="font-19">생생 주요 게임 뉴스</h2>
					<a href="#" class="more">더보기</a>
				</div>

				<div class="section-body-wrap">
					<div class="image-txt-wrap">
						<div class="image-txt game-flex-start">
							<img src="https://via.placeholder.com/180px*100px">
							<div class="txt">
								<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
								<span class="source">게임메카</span>
							</div>
						</div>
						<div class="image-txt game-flex-start">
							<img src="https://via.placeholder.com/180px*100px">
							<div class="txt">
								<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
								<span class="source">게임메카</span>
							</div>
						</div>
					</div>
					
					<ul>
						<li>
							<a href="#" class="game-flex-between">
								<h3 class="title">라이엇 게임즈 라이엇 게임즈 라이엇 게임즈 라이엇 게임즈 라이엇 게임즈 라이엇 게임즈 라이엇 게임즈</h3>
								<span class="source">인벤</span>
							</a>
						</li>
                        - 4개 만들기
                        
					</ul>
				</div>
			</div>

섹션 3은 섹션 2을 복사하여 커스텀해서 사용하기

			<div id="game-section-3" 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 game-m-t-20">
  - 공통 부분에서 마진탑 20을 클래스로 만들어서 사용 / 맨 위 항목은 주지 않고 두번째 줄로 떨어지는 것부터 적용
  
  
  
							<img src="https://via.placeholder.com/180px*100px">
							<div class="txt">
								<span class="category">에픽뷰</span>
     -에픽뷰 스팬태그를 추가
								<h3 class="title">라이엇 게임즈 대란 종결될까? 칼빼든 엔비디아</h3>
								<span class="source">게임메카</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">게임메카</span>
							</div>
						</div>
						
					</div>
				</div>

				<a href="#" class="btn-circle icon-plus"></a>
   - 기존의 아이콘 애로우를 가져와 플러스로 만들기
			</div>

CSS

.game-section .section-body-wrap .image-txt-wrap {
	display: flex;
	flex-direction: row;
	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 .image-txt img {
	width: 180px;
	height: 100px;

	border: solid 1px rgba(0, 0, 0, 0.06);
	border-radius: 8px;}

.game-section .section-body-wrap .image-txt .txt {
	width: 212px;
	margin-left: 15px;}

.game-section .section-body-wrap .image-txt .txt .title {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;}

.game-section .section-body-wrap .image-txt .txt .source {
	margin-top: 3px;

	font-size: 13px;
	color: #999;}
  • 다시 활용할 수 있는 공통된 부분이 많기 때문에 따로 묶어서 입력#game-section-2 .section-title-wrap .more {
    font-size: 13px;
    font-weight: 400;}
#game-section-2 .section-body-wrap ul {
	margin-top: 25px;}

#game-section-2 .section-body-wrap li {
	margin-bottom: 11px;}

#game-section-2 .section-body-wrap li:last-child {
	margin-bottom: 0px;}


#game-section-2 .section-body-wrap ul li a .title {
	width: 776px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;}

#game-section-2 .section-body-wrap ul li a .source {
	font-size: 13px;
	font-weight: 400;}

#game-section-3 .section-body-wrap .image-txt .category {
	display: block;

	font-size: 13px;
	color: #7776ff;

	margin-bottom: 3px;}

2. 학습 중 어려웠던 점

공통된 부분을 따로 빼내어 제작하는 것이 조금 복잡하다.

3. 해결방안

다시한번 찬찬히 살펴본다.

4. 학습 소감

난이도가 어려워졌지만 집중해서 풀어나가고 싶다.

profile
SUN
안녕하세요!
이전 포스트

Day 29 네이버 게임 상단영역

다음 포스트

Day 31. 네이버 게임 왼쪽 영역 2

0개의 댓글

관련 채용 정보