오늘은 지난 시간에 이어 네이버 e스포츠 페이지 작업을 진행하였다. 오늘은 메인의 왼쪽 영역을 만들었다. 컨텐츠 랩 안에 left클래스 안에 id로 esport-main-article을 만들고 세 개의 아티클 영역을 만든다. 맨 처음에 올 아티클은 위아래를 다 채운다는 뜻으로 full, 나머지는 half로 클래스를 지정하고 공간을 표시하기 위해 임시로 one two three로 클래스를 추가해주었다. 각각의 아티클 안에는 img태그와 div태그로 텍스트 랩을 만들었는데, 이미지에는 플레이스홀더로 150크기의 이미지를 넣고 텍스트 랩에는 h3과 p태그와 span태그로 소스를 입력해주었다.
디자인 영역으로 넘어와서 컨텐츠랩 전체에 오버플로우 히든을 적용하고 패딩탑을 넣었다. 메인 영역은 플롯으로 레프트를 표시하고 width와 height, 백그라운드 컬러를 적용하였다. 라이트 영역도 미리 적용해 놓았다. 메인 아티클 영역의 오버플로우를 히든으로 적용하고 width를 100%로 설정했다. 백그라운드 컬러는 그레이로 설정하고 보더 레디우스를 적용했다. 아티클은 포지션을 렐러티브로 설정하고 플롯을 레프트로 적용하였다. 아티클 width와 height는 50%로 설정하고 full에 해당하는 클래스만 height를 100%로 설정했다. 나머지 아티클 영역의 색상과 크기를 설정하여 영역을 확인한 뒤에 one two three 클래스와 half 클래스는 지워주었다.
아티클의 이미지로 넘어와서 포지션을 앱솔루트로 설정하고 텍스트 랩의 포지션도 앱솔루트로 설정했다. 텍스트랩에 레프트와 바텀으로 위치를 설정해주고 컬러를 흰색으로 설정해주었다. 텍스트랩의 p태그의 폰트와 라인헤이트를 설정하고 텍스트랩의 소스의 디스플레이를 블럭으로 설정하여 폰트와 컬러를 지정해주었다. 메인 아티클 영역의 작업을 마치니 헤더 영역 위로 아티클이 올라가버려서 헤더의 z-index를 높여주었다.
다음으로 esport-replay로 id를 생성하고 class로 이스포츠 섹션을 지정해주었다. 이 안에 타이틀 랩과 게임 메뉴와 플레이 리스트를 만들었는데, 타이틀랩은 div서랍장 안에 h2태그로 입력해주고 game-menu는 nav태그로 만들어 주었다. 네비 안에 ul과 li태그 안에 a태그를 적고 ul은 플렉스 스타트를 적용해 주었다. li태그는 총 3개를 만들었는데, 첫번째 li태그의 a태그에는 active로 클래스를 넣었다. a태그 안에는 i태그와 span태그를 넣어주었다. play-lists는 ul li a태그로 총 6개의 li태그를 만들어주고 a태그 안에 class로 이미지 랩을 넣어 이미지와 스테이터스 랩에 이미지 위에 올라갈 아이콘, span태그를 넣어 작성해주었다. 이미지 랩 다음에는 h3로 제목을 입력했다.
css로 넘어와서 이스포츠 섹션에 보더 탑과 패딩과 마진을 설정하고 섹션의 타이틀랩에 패딩을 상하로 적용하였다. 게임 메뉴 nav태그에 마진 바텀으로 24px을 적용하고 게임메뉴의 ul li에 마진 라이트를 적용하고 마지막 li태그에만 적용하지 않았다. li의 a태그는 디스플레이를 블럭으로 설정하고 width값을 60px로 설정하였다. a태그에 액티브에 해당하는 영역의 i태그는 백그라운드 컬러를 퍼플로 설정하고 span태그도 동일하게 퍼플로 적용하였다. li의 i태그는 디스플레이를 인라인 블럭으로 설정하고 컬러를 그레이로 설정하였다.
플레이리스트로 넘어와서 li태그의 width값을 설정하고 마진 바텀을 적용하였다. 4,5,6번째의 li태그에는 마진 바텀을 적용하지 않았다. li a태그는 디스플레이를 블럭으로 설정하고 li의 이미지 랩의 포지션은 렐러티브로 설정하였다. 이미지랩의 img태그는 포지션을 앱솔루트로 설정하고 스테이터스 랩의 포지션도 앱솔루트로 설정한 뒤 레프트와 바텀으로 위치를 조정했다. 스테이터스 랩의 i태그는 디스플레이를 블럭으로 적용하고 크기를 설정했다. 시간 영역은 rgba로 색상을 지정하고 보더 레디우스를 적용하였다. h3의 폰트를 설정한 뒤 다음 섹션으로 넘어갔다.
다음 영역은 이스포츠 뉴스 영역이다. 마찬가지로 클래스로 아스포츠 섹션을 적용하고 타이틀은 그대로 복사해서 제목을 바꿔주었다. 아래에는 아티클 랩을 만들어 플렉스 비트윈을 적용하고 ul태그로 레프트와 라이트 리스트를 만들어주었다. 레프트 리스트 영역은 플렉스 비트윈을 적용하고 li a태그안에 이미지와 h3, p태그로 내용을 작성하고 두 개의 li태그를 만들었다. 라이트 영역은 li a태그로 5개의 리스트를 만들었다. 디자인 영역으로 넘어와서 아티클랩의 얼라인 아이템을 플렉스 스타트로 적용하고 레프트 리스트와 li태그의 크기를 설정했다. li a태그의 디스플레이를 블럭으로 설정하고 h3와 p태그의 폰트를 적용했다. 라이트리스트도 크기를 설정하고 li태그의 포지션을 렐러티브로 설정하고 li태그 앞에 기호를 넣어주었다.
마지막으로 esport-expert영역으로 클래스는 이스포츠 섹션을 넣고 타이틀랩을 입력했다. ul li a태그에 내용을 입력하고 4개의 li태그를 만들었다. a태그의 플렉스 스타트를 적용하고 이미지와 텍스트랩 안에 내용을 넣었다. 디자인 영역에서 li태그의 크기를 설정하고 텍스트랩의 width값을 설정한 뒤 h3, p, 소스 영역의 폰트를 설정했다. p태그에 두번째 줄에 말줄임 표시를 주는 것으로 webkit line clamp와 box orient를 적용해 보았다. 이것으로 메인의 왼쪽 영역을 마무리했다.
