: 페이지의 모든 컨텐츠를 감싸는 크기를 가지는 .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값이 반복되는 부분이 많아 미리 설정해주었다.
특별히 어려운 점은 없었다.
네이버 게임 페이지는 단순해보이면서도 여러가지 레이아웃으로 구성된 페이지 같다. 오늘은 우선 배너와 첫번째 섹션을 구성해보았다.