.section_title_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
*space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 줌
<div class="section_title_wrap">
<h2 class="font_19 font_400">게임 라운지 인기글</h2>
<div class="section_btn_wrap">
<a href="#" class="active">전체</a>
<a href="#">Joined</a>
</div>
</div>
.section_btn_wrap a.active {
color: #7776ff;
}
-padding값으로 위아래 여백을 주고 border-bottom값을 설정하였다.
html과 css로 구조를 짜는 것 이외에도 원싸이트에서는 더보기 버튼을 누르면 목록이 보이고 펼쳐진다. 웹사이트를 구현할때, html과 css로 구조를 탄탄하게 하는것도 중요하지만, 생동감을 불어넣는 자바스크립트 또한 중요한 요소라고 생각한다. 네이버 게임 html과 css 코드를 다 짜고 홈페이지에 적용된 간단한 자바스크립트도 조금 더 조사해봐야겠다.