오늘은 지난 시간에 이어 네이버 웹사이트 카피캣을 하였다. 이전에 만들어놓은 메인 페이지에서 쇼핑 파트에 새로운 shop.html을 연결하였다. css는 기존의 파일을 이어서 사용했기 때문에 링크 태그로 css파일을 연동시켰다. shop.html파일도 인덱스 파일과 동일하게 html 독타입 코드를 기본으로 설정하고 바디태그를 아이디로 shop-body로 짓고 새롭게 시작하였다.
오늘 쇼핑 부분에서 작업한 영역은 쇼핑 페이지 상단의 헤더 부분과 아래의 메인 컨테이너 카테고리 리스트의 두 개 영역이다. html에서 헤더 영역과 메인 영역을 작성하고 헤더 안에 div 서랍장을 만들었다. 상단 헤더 영역은 로고가 있는 상단 top 영역과 검색창이 있는 상단 middle 영역과 상단 네비 태그 안에 나열되어 있는 메뉴들로 다시 나눠진다. 이를 먼저 작성하고 css로 이동했다.
먼저 shop-body 전체 쇼핑 페이지의 백그라운드 컬러를 설정하고 네비 태그와 메인 태그에 들어갈 컨테이너의 크기를 1300픽셀로 정했다. 헤더 부분 상단과 middle 부분의 크기와 색상, 보더를 지정했다. nav 태그 영역은 width를 100%로 설정하고 백그라운드 컬러를 사이트와 동일하게 흰색으로 지정했다. 네비 태그에 약간의 밑줄을 위아래로 삽입했다. 네비 태그의 ul에 li에는 마진 라이트 값을 넣어 li 값 사이에 여백을 넣었다.
헤더 영역 작성을 마친 뒤에 메인 영역의 설계도면 작업을 시작하였다. 메인은 익스플로러 호환을 위해 role과 함께 작성하고, id는 shop-main으로 적어주었다. nav 태그와 마찬가지로 div 태그 안에 class로 shop-container를 넣고 그 안에 다시 메인 영역의 list를 만들었다. 카테고리 리스트는 총 8개를 만들었는데, 그중에 첫 번째 리스트는 왼쪽과 오른쪽이 나뉘어 있었다. 왼쪽은 category-left, 오른쪽은 category-right로 클래스를 지정했다.
첫 번째 리스트의 왼쪽은 카테고리와 카테고리의 내용이 들어가므로 h3 태그와 li의 a 태그로 작성을 해주었고, 오른쪽 위쪽 같은 경우에는 사이트 상에서는 그림과 글이 하나의 이미지로 되어있으나, 실습에서는 글과 이미지를 각각 div 서랍으로 묶어 작성하였다. 오른쪽 아래편에는 태그들이 나열도 디어 있어 스팬 태그로 각각의 태그를 입력해 주었다. 클래스 명은 tag로 작성하였다.
main 태그에 대한 css 작업을 진행하였다. 메인의 전체 리스트를 묶는 list-wrap의 디스플레이를 플렉스로 설정하여 리스트들이 x축으로 정렬되게 만들었다. flex에서 justify-content를 space-between으로 설정하여 리스트 간에 간격을 주었다. 여기서 정렬이 잘되지 않아 컨테이너의 width 값을 조정했다. 그다음으로 이전에 작성한 shop-container 밑에 shop-border와 width 100%, height 100%에 해당하는 class를 지정하여 첫 번째 리스트 div 서랍장 category-wrap에 지정하였다. 그것으로 첫 번째 리스트 전체에 보더 값과 높이, 너비가 설정되었다.
그리고 첫 번째 리스트의 너비와 높이를 지정하고 카테고리 랩의 오버플로우를 히든으로 지정하여 공간을 넘어가는 내용을 보이지 않게 설정하였다. 카테고리 왼편의 플롯을 left로 지정하고 width와 height, 백그라운드 컬러를 설정하였다. 카테고리가 적혀있는 h3에 폰트 사이즈와 컬러를 지정하고 보더와 패딩 값을 설정하였다 카테고리 내용이 있는 a 태그는 디스플레이를 블록으로 지정하여 패딩 값을 넣었다. 컬러는 h3 태그와 동일하게 넣었다.
이미지와 태그가 있는 첫 번째 리스트의 카테고리 오른 편에 플롯을 right로 지정하고 width와 height와 백그라운드 컬러를 지정하였다. 여기서 백그라운드 컬러는 흰색으로 지정했는데, width의 크기를 실습 상에 182로 설정하였더니 크기가 초과되는지 내용이 나오지 않아서 임의로 181.5로 지정했다. 이미지와 글이 있는 영역은 category-top 영역인데 이 영역의 높이와 너비, 보더 값을 설정하고 텍스트는 중앙으로 배치하였다. 그 하위 div 서랍인 category-info에 패딩 값을 넣어 영역을 아래로 내려주었다.
카테고리 오른 편의 위와 아래의 헤드라인은 각각 디스플레이를 인라인-블록으로 지정하고 폰트 사이즈와 보더, 컬러 값을 지정하였다. 사이트와 같은 초록색 박스로 결과가 나오게 된다. 마찬가지로 top에 h3과 가격 영역의 폰트 사이즈와 색상을 지정해 주었다. 다음으로 카테고리 오른 편의 bottom 부분의 패딩 탑을 넣고 텍스트는 중앙으로 정렬해 주었다. 각각의 태그는 디스플레이를 inline-block으로 설정하고 max-width 값을 넣어 글이 박스를 넘어가지 않도록 설정하였다. 마진과 패딩, 라인 헤이트를 설정하였다.
두 번째 리스트의 경우 이미지가 통으로 들어갔기 때문에, html에서 기존에 css에서 작성한 w-100, h-100과 shop-border를 설정했다. 또한 css에서 list-item 영역 하단에 리스트 아이템의 배너 안에 이미지를 width 100%, height 100%로 설정했다.
오늘 작성한 내용 중 width 값을 설정하고 태그의 디자인 작업을 하는 도중 실습과 다르게 적용되는 부분이 있어 임의로 약간의 조정을 해 보았다. 이와 같은 부분에서 더욱 연습을 해보아야 할 것 같다.