오늘은 지난 시간에 이어 네이버 웹사이트를 카피해 보았다. 지난 시간에는 메인 상단과 왼편을, 오늘은 메인의 오른쪽과 하단 footer 부분을 작업했다.
먼저 메인의 오른 편을 작업했다. 오른쪽은 크게 로그인을 하는 영역과 배너가 있는 영역, 쇼핑 영역으로 나뉘었다. 로그인 영역부터 html에서 id를 account로 지정하여 작성했다. 각각의 로그인 영역에 들어가는 문구를 입력하고 로그인 버튼은 누르면 페이지를 이동할 수 있도록 a 태그로 작성하였다. css에서 어카운트 영역의 공간과 여백을 설정하고 p 태그에서 폰트 사이즈와 패딩과 마진 값을, a 태그에서 디스플레이를 블록으로 설정하고 보더 레디우스로 박스를 둥글게 하였다. 어카운트 서브에서 아이디와 비밀번호 찾기가 있는 영역의 배치를 좌우로 위치시키기 위해 플렉스로 디스플레이를 설정했다.
다음으로 로그인 아래에 배너 부분을 설정했다. html에서 배너를 작성하고 디자인 작업을 마친 후 마진 바텀으로 아래에 여백을 설정했다.
그다음으로 쇼핑 역역을 설정했다. 쇼핑 콘텐츠는 크게 id로 shop_wrap으로 묶고 그 안에 각각의 div 서랍장으로 타이틀 영역과 콘텐츠 영역을 구분했다. 먼저 쇼핑 윗편에 타이틀 부분을 작성했다. 타이틀 양쪽에 내용을 작성하고 마찬가지로 디스플레이 플렉스로 좌우로 배치를 했다. 패딩으로 상하에 여백을 준다. 각각 타이틀에 폰트를 설정했다.
쇼핑 타이틀 아랫부분에는 콘텐츠를 작성했는데 html에서 class로 shop_content를 설정했다. shop_content는 다시 커머스 리스트와 프로덕트 리스트로 나뉘었다. 쇼핑몰이 들어가는 커머스 리스트를 a 태그로 감싸 작성하고 그 아래에 이미지와 설명이 들어가 있는 product-lists를 작성했다. 쇼핑 영역에서 css로 이동하여 각각의 공간과 글씨를 설정하였다. shop_content 큰 영역에 보더로 1픽셀의 작은 밑줄을 만들어주고 패딩으로 좌우로 여백을 지정하였다.
shop_content의 커머스 리스트에 디스플레이를 플렉스로 지정하여 쇼핑몰이 좌우로 나열되도록 위치시켰다. 여기서 쇼핑몰의 개수가 달라 공간이 균일하게 지정이 되지 않았는데, 이때는 플롯을 이용해도 될 것 같다고 하셨다. 일단 쇼핑몰의 개수를 맞춰 균일하게 지정하였다. 여백을 맞추는 데는 nth-child로 순서를 지정하여 마진 레프트를 적용했다. 마찬가지로 커머스 리스트에 폰트와 마진으로 글씨와 여백을 지정하였다.
shop_content의 프로덕트 리스트도 html에서 이미지와 h3와 span으로 내용을 작성 후에 css에서 공간과 폰트를 설정해 주었다. 디스플레이를 플렉스로 지정하여 x축으로 내용이 배치되도록 했다. 텍스트 얼라인을 센터로 지정하여 h3과 span의 글이 이미지의 중앙으로 위치하도록 설정했다. 마진 바텀으로 전체 영역의 하단에 약간의 공백을 넣었다. 메인의 오른쪽 영역 설정을 마친 뒤에 기존에 설정한 백그라운드 컬러와 height 값을 삭제하였다.
메인 영역 작업을 마친 뒤 가장 하단 영역의 footer 영역을 설정하였다. html에서 메인 풋터로 id를 지정하고 div 서랍장 안에 컨테이너로 클래스 별명을 지어주었다. 풋터 영역은 뉴스가 들어가 있는 영역과 회사 소개 리스트 영역으로 나뉘었다. 먼저 뉴스가 들어간 곳을 news_lists로 class 명을 지정해 주고 안에 이미지와 또 다른 div 서랍장 안에 span 태그와 h3, p 태그로 내용을 작성하였다. 회사 리스트 영역은 각각의 내용을 li 안에 a 태그로 작성하였다.
풋터 영역의 디자인 작업을 진행하였다. 백그라운드 컬러로 옅은 그레이 색을 지정하고 보더로 풋터 위에 1픽셀의 밑줄을 넣었다. 뉴스 리스트에서 디스플레이를 플렉스로 지정하여 내용을 x축으로 정렬시켰다. 패딩 값을 넣어 상하 여백을 설정했다. 각각의 뉴스의 내용 안에 폰트 사이즈를 지정하고 스팬태그의 색만 따로 설정하였다. 마지막으로 회사 리스트에 디스플레이를 인라인-블럭으로 설정하고 리스트 사이에 'ㅣ'표시를 넣고 content: initial을 가장 먼저 있는 리스트에 설정하여 맨 앞에는 기호가 표시되지 않게 했다. 기호의 위치를 버티컬 얼라인으로 조정하고 a태그의 폰트 사이즈를 조정하여 네이버 사이트 작업을 마무리했다.
