오늘은 네이버 게임페이지 카피캣을 진행하였다. 기존에 인덱스 파일에서 카테고리에 게임을 추가하고 game.html으로 파일을 연동시켰다. 이전과 같이 인덱스 내용에서 바디내용만 수정하는 방식으로 진행하였다. 게임페이지의 경우 전에 카피했던 네이버의 다른 페이지들과 형식이 다른 것을 확인할 수 있다. 아직 배우지 않은 자바스크립트 기능은 제외하고 html과 css를 활용하여 구현할 수 있는 영역에 한해 적용해보았다. 오늘 작성한 영역은 상단에 게임 헤더 영역이다.
우선 설계도면 작업을 진행하였다. 전체 바디영역에 game-body로 id를 만들고 헤더 영역을 설정하였다. 헤더영역을 게임 컨테이너로 다시 묶고 크게 nav영역과 하단에 들어갈 게임 이벤트 영역으로 나누어 내용을 작성하였다. nav영역은 클래스로 game-flex-between으로 별명을 짓고 그 안에 div클래스로 left와 right를 나누었다. left부분에는 game-flex-start로 클래스를 짓고 안에 h1으로 GAME을 작성하고 그 아래에 ul li태그로 게임 옆에 올 e스포츠와 pc게임을 적어주었다.
다음 nav right부분에서는 game-flex-end로 클래스를 짓고 그 안에 div클래스로 서치 랩과 티켓 랩, 로그인 영역을 만들었다. 서치랩은 클래스로 플렉스 스타트를 설정하고 안쪽 인풋 영역에 검색창에 띄울 내용을 플레이스 홀더로 작성하였다. 그리고 버튼에는 버튼 서치로 클래스를 지정했다. 티켓랩에는 a태그로 버튼티켓 영역을 설정하고 버튼 아래에 위치하게 될 말풍선을 p태그로 작성해 주었다. 그리고 마지막으로 a태그 안에 로그인 버튼 영역을 작성해주었다.
헤더에 네비 영역에 대해 디자인 작업을 진행해 보았다. 우선 전체 게임 컨테이너에 크기를 지정해준 다음 game-flex-between과 start, end, center에 해당하는 css내용을 플렉스헬프를 활용하여 작성해 주었다. 그리고 메인 영역에서 적용할 그림자효과에 해당하는 내용을 game-shadow클래스 안에 미리 작성하여 주었다. 마찬가지 개념으로 패딩과 폰트, 배경색을 설정하는 클래스로 game-p-30, font-17, game-body등을 미리 설정해 보았다.
게임 헤더로 넘어와서 전체 헤더값에 해당하는 width값을 입력하고 네비태그의 높이를 설정해 주었다. 네비에 왼쪽 h1태그에 해당하는 폰트사이즈를 설정하고 h1에 a태그에 컬러를 흰색으로 설정하였다. 그리고 ul태그로 넘어와서 ul에 li a태그 안에 컬러와 폰트 사이즈를 지정하고 가장 a태그 앞쪽에 기호를 넣어주었다. 네비의 오른쪽에서는 서치랩에 오버플로우로 히든을 적용하고 백그라운드 컬러로 rgba값을 넣어주었다. 서치랩에 인풋 영역에는 width값을 calc로 설정하여 적어주고 백그라운드 컬러를 투명으로 설정하였다. 패딩은 상하좌우로 적용하고 보더 값은 none으로 설정하였다. 인풋영역에 포커스가 해제하도록 아웃라인을 none으로 설정하고 버튼 탭에서 공간과 색상을 설정하였다.
티켓랩 영역에서는 포지션을 렐러티브로 적용하고 width와 height값을 설정해주었다. 티켓랩 안에 버튼 영역은 디스플레이를 블럭으로 설정해주고 공간을 설정했다. 말풍선 영역에는 포지션을 앱솔루트로 설정하고 width값과 백그라운드 컬러, 보더 레디우스를 설정해주었다. 패딩과 탑, 레프트로 위치를 조정하고 transform을 사용하여 x축 위치를 조정했다. 여기서 a태그와 p태그 모두 블럭요소이기 때문에 말풍선 버블에 디스플레이 none값을 없애면 y축 정렬이 되버린다. 지금과 같은 정렬은 티켓랩에 width값에 영향을 받은 것이다. 로그인 버튼에 크기와 보더값을 설정하고 텍스트 정렬을 중앙으로 설정했다.
다음으로 헤더에 div태그에 game-event-wrap공간의 설계도면 작업을 진행하였다. 이벤트랩은 총 3개가 들어가는데 우선 전체 이벤트랩에 클래스로 플렉스 비트윈을 설정하고 이벤트 랩 one, two, three로 각각의 랩을 타이틀랩으로 설정하여 내용을 작성해주었다. Span태그와 h2태그를 활용하여 안에 내용을 적어주고 디자인 영역으로 이동하였다.
우선 전체 게임 이벤트 랩에 패딩을 상하로 적용하고 타이틀 랩을 묶는 이벤트 랩에 포지션을 렐러티브로 설정한 다음 크기와 top값을 적용하고 transition으로 애니메이션 효과가 적용되도록 했다. 마우스를 위로 올릴 때 탑으로 -20px이 적용되도록 하였다. 그 후에 각각의 이벤트 랩에 배경 컬러를 넣어주고 타이틀랩에서 포지션은 앱솔루트로 설정하고 레프트와 바텀으로 위치를 조정하였다. 타이틀랩 안쪽에 span태그에 디스플레이를 인라인 블럭으로 설정하고 보더값과 패딩을 적용시켰다. H2영역은 폰트사이즈를 조정하였다.
많은 클래스가 사용되어 글로 쓰기엔 다소 복잡한 점이 있다. 마지막으로 게임의 메인의 컨테이너로 align-item을 스트레치로 설정하고 레프트와 라이트의 크기를 설정한 뒤에 작업을 마쳤다. 레프트와 라이트에 플롯을 사용하는 대신 상위에 div태그에서 클래스로 flex-between을 설정하였다.
