2021.06.24 (네이버 게임 1)

학습한 내용

[네이버 게임 상단 부분]

	<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스포츠</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"></a>
						<p class="bubble_msg">응모 티켓 받고 꿀템 도전!</p>
					</div>

					<a href="#" class="btn_login">로그인</a>
				</div>
			</nav>

			<div class="game_events_wrap game_flex_between">
				<div class="event_wrap one">
					<div class="event_title_wrap">
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파테스트 참가 이벤트
						</h2>
					</div>
				</div>

				<div class="event_wrap two">
					<div class="event_title_wrap">
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파테스트 참가 이벤트
						</h2>
					</div>
				</div>

				<div class="event_wrap three">
					<div class="event_title_wrap">
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파테스트 참가 이벤트
						</h2>
					</div>
				</div>
			</div>
		</div>
	</header>

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

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

.game_p_30 {
	padding: 30px;
}

.font_17 {
	font-size: 17px;
}

.font_19 {
	font-size: 19px;
}

.font_400 {
	font-weight: 400;
}

#game_header {
	width: 100%;
	background-color: #4e41db;
}

#game_header nav {
	height: 60px;
}

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

#game_header nav .left h1 a {
	color: #ffffff;
}

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

#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 .search_wrap {
	width: 300px;

	border-radius: 20px;

	background-color: rgba(0, 0, 0, 0.28);

	overflow: hidden;
}

#game_header nav .right .search_wrap input {
	width: calc(100% - 38px);
	height: 38px;

	border: none;

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

	background-color: transparent;

	padding: 10px 12px 9px 14px;
}

#game_header nav .right .search_wrap input:focus {
	outline: none;
}

#game_header nav .right .search_wrap .btn_search {
	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 .bubble_msg {
	position: absolute;

	width: 165px;

	background-color: #697183;

	border-radius: 8px;

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

	padding: 10px 12px;

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

	z-index: 100;
}

#game_header nav .right .btn_login {
	width: 60px;

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

	border: solid 1px hsla(0, 0%, 80%, .3);
	border-radius: 8px;

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

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

#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(122, 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;

	font-size: 12px;
	font-weight: 600;
	text-align: center;

	border: solid 1px #ffffff;
	border-radius: 10px;

	padding: 4px 8px 2px;
	margin-bottom: 15px;
}

#game_header .game_events_wrap .event_wrap .event_title_wrap h2 {
	font-size: 20px;
}

[네이버 게임 왼쪽 오른쪽 영역]

	<main role="main" id="game_main">
		<div class="game_container game_flex_between">
			<div class="left">
				
			</div>

			<div class="right">
				
			</div>
		</div>
	</main>

#game_body {
	background-color: #f8f9fd;
}

#game_main .game_container {
	align-items: stretch;
}

#game_main .left {
	width: 900px;
	height: 2000px;

	background-color: yellow;
}

#game_main .right {
	width: 358px;
	height: 2000px;

	background-color: grey;
}

학습내용 중 어려웠던 점

ticket아이콘 아래에 설명을 나타나게 하는것이 조금 어려웠습니다. 다른 부분은 간소화 해서 작업해 크게 어렵지는 않았습니다.

해결방법

position을 제거해보고 다양하게 top, left등의 값을 조절해보면서 여러가지 변화를 주는 형태로 이해를 했습니다.

학습소감

자주 사용하는 클래스들을 점점 늘려나가서 실습하는데 속도가 붙는거 같고 border-radius를 사용하니 조금더 깔끔한 형태로 레이아웃이 구성되는거 같습니다.
그리고 #ffffff나 rgb,rgba말고도 hsla와 같은 색을 넣는 방법이 있다는 것을 알수 있었습니다.