2021.08.10네이버게임4

dogyeomyeo4444·2021년 8월 10일
대구AI스쿨
0

오늘의 강의 내용

* 네이버게임 오른쪽 부분 카피캣

카피캣영역인 네이버게임 오른쪽부분

네이버게임 오른쪽부분 카피캣 완료한 모습

<!-- game.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 rank_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/55">
									<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/55">
									<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/55">
									<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 red">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/55">
									<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/55">
									<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="popular_section_2" class="right_section rank_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/55">
									<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/55">
									<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/55">
									<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 red">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/55">
									<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/55">
									<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/128X74">
									<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/128X74">
									<div class="txt_wrap">
										<h3>AFK삼국지</h3>
										<span>카드, 모바일</span>
									</div>
								</a>
							</li>
						</ul>
					</div>

				</div>

				<div id="game_banner_section" class="right_section">
					<a href="#">
						<img src="https://via.placeholder.com/357X200">
					</a>
				</div>

				<div id="game_footer_section">
					<a href="#">네이버 이용약관</a>
					<a href="#">네이버 게임 운영정책</a>
					<a href="#">개인정보처리 방침</a>
					<a href="#">네이버 게임 고객센터</a>
				</div>

			</div>











		</div>
        
<!-- style.css언어 -->
#game_main .right {
	width: 358px;
}

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

	padding: 30px;
	margin: 24px;
}

.right_section .title_wrap {

}

.right_section .title_wrap h2 {
	font-size: 17px;
	font-weight: 400;
}

.right_section .title_wrap a {
	font-size: 13px;
	font-weight: 400;
	color: #444;
}

.right_section .right_section_body {
	margin-top: 20px;
}


#visitor_section .text_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#visitor_section .text_wrap p {
	margin-top: 20px;
	font-size: 11px;
	color: #9da5b6;
	text-align: center;
}

#visitor_section .text_wrap .input_wrap {
	overflow: hidden;
	position: relative;
	margin-top: 18px;
	width: 250px;
	height: 44px;
	background-color: #f5f6fa;
	border-radius: 12px;
}

#visitor_section .text_wrap .input_wrap input {
	width: calc(100% - 44px);
	height: 100%;
	padding: 10px 16px;
	border: none;

	font-size: 15px;
	background-color: transparent;
}

#visitor_section .text_wrap .input_wrap input:focus {
	outline: none;
}

#visitor_section .text_wrap .input_wrap button {
	width: 44px;
	height: 100%;
	background-color: gray;
}


.rank_section .right_section_body {

}

.rank_section .right_section_body ol {
	
}

.rank_section .right_section_body li {
	margin-bottom: 16px;
}

.rank_section .right_section_body li:after {
	content: '';
	width: 14px;
	height: 14px;
	background-color: gray;
}

.rank_section .right_section_body li:last-child {
	margin-bottom: 0;
}

.rank_section .right_section_body li .count_wrap {
	position: relative;
	width: 25px;
	text-align: center;
	margin-right: 5px;
}

.rank_section .right_section_body .count_wrap .count {
	font-size: 17px;
	font-weight: 700;
}

.rank_section .right_section_body .count_wrap .count.red {
	color: #ff4c51;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap {	
	position: absolute;
	left: 6px;
	bottom: -13px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .equal {
	display: inline-block;
	width: 5px;
	height: 3px;
	background-color: gray;
	margin-left: 3px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap span {
	font-size: 10px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap span:before {
	content: '';
	display: inline-block;
	position: relative;
	width: 7px;
	height: 3px;
	top: -2px;
	margin-right: 1px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .up {
	color: red;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .up:before {
	background-color: red;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .down {
	color: blue;	
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .down:before {
	background-color: blue;	
}

.rank_section .right_section_body .image_wrap {
	position: relative;
	width: 55px;
	height: 55px;
	margin-right: 5px;
}

.rank_section .right_section_body .image_wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 12px;
}

.rank_section .right_section_body .image_wrap .chk {
	position: absolute;
	width: 21px;
	height: 21px;
	background-color: gray;
	border-radius: 50%;

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

.rank_section .right_section_body .txt_wrap {
	
}

.rank_section .right_section_body .txt_wrap h3 {
	width: 182px;
	font-size: 15px;

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

	margin-right: 10px;
}

.rank_section .right_section_body .txt_wrap .genre {
	font-size: 13px;
	color: #999;
}

.rank_section .right_section_body .time {
	margin-top: 12px;
	font-size: 13px;
	color: #999;
}


#news_section .right_section_body ul {

}

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

#news_section .right_section_body ul a:before {
	content: '';
	position: relative;
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #9da5b6;

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


#week_section li {
	margin-bottom: 16px;
}

#week_section li:last-child {
	margin-bottom: 0;
}

#week_section img {
	width: 128px;
	height: 74px;
	border-radius: 8px;

	margin-right: 10px;
}

#week_section .txt_wrap h3 {
	font-size: 15px;
}

#week_section .txt_wrap span {
	font-size: 13px;
	color: #999999;
}


#game_banner_section {
	position: relative;
	width: 310px;
	height: 200px;
	border-radius: 16px;

	margin: 24px;
	padding: 0;

	overflow: hidden;
}

#game_banner_section img {
	width: 100%;
	height: 100%;
}

#game_footer_section {

}

#game_footer_section a {
	display: inline-block;
	font-size: 12px;
	color: #666;

	margin-left: 30px;
}

#game_footer_section a:nth-child(2),
#game_footer_section a:nth-child(4) {
	margin-left: 0;
}

#game_footer_section a:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 1px 10px 0;
	background-color: #ddd;
	vertical-align: top;
}

  • 공간을 만드는 태그에다가 텍스트를 넣으면 안된다

  • position: absolute 를 사용하게 되면 flex를 적용한 영역안에서 독립적으로 행동하게 된다. 즉 flex의 영향을 받지않게 된다.

강의를 끝난후 소감

생략한 부분을 직접 코드를 짜봤는데 나름 막히지 않아서 흡족스러웠다.

힘든점, 문제점

이번강의 에서 딱히 힘든점은 없었다.

개선방안

연습과 반복은 절대 거짓말을 하지않는것 같다. 연습을 게을리 하지말아야 겠다

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.08.09네이버게임3

다음 포스트

2021.08.11네이버이스포츠

0개의 댓글