2021_08_05 개발일지

Yeo Eunhye·2021년 8월 5일
개발일지
0

1) 학습한 내용

오늘은 게임영역에 대해 작업해보았다.

먼저 새로운 게임 파일을 만들어 idex에 게임 카테고리를 추가해 연결시켜준다.

1. Game - Header

- html

<header id="game-header">
		<div class="game-container">
			
			<nav class="game-flex-between">
				<div class="left game-flex-start">
					<h1>
						<a href="#">GAME</a>
					</h1>
					
					<ul class="game-flex-start">
						<li><a href="e-sport.html">e스포츠</a></li>
						<li><a href="#">PC게임</a></li>
					</ul>
				</div>

				<div class="right game-flex-end">
					<div class="search-wrap game-flex-start">
						<input type="text" placeholder="라운지, 게시물 검색">
						<button type="button" class="btn-search"></button>
					</div>

					<div class="ticket-wrap">
						<a href="#" class="btn-ticket">
							<img src="img/ticket.png">
						</a>
						<p class="bubble-msg">응모 티켓 받고 꿀템 도전!</p>
					</div>

					<a href="index.html" class="btn-login">로그인</a>
				</div>	
			</nav>

			<div class="game-events-wrap game-flex-between">
				<div class="event-wrap one">
					<div class="event-title-wrap">
						<img class="imgwh"  src="img/game.png" >
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파 테스트 참가 이벤트
						</h2>
					</div>
				</div>

				<div class="event-wrap two">
					<div class="event-title-wrap">
						<img class="imgwh"  src="img/game.png" >
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파 테스트 참가 이벤트
						</h2>
					</div>
				</div>

				<div class="event-wrap three">
					<div class="event-title-wrap">
						<img class="imgwh"  src="img/game.png" >
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파 테스트 참가 이벤트
						</h2>
					</div>
				</div>
			</div>

		</div>
	</header>

- css 디폴트값 먼저 설정

/* Game */
.game-container {
	width: 1280px;
	margin: 0 auto;
}

.game-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game-flex-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.game-flex-end {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.game-flex-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
/* 박스 그림자 참고 페이지
https://cssgenerator.org/box-shadow-css-generator.html*/

.game-shadow {
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
}

.game-p-30 {
	padding: 30px;
}

.game-m-t-20 {
	margin-top: 20px;
}
	
.font-17 {
	font-size: 17px;
}

.font-19 {
	font-size: 19px;
}

.font-400 {
	font-weight: 400;
}
#game-body {
	background-color: #f8f9fd;
}

- css


/* game header */
#game-header {
	width: 100%;
	background-color: #4e41db;
}
#game-header nav .left {
	
}

#game-header nav .left h1 {
	font-size: 20px;
}

#game-header nav .left h1 a{
	color: #ffffff;
}

#game-header nav .left ul {
	
}

#game-header nav .left ul li {
	
}

#game-header nav .left ul li a {
	color: #9da5b6;
	font-size: 18px;
}

#game-header nav .left ul li a:before {
	display: inline-block;
	content: '';
	width: 1px;
	height: 14px;
	border-radius: .5px;
	background-color: #9da5b6;

	margin: 0 12px;
}

#game-header nav .right {
	
}

#game-header nav .right .search-wrap {
	overflow: hidden;
	/*input과 button 때문에 radius를 적용해도 직사각형으로 보이는데,
	이것을 막기위해 영역을 벗어나는 부분은 hidden 처리 -> 원형 */
	width: 300px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, .28);
}

#game-header nav .right .search-wrap input {
	width: calc(100% - 38px);
	height: 38px;
	background-color: transparent;
	padding: 10px 12px 9px 14px;
	border: none;

	color: #ffffff;
	font-size: 15px;
}

#game-header nav .right .search-wrap input:focus {
	outline: none;
}

#game-header nav .right .search-wrap button {
	width: 38px;
	height: 38px;
	background-color: transparent;
	border: none;
}

#game-header nav .right .ticket-wrap {
	position: relative;
	width: 40px;
	height: 40px;
	margin-left: 10px;
}

#game-header nav .right .ticket-wrap .btn-ticket {
	display: block;
	width: 40px;
	height: 40px;
	/*border: solid 1px #ffffff;*/
}

#game-header nav .right .ticket-wrap .btn-ticket img {
	width: 40px;
	height: 40px;
}

#game-header nav .right .ticket-wrap .bubble-msg {
	position: absolute;
	width: 165px;
	background-color: #697183;
	border-radius: 8px;

	padding: 10px 12px;
	top: 50px;
	left: 50%;
    transform: translateX(-50%);

	font-size: 11px;
	color: #ffffff;
	font-weight: 600;

	z-index: 100;
}

#game-header nav .right .btn-login {
	width: 60px;
	border: solid 1px hsla(0, 0%, 80%, .3);
	border-radius: 8px;

	padding: 7px 0 6px;
	margin-left: 10px;

	font-size: 12px;
	color: #ffffff;
	text-align: center;
}

#game-header .game-events-wrap {
	padding: 80px 0;
}

