Day 32. 네이버 게임 오른쪽 영역

SUN·2021년 8월 10일
0

08월 10일

1. 학습 내용

HTML

<div class="right">
			
			<div id="visitor-section" class="right-section">
				
				<div class="title-wrap game-flex-between">
					<h2>최근 방문</h2>
					<a href="#">My 라운지 이동</a>
				</div>

				<div class="right-section-body">
					<div class="text-wrap">
						<p>관심있는 게임을 검색해보세요</p>
						<div class="input-wrap game-flex-start">
							<input type="" placeholder="라운지 검색">
							<button type="button"></button>
						</div>
					</div>
				</div>

			</div>

			<div id="popular-section-1" class="right-section">
				
				<div class="title-wrap game-flex-between">
					<h2>인기 게임 라운지 top5</h2>
					<a href="#">더보기</a>
				</div>

				<div class="right-section-body">
					<ol>
						<li class="game-flex-start">
							<div class="count-wrap">
								<span class="count red">1</span>
								<div class="up-and-down-wrap">
									<div class="equal"></div>
								</div>
							</div>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/55px">
								<i class="chk"></i>
							</div>

							<div class="txt-wrap">
								<h3>리그 오브 레전드</h3>
								<span class="genre">MOBA</span>
							</div>
						</li>
						<li class="game-flex-start">
							<div class="count-wrap">
								<span class="count red">2</span>
								<div class="up-and-down-wrap">
									<div class="equal"></div>
								</div>
							</div>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/55px">
								<i class="chk"></i>
							</div>

							<div class="txt-wrap">
								<h3>슈퍼 스트림</h3>
								<span class="genre">RPG</span>
							</div>
						</li>
						<li class="game-flex-start">
							<div class="count-wrap">
								<span class="count">3</span>
								<div class="up-and-down-wrap">
									<div class="equal"></div>
								</div>
							</div>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/55px">
								<i class="chk"></i>
							</div>

							<div class="txt-wrap">
								<h3>피파온라인4</h3>
								<span class="genre">스포츠</span>
							</div>
						</li>
						<li class="game-flex-start">
							<div class="count-wrap">
								<span class="count">4</span>
								<div class="up-and-down-wrap">
									<span class="up">1</span>
								</div>
							</div>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/55px">
								<i class="chk"></i>
							</div>

							<div class="txt-wrap">
								<h3>배틀 그라운드</h3>
								<span class="genre">서바이벌 슈팅</span>
							</div>
						</li>
						<li class="game-flex-start">
							<div class="count-wrap">
								<span class="count">5</span>
								<div class="up-and-down-wrap">
									<span class="down">1</span>
								</div>
							</div>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/55px">
								<i class="chk"></i>
							</div>

							<div class="txt-wrap">
								<h3>로스트 아크</h3>
								<span class="genre">MMORPG</span>
							</div>
						</li>
					</ol>
					<p class="time">2021.06.02 업데이트</p>
				</div>	
			</div>

			<div id="news-section" class="right-section">

				<div class="title-wrap game-flex-between">
					<h2>e-스포츠 주요 뉴스</h2>
					<a href="#">더보기</a>
				</div>

				<div class="right-section-body">

					<ul>
						<li><a href="#">[검찰] 출석 요구서 대구 지검</a></li>
						<li><a href="#">[검찰] 출석 요구서 대구 지검</a></li>
						<li><a href="#">[검찰] 출석 요구서 대구 지검</a></li>
						<li><a href="#">[검찰] 출석 요구서 대구 지검</a></li>
						<li><a href="#">[검찰] 출석 요구서 대구 지검</a></li>
						<li><a href="#">[검찰] 출석 요구서 대구 지검</a></li>
					</ul>

				</div>

			</div>

			<div id="week-section" class="right-section">

				<div class="title-wrap game-flex-between">
					<h2>이번주 신생 라운지</h2>
				</div>

				<div class="right-section-body">
					<ul>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/128px*74px">
								<div class="txt-wrap">
									<h3>무신의 칼</h3>
									<span>MMORPG</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/128px*74px">
								<div class="txt-wrap">
									<h3>삼국지AFK</h3>
									<span>MMORPG</span>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<div id="game-footer-section">
					<a href="#">네이버 이용약관</a>
					<a href="#">네이버 게임 운영정책</a>
					<a href="#">개인정보처리 방침</a>
					<a href="#">네이버 게임 고객센터</a>
					<a href="#">서비스 소개 및 제휴 안내</a>
				
			</div>

		</div>

CSS

#game-main .right {
	width: 358px;}
    - 미리 left와 같이 설정

#visitor-section .right-section-body .text-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;}
/* 내용을 센터 정렬 */

#visitor-section .right-section-body .text-wrap p {
	margin-top: 20px;

	font-size: 13px;
	color: #9da5b6;
	text-align: center;}

