[대구AI스쿨] 210806 개발일지_30

[코드]

[배운내용]

게임페이지 초기값 설정

: 페이지의 모든 컨텐츠를 감싸는 크기를 가지는 .game_container값을 설정하고, 여러 flex값 등 많이 반복되는 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;
}

.game_m_t_20{
	margin-top: 20px;
}

.font_17{
	font-size: 17px;
}

.font_19{
	font-size: 19px;
}

.font_400{
	font-weight: 400;
}

특히, 게임 페이지에서 각 섹션의 제목의 font-size나 weight값이 반복되는 부분이 많아 미리 설정해주었다.

[어려웠던 점]

특별히 어려운 점은 없었다.

[학습소감]

네이버 게임 페이지는 단순해보이면서도 여러가지 레이아웃으로 구성된 페이지 같다. 오늘은 우선 배너와 첫번째 섹션을 구성해보았다.

좋은 웹페이지 즐겨찾기