#game-header .game-events-wrap .event-wrap {
	position: relative;
	width: 407px;
	height: 264px;
	border-radius: 40px;

	top: 0;
	transition: top linear 0.45s;
	/*자연스러운 움직임*/
}

#game-header .game-events-wrap .event-wrap:hover {
	top: -20px;
}

#game-header .game-events-wrap .event-wrap.one {
	background-color: rgb(112, 104, 236);
}

.imgwh {
    position: absolute;
    top: 0;
    bottom: 229px;
    left: 0px;
    right: 0px;
    margin: auto;
    padding-right: 45px;
    width: 435px;
    height: 390px;
}
#game-header .game-events-wrap .event-wrap.two {
	background-color: rgb(69, 39, 39);
}

#game-header .game-events-wrap .event-wrap.three {
	background-color: rgb(112, 177, 181);
}


#game-header .game-events-wrap .event-wrap .event-title-wrap {
	position: absolute;

	left: 30px;
	bottom: 30px;

	color: #ffffff;	
}


#game-header .game-events-wrap .event-wrap .event-title-wrap span {
	display: inline-block;
	border: solid 2px #ffffff;
	border-radius: 10px;

	padding: 4px 8px 2px;

	font-size: 12px;
	font-weight: 600;

	text-align: center;

	margin-bottom: 15px;
}

#game-header .game-events-wrap .event-wrap .event-title-wrap h2 {
	position: relative;
	font-size: 20px;
}

2. Game - main left section 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/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>
						</ol>



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

- css

#game-main .game-container {
	align-items: stretch;
}
/* game main left */
#game-main .left {
	float: left;

	width: 900px;
	height: 2000px;
	/*padding-bottom: 200px;*/

	background-color: yellowgreen;
}
#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%;
	height: 100%;s
}

.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-direction: row;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: 1px solid rgba(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-top: 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, .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: 13px;
	color: #999;
}





.game-section .btn-circle {
	position: absolute;
	width: 55px;
	height: 55px;
	background-color: #ffffff;
	border: solid 1px black;
	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 {
	text-align: center;
	vertical-align: middle;
	padding-top: 15px;
	background-color: whitesmoke;
}

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




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

3. Game - main left section 2

- html

<div id="game-section-2" class="game-section">

					<div class="section-title-wrap">
						<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/180x100">
								<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/180x100">
								<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>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈라이엇게임즈라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
						</ul>

					</div>
				</div>

- css


#game-section-2 {

}

#game-section-2 .section-title-wrap .more {
	font-size: 13px;
	font-weight: 400;
}


#game-section-2 .section-body-wrap {

}


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

#game-section-2 .section-body-wrap a {

}

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

#game-section-2 .section-body-wrap ul .title:before {
    content: " ";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 6px;
    background-color: #9da5b6;
    border-radius: 50%;
    vertical-align: -1;
    position: relative;
    bottom: 5px;
}

#game-section-2 .section-body-wrap ul .source {
	
}

4. Game - main left section 3

- html

<div id="game-section-3" class="game-section">

					<div class="section-title-wrap">
						<h2 class="font-19">오리지널 시리즈</h2>
					</div>


					<div class="section-body-wrap">
						<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>	
							</div>


							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<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/180x100">
								<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/180x100">
								<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/180x100">
								<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/180x100">
								<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/180x100">
								<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/180x100">
								<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-arrow">▲</a>

					
				</div>

- css

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

	font-size: 13px;
	color: #7776ff;
	margin-bottom: 3px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

오늘은 게임 페이지를 작성해 보았다. 도주에 조금 더 디테일하게 네이버와 동일한 티켓그림, 캐릭터, 그림과 화살표 등을 넣기위한 작업을 해주었는데 위치를 잡아주는 것이 가장 힘들었던것 같다.
position 을 사용하여 위치를 조절해주는데 생각보다 많은 것들을 넣어 위치를 조정해 주었는데 뭔가 다른 분들은 더 쉽게 할 수 있을 것 만 같다.
그래도 원하는 위치와 z 축 순서 를 정해 뒤로 들어가고 앞으로 나오게하는 것들을 할 수 있었다.
또 오른쪽위 검색 영역에 radius를 적용하여 둥글 하게 표현을 하는데, 원래의 input과 button 의 모양으로 적용이 된걸 알 수 가 없을때 사용한 overflow hidden이 인상적이었다. 글 만 숨겨지는줄 알았는데, 모양도 가능 하다는걸 알게되었다.

3) 학습소감

오늘은 강사님이 하시는 것 보다 조금더 디테일하게 들어가 보았다. 그림삽입 을 이용하여 조금더 완성도를 높일 수 있도록 하였는데 재밌었다.
캐릭터 사진도 네이버에서 적용한 사진 그대로 저장해 적용을 하니 더 비슷해보였다!
또 원래는 끝나고 자바를 공부하였는데, 오늘은 강의 시간이 적어 내일의 분량도 조금 해볼 수 있었다.
더 디테일을 주니 뭔가 따라만 하는 것 보다 내가 한 느낌이 나서 뿌듯했다 :)

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_08_04개발일지

다음 포스트

2021_08_06 ,2021_08_09 개발일지

0개의 댓글