#visitor-section .right-section-body .text-wrap .input-wrap {
	margin-top: 18px;
	position: relative;

	width: 250px;
	height: 44px;
	background-color: #f5f6fa;
	border-radius: 12px;
	overflow: hidden;}

#visitor-section .right-section-body .text-wrap .input-wrap input {
	width: calc(100% - 44px);
	height: 100%;
	padding: 10px 16px;
	border: none;
	background-color: transparent;

	font-size: 15px;}

#visitor-section .right-section-body .text-wrap .input-wrap input:focus {
	outline: none;}

#visitor-section .right-section-body .text-wrap .input-wrap button {
	width: 44px;
	height: 100%;
	background-color: grey;}





#popular-section-1 .right-section-body ol li {
	margin-bottom: 16px;}

#popular-section-1 .right-section-body ol li:after {
	content: '';
	width: 14px;
	height: 14px;
	background-color: grey;}
    - 끝쪽 화살표를 만들어줌

#popular-section-1 .right-section-body ol li:last-child {
	margin-bottom: 0;}

#popular-section-1 .right-section-body ol li .count-wrap {
	position: relative;
	width: 25px;
	text-align: center;

	margin-right: 5px;}

#popular-section-1 .right-section-body ol li .count-wrap .count {
	font-size: 17px;
	font-weight: 700;}

#popular-section-1 .right-section-body ol li .count-wrap .count.red {
	color: #ff4c51;}

#popular-section-1 .right-section-body ol li .count-wrap .up-and-down-wrap {
	position: absolute;
	/* layout영역에서 자유롭게 되어  flex의 영향을 받지 않음 */
	left: 6px;
	bottom: -13px;
	/* 그러므로 랭킹 부분의 위치를 조정이 가능 */}

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap .equal {
	display: inline-block;
	/* 가운데 정렬을 해주기 위해 적용 text-align은 inline이나 인라인 블록에서만 적용 */
	width: 5px;
	height: 3px;

	background-color: grey;
	margin-left: 3px;}

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap .up {
	color: red;}

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap .up:before {
	background-color: red;}

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap .down {
	color: blue;}

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap .down:before {
	background-color: blue;}

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap span {
	font-size: 10px;}
    - 공통 부분을 설정(up이나 down일때는 span임)

#popular-section-1 .right-section-body .count-wrap .up-and-down-wrap span:before {
	content: '';
	display: inline-block;
	position: relative;
	width: 7px;
	height: 3px;

	top: -1px;
	margin-right: 1px;}

#popular-section-1 .right-section-body .image-wrap {
	position: relative;

	width: 55px;
	height: 55px;

	margin-right: 5px;}

#popular-section-1 .right-section-body .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;

	border-radius: 12px;}

#popular-section-1 .right-section-body .image-wrap .chk {
	position: absolute;
	width: 21px;
	height: 21px;
	background-color: grey;
	border-radius: 50%;

	top: -2px;
	right: -2px;}



#popular-section-1 .right-section-body .txt-wrap h3 {
	width: 182px;
	font-size: 15px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	margin-right: 10px;}

#popular-section-1 .right-section-body .txt-wrap .genre {
	font-size: 13px;
	color: #999;}

#popular-section-1 .right-section-body .time {
	margin-top: 12px;
	font-size: 13px;
	color: #999;}





#news-section .right-section-body ul li {
	margin-bottom: 5px;}

#news-section .right-section-body ul li:last-child {
	margin-bottom: 0;}

#news-section .right-section-body ul a {
	display: block;}
    - a 태그를 공백 끝까지 설정

#news-section .right-section-body ul a:before {
	position: relative;

	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #9da5b6;

	top: -5px;
	margin-right: 5px;}





#week-section .right-section-body ul li {
	margin-bottom: 16px;}

#week-section .right-section-body ul li:last-child {
	margin-bottom: 0;}


#week-section .right-section-body ul li a img {
	width: 128px;
	height: 74px;

	border-radius: 8px;
	margin-right: 10px;}


#week-section .right-section-body ul li a .txt-wrap h3 {
	font-size: 15px;}

#week-section .right-section-body ul li a .txt-wrap span {
	font-size: 13px;
	color: #999999;}




#game-footer-section a {
	display: inline-block;
	/* 가로로 배치 */
	font-size: 12px;
	color: #666;}

#game-footer-section a:after {
		content: '';
	width: 1px;
	height: 11px;
	display: inline-block;
	background-color: #ddd;

	margin: 1px 10px 0;}

2. 학습 중 어려웠던 점

공통 부분을 공유하는 것은 이해가 조금씩 되고 있고 아직 display의 사용에 대해 어려움을 느끼고 있다.

3. 해결방안

지속적인 공부

4. 학습 소감

혼자서 한다면 하지 못할 것같다.

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

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

다음 포스트

Day 33 네이버 e스포츠 상단 영역

0개의 댓글