Day 29 네이버 게임 상단영역

SUN·2021년 8월 5일

08월 05일

1. 학습 내용

사전 작업

CSS

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

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

/* https://cssgenerator.org/ */

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

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

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

.font-400 {
	font-weight: 400;}

상단 헤더

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-스포츠</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>

CSS

#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 {
	color: #9da5b6;
	font-size: 18px;}

#game-header nav .left ul li a:before {
	content: '';
	display: inline-block;
	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;
	/* input과 button 영역을 히든처리 함으로써 
    곡선을 보이게 한다. */}

#game-header nav .right .search-wrap input {
	width: calc(100% - 38px);
	height: 38px;
	padding: 10px 12px 9px 14px;
	border: none;
	background-color: transparent;
	/* 기본 배경색을 제거(투명하게) */

	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;
	border: none;


	background-image: url(../search.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38px 38px;}

#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;
	/* a 태그이므로 블록이 들어가야 나타난다. */
	width: 40px;
	height: 40px;
	border: solid 1px #ffffff;}

#game-header nav .right .ticket-wrap .bubble-msg {
	/*display: none;*/
	/* 화면에서 나타나지 않게 설정 */
	position: absolute;
	width: 185px;
	background-color: #697183;
	border-radius: 8px;
	padding: 10px 12px;
	top: 50px;


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

	left: 50%;
	transform: translateX(-50%);
	/* absolute일 때 margin 0 auto가 
    안먹혀서 이 코드로 중앙정렬 */
	z-index: 100;}

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

	padding: 7px 0 6px;
	margin-left: 10px;
	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);}

#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;
	padding: 4px 8px 2px;
	margin-bottom: 15px;
	border: solid 2px #ffffff;
	border-radius: 10px;

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

	text-align: center;}

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