2021.08.06네이버게임2

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

오늘의 강의 내용

* 네이버게임 왼쪽 상단부분 카피캣

카피캣 영역인 네이버게임 왼쪽 상단부분

네이버게임 카피캣 완료된 모습

<!-- game.html언어 -->
<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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/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>롤 패치</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/90x50" class="blog_thumbnail">
							</a>
						</li>
					</ol>


					<a href="#" class="btn_circle icon_arrow"></a>

				</div>

			</div>

<!-- style.css언어 -->
#game_main .left .left_banner {
	overflow: hidden;
	width: 900px;
	height: 120px;
	border-radius: 12px;

	margin-bottom: 24px;
}

#game_main .left .left_banner a {
	display: block;
	width: 100%;
	height: 100%;
}

#game_main .left .left_banner img {
	width: 100%;
}


.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 {
	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 {

}

.game_section .section_middle_nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px 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 .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: gray;
}



#game_section_1 {

}

#game_section_1 .section_btn_wrap {
	
}

#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 {

}

#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_section_1 ol li .game_thumbnail {
	border-radius: 8px;
	margin-right: 10px;
}

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

  • id가 class보다 css우선순위가 높다

  • class영역을 따로 공통된요소의 값을 지정 해놓으면 차후에 수정하기 용이하다. 실무에서 많이 사용되는 방법이다.

강의를 끝난후 소감

class활용을 적재적소에 잘쓰면 소스코드 가독성이 높아질거같다.

힘든점, 문제점

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

개선방안

class를 이용하여 전에 하였던 소스코드를 줄이는 연습을 해봐야겠다.

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

2021.08.05네이버게임1

다음 포스트

2021.08.09네이버게임3

0개의 댓글