오늘은 네이버뉴스 안에 있는 연예페이지 카피캣을 진행했다. 기존에 진행한 뉴스페이지에서 TV연예페이지를 클릭했을때 페이지가 이동되도록 설정하고 기존에 index내용을 복사하여 body영역을 새롭게 작성하였다. 엔터테이먼트 페이지는 크게 상단 헤더 영역과 메인의 왼쪽과 오른쪽으로 구성되어 있는데, 오늘은 헤더 영역과 메인의 왼쪽 일부를 작업하였다.
우선 헤더 영역에 아이디로 ent-header를 작성하고 안에 div태그를 넣었다. 다른 페이지들과 달리 상단에 컨테이너 영역이 중간으로 한정되어 있지 않아서 컨테이너는 넣지 않았다. div태그에 header-left와 center, right영역을 넣고 각각의 내용을 작성하였다. 레프트 영역에는 ul안에 li태그로 페이지 이름과 뉴스탭을 a태그로 작성하고 센터 영역에는 여러 카테고리를 마찬가지로 a태그로 작성한 뒤 마지막으로 라이트 영역에 로그인 버튼과 메뉴, 검색 버튼을 만들어주었다.
디자인 영역으로 넘어와서 배치상으로 미리 html에 적용시켜줄 플렉스 스타트와 센터, 엔드, 비트윈을 플렉스헬프사이트를 참고하여 작성해주고 ent-border값까지 미리 적용시켜 주었다. 헤더의 div서랍 안에 클래스로 플렉스 비트윈을 html에서 적용시키고 헤더의 크기와 백그라운드 컬러, 보더 바텀값을 적용시켰다. 다음으로 레프트 영역에서 li태그에 폰트 굵기를 설정하고 마지막 li태그의 a태그인 뉴스탭의 컬러를 변경하였다. li태그의 a태그 앞에는 이전에 자주 넣던 'ㅣ'기호를 넣고 첫번째 li태그의 a태그 앞에는 기호를 지웠다.
다음으로 헤더 센터 영역에 폰트를 설정하고 li의 a태그에서 디스플레이를 인라인 블럭으로 설정한 뒤에 class에 on이 들어간 li태그에 a태그는 컬러와 보더 바텀값을 적용시켰다. 그리고 헤더 우측 영역에서 로그인 버튼에 크기와 보더를 설정하고 메뉴버튼과 검색 버튼의 컬러와 크기, 마진으로 위치를 설정하고 메인 영역으로 넘어갔다.
메인의 설계도면에서 우선 div서랍장 안에 컨테이너를 삽입하고 그 안에 div서랍장에 ent-left영역과 ent-right영역을 만들었다 left영역에서 div태그안에 id로 미디어 헤드라인 영역을 만들어 그 안에 ul 과 li태그 안에 a태그로 내용을 작성하였다. 우선 하나의 li태그를 만들어 복사 붙여넣기 하기로 하였다. 하나의 a태그 안에 클래스로 media-top으로 이름을 짓고 그 안에 이미지와 스팬, i태그를 사용하여 내용을 작성해 주었다. 그리고 또다른 div태그로 media-bottom 클래스를 만들어 p태그로 이미지 위에 올라갈 글을 작성했다.
디자인으로 넘어와서 엔터테이먼트 css 가장 위쪽에 ent-container로 크기를 지정하고 메인의 컨테이너에는 오버플로우 히든을 적용했다. 메인의 ent-left영역 전체 영역에 플롯을 left로 설정하고 크기와 백그라운드 컬러를 적용했다. 미디어 헤드라인 영역에 패딩 바텀으로 20px을 적용하고 헤드라인 li태그 안에 크기와 보더레디우스를 설정했다. 헤드라인의 a태그는 디스플레이를 블록으로 설정하고 미디어 탑 영역의 포지션을 렐러티브로 설정하였다.
미디어 탑의 이미지와 시간은 포지션 앱솔루트로 적용하고 공간의 크기를 설정하였다. 시간 영역은 보더 레디우스와 컬러, 폰트사이즈 등을 적용하였다. 미디어 탑에 아이콘 플레이가 들어가는 영역의 크기와 배치도 동일하게 진행하였다. 미디어 바텀의 높이값과 백그라운드 컬러를 지정하고 p태그의 폰트사이즈와 글자간 여백, 패딩값을 설정하고 li태그를 같은 내용으로 4개 만들어 헤드라인 영역을 완성시켰다.
다음으로 섹션-1파트의 설계도면을 작성했다. 섹션1파트 안에 ul li a태그로 공간을 만들어 a태그에는 플렉스 비트윈을 설정해 주었다. 그리고 그 안에 이미지로 플레이스홀더에서 가져온 가상의 이미지를 넣고 또다른 div서랍장으로 뉴스 랩을 만들어 h3태그와 p태그, 바텀랩 div서랍장으로 내용을 입력하였다. bottom-wrap영역에서는 span태그로 하단에 들어갈 내용을 작성하였다.
디자인 영역으로 넘어와서 섹션의 전체 li태그안에 보더 바텀값을 적용하고 이미지 태그의 크기를 설정하였다. 그다음으로 뉴스랩에 크기와 h3태그와 p태그의 폰트를 설정하고 버튼랩 영역의 소스와 카운트영역에 폰트사이즈와 굵기, 컬러를 설정하였다. 카운트 영역은 디스플레이를 인라인-블럭으로 설정하고 크기와 보더 레디우스를 설정하였다. 마찬가지로 li태그를 두번 반복한 뒤 섹션 2로 넘어갔다.
설계도면에서 섹션2 안에 ul li a태그로 공간을 만들어 이미지와 h3, div태그를 만들고 div태그안에는 ent-bottom과 flex-between을 설정해주었다. 섹션1과 마찬가지로 스팬태그로 소스와 카운트를 넣었다. 섹션3안에는 div태그로 상단에 들어갈 타이틀 랩을 만들어 안에 h3로 콘텐츠를 작성하고 또다른 div서랍장을 만들어 라이트랩으로 카운트와 버튼 영역을 만든고 타이틀랩 하단에 ul li a태그를 만들어 이미지와 스팬, h3를 그 안에 작성해주었다.
css에서 섹션2에 보더 바텀값을 적용시켜주고 li에 width값을 설정해주고 img와 h3태그에서 크기와 마진값을 적용시켜 주었다. ent-bottom에 소스와 카운트는 섹션1과 동일하게 적용할것이므로 위에 복사하여 넣었다. li태그를 2번 반복하여 동일한 내용을 3개 만들고 섹션3의 디자인 작업을 진행했다. 섹션 3에 패딩으로 상하값을 적용하고 타이틀 랩의 마진 바텀값을 삽입했다. h3태그의 폰트를 지정한 후 라이트랩의 스팬태그의 폰트사이즈와 컬러를 지정하고 em태그에는 폰트스타일을 노멀로 적용했다. 버튼랩의 버튼 클래스에는 크기와 보더값을, 이전과 다음에 해당하는 클래스에는 컬러를 적용해주었다.
섹션3에 ul태그로 넘어와서 li태그에서 크기와 보더 값을 설정한 뒤에 a태그의 포지션은 렐러티브로, img오 span태그와 h3에는 포지션을 앱솔루트로 적용해주었다. a태그의 디스플레이는 블럭으로 한 상태에서 width와 height는 li태그의 100%로 설정해주고 아래 스팬태그에서도 포지션을 블럭으로 설정하였다. 스팬태그의 길이가 늘어났을때 말줄임 표시가 나타나도록 기존에 배운 코드를 활용해 넣고 맥스 위드값을 100%로 설정하였다. 마지막으로 h3영역에서 크기와 컬러, 패딩을 적용한뒤 라이트와 바텀으로 위치를 맞춘 후에 같은 li태그 총 4개를 만들어 작업을 마무리했다.
