💻 학습 내용

🛫 GIT-HUB

HTML | naver_game_header
CSS | naver_game_header

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

.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

#game_header nav .right .search_wrap{
	overflow: 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;
	padding: 10px 12px 9px 14px;
	background-color: transparent;
	border: none;

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

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

🖤 search_wrap에서 oveflow: hidden;을 적용하여 모서리의 각진 부분들을 숨김 처리 하였다.

#game_header .game_events_wrap .event_wrap {
	position: relative;
	width: 407px;
	height: 264px;

	border-radius: 40px;

	top: 0;
	transition: top linear 0.45s;
}

transition을 활용하여 움직이는 효과를 적용해주었다

📝 마무리

오늘은 나도 처음 보는 네이버 게임 사이트를 카피캣 하였다.
header부분을 카피캣 하였는데 transition을 활용하여 애니메이션 효과를 주었다.
강의를 따라하면서 어려운 부분은 없었다.
다음 부터는 내가 먼저 공간을 나눠보고 강의를 들으며 내가 나눈 공간이랑 비슷한지 비료를 하면서 코드 작성을 해봐야겠다.