0630_개발일지

Jurang Lee·2021년 6월 30일
0

오늘은 네이버 게임페이지 안에 있는 e스포츠 영역 카피캣을 진행했다. 이전에 작성한 게임페이지에 e스포츠 페이지를 연결하고 새롭게 e-sport.html파일을 만들었다. 기존에 내용을 그대로 복사해와서 바디 영역만 새롭게 작성하였다. 오늘 작성한 영역은 상단 헤더 영역과 메인의 상단영역이다. 원래는 메인의 상단 영역도 헤더영역으로 들어갈 것이었는데, 헤더 영역이 스크롤을 내릴때 고정되는 상태여서 분리하여 작업했다.
우선 헤더 영역에 아이디로 esport-header로 이름을 짓고 네비영역 안에 컨테이너를 넣고 그 안에 네비 랩을 만들고 레프트와 센터, 라이트 영역을 나누어 작성하였다. nav-wrap영역 전체는 이스포츠 플렉스 비트윈으로 설정하고 레프트 영역은 플렉스 스타트, 센터는 플렉스 센터, 라이트는 플렉스 엔드로 적용하여 각각의 영역에 위치하게 설정하였다. 레프트영역은 h1태그로 e스포츠, ul li태그로 game과 pc게임을 작성하고 센터는 ul태그로 다섯개의 li태그를 작성하여 홈 부분에 active로 클래스를 적용하였다. 라이트는 로그인과 메뉴 버튼을 a태그로 작성하였다.
css로 넘어와 각각의 플렉스를 플렉스박스사이트를 참고하여 작성하여 주고 이스포츠 컨테이너의 영역도 width 1280px, margin 0 auto로 설정하여 주었다. 스크롤을 내렸을때 고정되는 영역으로 이스포츠 헤더영역에 포지션을 픽스드로 설정하고 백그라운드 컬러와 보더바텀을 지정하였다. e스포츠 네비 영역의 높이값을 설정하고a태그의 색상은 흰색으로 설정하였다. 레프트의 h1태그에 폰트 사이즈를 설정하고 li태그의 앞에 기호가 오도록 rgba컬러를 활용하여 설정해주었다.
센터 영역에서는 각각의 li태그에 마진 라이트를 적용하고 가장 마지막 li태그에는 적용하지 않았다. li태그의 a태그에는 디스플레이를 inline-block으로 설정해주고 라인헤이트로 y축 중앙정렬을 해주었다. 보더 바텀으로 투명 색을 지정하고 a태그에 액티브가 되어있는 영역에는 컬러를 흰색으로 한 뒤 보더 바텀도 흰 색으로 설정하였다. a태그에 마우스를 올려놓으면 다크그레이색으로 변경되도록 설정도 했다. 라이트 영역에서는 두 개의 a태그에 테두리와 보더 레디우스를 설정하고 패딩값을 적용하였다. 마지막 a태그에는 마진 레프트 값을 적용하여 a태그 사이에 공간을 만들었다.

메인 영역으로 넘어가서 id로 esport-main을 작성하고 role로 메인을 넣어 익스플로러에서도 호환되도록 설정하였다. 이스포츠 메인 탑 영역에는 컨테이너 안에 타임라인 랩과 라이브랩이 있는데, 타임라인 랩에서는 ul li태그로 각각의 내용을 작성했다. ul태그는 플렉스 스타트를 설정하고 li태그 안에 a태그를 넣어 그 안에 span태그와 h2, 또다른 div서랍 안에 span태그로 내용을 작성해 주었다. li태그는 총 6개 만들 예정이다.
디자인 영역에서 메인의 전체 영역에 패딩 탑을 적용하여 메인영역이 헤더와 겹치지 않게 설정하고 메인 탑 영역의 백그라운드 컬러도 설정해 주었다. 타임라인 랩의 li는 1/6정도인 16.6%로 width를 설정해주고 백그라운드 컬러와 보더와 보더 레디우스를 적용하였다. 마지막 li태그에는 마진 라이트를 적용하지 않고 li의 a태그는 디스플레이를 블럭으로 설정하여 패딩값과 컬러를 적용하였다. 첫번째 span태그인 date클래스에 폰트를 설정하고 h2영역의 폰트와 마진 탑을 적용하였다. div태그의 클래스 스테이터스 랩의 마진 탑을 적용하고 각각의 span태그에 폰트를 적용하였다.
라이브 랩으로 돌아와 class로 라이브랩을 넣고 그 안에 h2와 ul태그로 내용을 작성해 주었다. h2영역에는 제목과 span태그로 카운트 2를 넣고 ul li태그 안에는 a태그로 내용을 작성해주었다. li태그는 총 2개 들어갈 것이다. a태그에 플렉스 비트윈을 적용해주고 그 안에 이미지와 div태그로 클래스 txt-wrap을 넣어 span태그와 h3태그로 내용을 작성해 주었다.
라이브랩의 전체 영역에 패딩 바텀을 적용하고 h2태그에 폰트 사이즈와 컬러, 카span태그의 컬러를 설정하였다. li태그로 넘어가서 오버플로우 히든을 설정하고 width와 백그라운드 컬러를 설정하였다. a태그의 align-item을 플렉스 스타트로 설정하고 li의 이미지에 크기를 설정하였다. 텍스트 랩에서는 width와 패딩 값을 적용하였다. 텍스트 랩의 스팬태그는 컬러를 레드로 설정하고 백그라운드 컬러도 rgba를 활용하여 설정해 주었다. 텍스트 랩의 h3영역의 폰트와 컬러를 설정하고 메인의 탑 영역을 마무리 하였다.
마치기 전에 메인탑 하단에 이스포츠 컨테이너 클래스로 레프트와 라이트 영역을 만들고 마무리했다. 오늘은 네이버 게임의 이스포츠 페이지에서 헤더 영역과 메인의 탑 영역을 만들어보았다.



profile
웹프로그래밍

0개의 댓글