오늘은 지난시간에 이어 네이버 뉴스에 연예파트 카피캣을 진행하였다. 지난시간에 작성했던 메인의 왼쪽 파트를 이어 작업하였다. 이전에 작성한 섹션파트 3 다음으로 섹션 4의 설계도면을 작성하였다. div태그로 section-4파트를 만들고 div서랍장으로 h3에 추천뉴스를 작성했다. 그리고 ul li a태그를 사용하여 ent-info영역에 타이틀과 내용, span태그로 언론사 이름을 적었다. 인포영역 바깥부분에 이미지를 넣고 가장 하단 영역에는 버튼을 작성한뒤 디자인 작업을 진행하였다.
섹션4 영역에 필요한 css태그들을 작성하고 섹션4영역 전체에 패딩값을 적용하였다. 그 다음에 추천뉴스에 폰트를 적용하고 ul에 li태그에 패딩값과 보더 바텀을 적용하였다. li태그에 맨 마지막에는 보더바텀을 적용하지 않았다. h3태그와 p태그, 스팬그에 폰트를 적용하고 p태그에는 라인헤이트를 적용하였다. img도 따로 크기와 보더를 설정하고 버튼영역은 디스플레이를 블럭으로 지정하고 공간을 설정해 주었다. 여러개의 li태그를 생성하고 다음으로 넘어갔다.
섹션5의 html을 작성하였다. 프로그램과 더보기의 위쪽 탭에 위치할 내용을 타이틀랩 클래스로 지정하고 플렉스 비트윈을 설정했다. 그 아래에 ul li a태그로 이미지와 h4태그를 넣었다. 디자인 영역에서 전체 섹션5영역에 패딩과 보더바텀을 적용하고 타이틀랩에 마진바텀을 삽입했다. h3와 a태그의 폰트를 설정하고 ul태그로 넘어가 디스플레이 플렉스에 새로운 형식 space-around를 설정했다. li에 a태그로 디스플레이 블럭을 설정하고 이미지의 크기와 보더레디우스 값을 적용하였다. h4의 폰트를 설정한 뒤 총 7개의 li태그를 만들어주고 넘어갔다.
섹션6에서는 섹션 4에서와 같이 타이틀랩이 있어 h3와 a태그를 만들고 플렉스 비트윈을 적용하였다. 아래에 ul li a태그를 통해 내용을 작성하고 a태그 안에 이미지랩을 만들어 이미지와 플레이 아이콘을 넣었다. 이미지랩 바깥쪽에는 h4태그로 내용을 작성하고 a태그 바깥에 또다른 a태그로 하단에 위치할 두개의 스팬태그를 넣었다.
css로 넘어와서 섹션6에 패딩과 보더 바텀을 적용하고 타이틀랩의 값을 이전 값에서 복사해왔다. li태그의 크기를 설정하고 이미지랩의 포지션을 렐러티브로 설정한뒤 마진 바텀값을 적용했다. 이미지와 아이콘은 포지션 앱솔루트로 설정하고 아이콘에는 디스플레이를 블럭으로 적용하여 레프트와 바텀값을 적용했다. h4태그에 폰트사이즈와 마진바텀을 설정하고 다른 a태그의 span태그에 폰트사이즈를 설정하고 source 뒷부분에 기호를 넣었다. program뒤에도 화살표 기호를 대신하여 색상으로 공간을 만들어주었다. li태그 총 4개를 만들었다.
그 다음 섹션 영역은 기존에 섹션4와 형태가 같아 그대로 붙여넣기하고 상단 div태그에 h3영역만 제외시킨 다음에 다음섹션으로 넘어갔다. 섹션7에서도 동일하게 타이틀랩 영역을 만들고 하단에 div태그에 movie-wrap 영역을 만들고 플렉스 스타트를 적용하였다. 무비랩 영역을 왼쪽과 오른쪽으로 나누고 왼쪽영역은 a태그 안에 이미지와 h4태그를 넣고 오른쪽 영역에는 ul li안에 a태그와 span태그로 내용을 작성하여 주었다.
디자인 영역으로 넘어와 전체 섹션7에 대한 공간을 적용하고 타이틀랩 css도 이전과 동일하게 작성하였다. 무비랩 영역 왼쪽에 이미지의 크기를 설정하고 h4태그의 폰트를 설정하였다. 오른쪽 영역에 대해서는 전체 크기를 설정하고 마지막 li태그를 제외한 li태그들에 마진바텀값을 적용하였다. li태그의 a태그는 디스플레이를 인라인 블럭으로 설정하고 맥스 width값과 마진, 폰트사이즈를 적용하고 말줄임 효과를 적용할 코드를 넣었다. 스팬태그의 버티컬얼라인을 탑으로 설정하고 폰트 사이즈를 조정했다. li태그는 총 5개를 만들어주었다.
섹션8의 상단에 타이틀랩을 넣고 그 안에 div서랍장으로 플렉스 스타트를 적용해주었다. h3태그와 ul태그로 내용을 작성하고 ul li의 첫번째 a태그에는 클래스로 on을 적용했다. 그 아래에는 더보기영역을 작성하고 타이틀랩 바깥편에 순서가있는 리스트 ol태그로 뉴스 리스트를 만들어 주었다. ol에 li a태그에 플렉스 스타트를 적용하고 그 안에 스팬태그로 랭크를 작성했다. 스팬태그 다음으로 또다른 div서랍장에 뉴스 인포랩을 만들어 그 안에 뉴스인포 텍스트로 h4와 p태그, span태그를 작성해 주었다.
css에서는 섹션 8의 타이틀랩 안에 플렉스 스타트를 적용하고 h3태그의 폰트 사이즈를 조정했다. 아래 ul태그에서 포지션을 렐러티브로 적용하고 탑에 -4픽셀을 적용하였다. li의 a태그에 폰트 사이즈를 적용하고 a태그 앞에 기호를 넣어주었다. 가장 앞에 오는 li태그의 a태그앞에는 기호를 넣지 않았다. on이 적용된 li의 a태그에는 폰트웨이트와 컬러를 적용하였다. 더보기 탭에 폰트를 적용하고 뉴스리스트 부분 작업을 진행하였다. 리스트의 li태그에 패딩과 보더 바텀을 적용하고 랭크의 디스플레이는 블럭으로 설정하였다. 뉴스인포랩은 calc을 사용하여 width를 설정해주고 p태그와 span, img태그의 크기와 폰트를 설정했다. 뉴스리스트의 랭크를 다섯 개 만든다음 다음 섹션으로 넘어갔다.
섹션9를 마무리로 메인의 왼편을 마무리했는데, 섹션9의 아래쪽은 내용이 중복돼서 그러했다. 섹션9에도 타이틀 랩을 삽입하고 아래에 ul태그에 플렉스 비트윈을 적용하고 li a태그안에 이미지와 텍스트랩을 만들었다. 텍스트랩안에는 2개의 스팬태그, 프로그램과 소스를 클래스로 만들고 h4태그로 내용을 입력했다.
디자인 영역으로 넘어와서 섹션9영역과 타이틀랩 영역을 설정하고 ul li태그에 크기를 설정하였다. a태그의 디스플레이는 블럭으로 설정하고 이미지의 크기를 설정하였다. 텍스트랩에는 패딩값을 적용하고 li의 span태그에는 폰트사이즈를 적용하였다. 프로그램과 소스는 컬러를 지정하고 프로그램 뒤에 이전에 만들었던 기호를 복사하여 붙여넣었다. h4영역에 패딩과 폰트를 설정하고 작업을 마쳤다. 오늘은 메인의 왼편 섹션4에서 9까지 작업해보았다.
