오늘은 네이버 메인 페이지를 카피캣 해보았다. 카피를 시작하기 전에 먼저 웹 개발에 좋은 크롬 확장 프로그램에 대해 알아보았다. https://wpastra.com/chrome-developer-extensions/ 해당 사이트에서 특정 웹사이트의 기술 스펙을 확인할 수 있는 Wappalyzer와 특정 영역의 사용된 width나 height, 크기 등의 css를 확인할 수 있는 CSS Viewer, 폰트의 종류를 알려주는 What Font와 Font Ninja, 임의의 문장을 만들어주는 Lorem lpsum generater 그리고 마지막으로 웹사이트에 사용된 컬러를 알 수 있는 colorpick과 colorzilla 프로그램을 직접 설치하고 실행해 보았다. 각각의 프로그램은 설치 후에 상단에 핀을 고정시켜 활용하고자 하는 사이트에서 직접 확인이 가능했다.
네이버 홈페이지는 완전히 똑같이 하기에는 시간이 소요되어 레이아웃 구조를 중심으로 카피했다. html과 css에서 초기화 작업을 마치고 body 태그를 작성하였다. 사이트는 검색과 내비게이션이 있는 상단 영역과 콘텐츠가 있는 중간 영역, 가장 하단의 회사소개가 있는 부분으로 나누었다. 네이버 사이트를 보면 header 태그가 있는 상단 영역 내비게이션의 넓이만큼 메인 태그의 공간이 차지하는 것을 확인 가능한데, 때문에 가운데 있는 이 영역들의 크기를 모두 맞추고 x축으로 중앙 정렬하게끔 css에서 컨테이너로 미리 클래스를 만들어 초기화 작업을 진행하였다.
상단 헤더 영역 설계도면 작업을 진행했다. 상단 영역의 검색어와 검색 버튼이 들어가는 영역에는 input과 button 태그를 사용하여 div 서랍장에 묶어준다. 내비게이션이 들어가는 영역은 각각의 탭을 ul li 안에 넣어주고 다른 화면으로 이동해야 하므로 a 태그 안쪽에 입력하여 또 다른 div 서랍장에 넣어준다. css로 이동하여 헤더 영역에 포지션을 렐러티브로 하고 백 그라운드 컬러는 흰색으로 넣는다. 검색하는 search_area 영역에 높이와 컬러, 미세한 밑줄을 위한 보더 바텀 값을 넣는다.
검색 부분의 디자인 작업을 위해 width height와 border 값을 설정하고 flexbox.help 사이트를 이용하여 콘텐츠의 위치를 설정한다. 다음으로 인풋 태그에서 크기와 높이를 설정하고 공백을 패딩으로 설정해 준다. 버튼도 동일하게 설정하는데, 버튼에 태생적 공백이 들어가 있기에 초깃값으로 보더 값을 0으로 설정해 준다. 인풋과 버튼 태그는 둘 다 인라인 블록 요소로 연달아 입력 시 미세한 공백이 생기므로 이를 막고 같은 선상에서 배치되도록 calc라는 요소를 사용했다. 마찬가지로 flexbox.help 사이트를 이용하고 인풋의 테두리를 없애기 위해 가상 선택자 포커스를 이용했다.
상단 검색 부분을 마치고 내비게이션의 디자인 작업을 진행한다. 내비게이션 아래쪽에 미세한 줄은 사이트를 참고하여 박스 섀도로 입력하였다. ul과 li는 인라인 블록 요소로 설정하여 마진 right로 약간의 여백을 준다.
메인 부분의 설계도면을 작성한다. 메인의 클래스명은 컨테이너로 하고 오늘은 메인의 왼편을 먼저 작성했다. 왼편에는 배너가 들어가는 영역과 뉴스가 들어가는 부분, 그리고 아래의 블로그 글이 들어가는 부분 세 영역으로 나누어져 있는데, 각각의 영역을 class와 id로 작성하고 중간의 뉴스 내용이 들어가는 부분에 왼쪽은 뉴스스탠드, 오른쪽의 버튼을 버튼 태그로 작성하여 div 태그로 묶었다.
css 작업으로 넘어가 보자. 메인 태그의 오버플로우를 히든으로 설정하고 패딩 탑으로 여백을 준다. 메인 레프트와 라이트에 플롯을 설정하고 크기를 정한다. 위쪽 배너에 크기와 컬러를 넣어 공간을 설정한다. 아래쪽에 약간의 공백을 위해 마진 바텀을 사용했다.
뉴스스탠드가 있는 부분에서 flexbox.help를 사용하여 공간의 위치를 설정하고 패딩 값을 설정한다. 뉴스의 버튼들도 뉴스 헤더와 같이 공간을 정하고 width 값을 설정했다. 뉴스스탠드 오른 편의 버튼은 파란색으로 대체하여 표시했다. 뉴스 리스트에 보더 값을 적용하기 위해 보더 바텀과 라이트로 값을 설정하고 텍스트는 중앙으로 정렬했다. 보더 값이 겹치는 것을 막기 위해 nth-child를 이용하여 특정 영역에 보더를 none 처리했다. 뉴스 리스트의 이미지는 중앙 정렬 공식을 사용하여 정렬하였다.
다음으로 콘텐츠의 블로그 영역의 css 작업을 진행하였다. 블로그도 뉴스와 같이 각각의 위치와 공간을 세팅하고 컬러와 폰트를 입혔다. 제목은 녹색으로 다른 영역은 회색과 블랙으로 설정하고 상단의 블로그 글은 이미지의 옆쪽에 글이 위치하게 정렬하였다. 이 또한 디스플레이 플렉스를 활용하여 작성하였다. 블로그 하단에 있는 영역은 상단과 다르게 내용 없이 x축으로 이미지를 정렬하였다. 보더 바텀으로 미세한 줄을 입력하고 피딩 탑으로 공백을 주었다. 블로그 영역은 a 태그가 있는 영역을 제외하고 두 번 반복하여 세팅하였다. 공간이 잘리는 것을 막기 위해 기존에 설정한 메인의 height 값을 지웠다.
