0604_개발일지

Jurang Lee·2021년 6월 4일
0

오늘은 덴마크 쇼핑몰 사이트 helbak.com을 카피캣했다. 사이트의 이미지는 저작권의 우려가 있어 레이아웃을 중심으로 카피했다. 먼저 html세팅을 하는데, 이 사이트는 브라우저의 폭을 줄이면서 자연스럽게 리사이징되는 반응형 웹사이트이므로 meta태그 부분에 뷰포트를 삽입해 주었다. 또한 메타에 설명과 제작자, 키워드를 넣어보았다. 타이틀은 helbak으로 삽입하였다. css도 초기화작업으로 html의 모든 태그에 마진과 패딩을 넣어주기 위해 별표를 기준으로 값을 적는다. 이외 html, body도 100%로 지정해주고 바디와 기타 태그의 값을 디폴트로 지정해준다.

우선 상단부분을 작업해보자. pc버전의 상단은 한 줄로, 모바일은 두 줄로 나타난다. 왼쪽 로고가 있는 부분을 h1태그로 묶고 이미지를 placeholder.com에서 크기를 변경하여 넣는다. 우측의 메뉴 버튼이 있는 구역은 버튼태그로 묶고 각각의 버튼을 li태그로 작성해준다. css로 넘어와서 a태그는 인라인 요소이기 때문에 디스플레이를 블럭으로 설정하고 높이와 너비값을 적어준다. 로고의 이미지의 값을 적용한 뒤에 사이트를 확인하면 로고가 중앙에 위치하게 되는데 이는 모바일을 기준으로 작성되었기 때문. 미디어쿼리 바깥에는 pc버전이 있는 것이 보통이지만 이번에는 반대로 모바일을 먼저 작성한다.
다음으로 상단의 버튼 디자인작업을 했다. li태그를 지정하여 높이와 너비를 설정하고 float을 사용하여 3차원적 특징을 준다. 그래서 이 공간의 크기가 부모에게 영향을 줄 수 없게 되는데 만약 세 개의 버튼의 높이도 포함된 수치를 header태그의 높이로 하려면 ul태그에 overflow:hidden;을 적용하면 된다. 그리고 메뉴 버튼의 레이아웃을 진행한다. 메뉴버튼의 여백에도 손가락모양의 클릭표시가 나게 디스플레이를 블럭으로 적어준다. 또한 텍스트얼라인을 중앙으로 설정한다. 각각의 버튼에 nth-child로 표기하여 색상을 정해주고 메뉴버튼의 이미지를 y축으로 중앙정렬하기 위해 top과 트랜스폼 태그를 이용한다.
이제 pc버전의 상단 부분 레이아웃 작업을 했다. 미디어쿼리를 사용해 min-width값을 설정하고 모바일 버전과는 다르게 상단 부분을 스크롤을 내려도 고정하기 위해 position:fixed를 사용한다. 또한 상단 부분이 항상 위로 올라오기 위해 z인덱스를 가장 높은 값으로 설정했다. 높이값도 header태그 안에서 변경해준다. 로고가 클릭하는 범위를 모바일보다 줄이기 위해 로고의 크기를 변경한다. 세개의 버튼을 기존의 위치에서 우측 위로 이동하기 위해 left와 top을 사용했다. 높이값도 로고와 같이 설정해준다.

이번엔 제품명이 나오는 영역의 설계도면을 작성해 보았다. 메인태그는 익스플로러의 호환을 위해 role과 함께 작성하고 ul태그와 li태그 안에 클릭을 할 때에 이동을 위해 a태그를 사용하여 제품명과 이미지를 넣는다. 이 상태에서 모바일버전 css작업을 한다. a태그를 지정하여 포지션 렐러티브를 적용하고 공간의 크기를 설정한다. img태그 안에 width와 height를 100%로설정하여 a태그 공간 안의 100%로 지정되도록 한다. 그러면 공간의 크기가 브라우저 폭에 따라 달라지게 된다.
각 제품명 영역에 대한 텍스트를 지정하여 포지션을 앱솔루트로 지정하고 img태그는 2차원이고 텍스트는 3차원이어서 글자가 위로 나오게 된다. 마찬가지로 공간의 크기와 위치를 설정하고 폰트와 색상도 지정한다.
다음으로 pc버전의 디자인을 적용해본다. pc버전은 모바일과 달리 좌우로 배치가 되어있다. 미디어쿼리로 크기를 원래 비율로 유지하기 위해 링크의 절반값을 넣는다. 여기서 좌우배치를 위해 float을 레프트로 설정해준다. 여기서 47em 부분에서 윗부분에 border가 보이지 않는데, 이는 오버플로우 히든을 적용하고 메인과 ul태그 사이에 padding top을 pc버전 상단 높이만큼 적용해주어 레이어가 겹치는 현상을 막는다.
마지막으로 페이지 가장 하단에 있는 footer영역을 설정했다. html에서 id로 footer를 넣고 class로 왼쪽과 중앙, 오른쪽을 설정한다. css에서 포지션을 렐러티브로 입력하고 각각의 위치를 지정해준다. 왼쪽과 오른쪽의 풋터 영역 모두 텍스트 얼라인을 센터로 설정해주고 오른쪽 아이콘에 각각의 색상을 지정해준다. 가장 위로 가는 버튼에도 위치와 크기를 지정해준다.
모바일 버전에서는 동일하게 지정을 해줬는데, 왼쪽 부분의 위치가 중앙 윗편으로, 오른쪽 아이콘들의 위치가 그 아래로, 그리고 가장 아래 지점에 페이지 맨 위로 가는 버튼을 지정해준다. 모바일에서는 ul과 li, h3영역에 디스플레이를 인라인 블럭으로 설정해주었다. 오른쪽 영역다섯개의 영역에 클래스를 연달아 기입을 했는데, 이는 여러개의 클래스 중에서 one이라는 클래스를 가진 페이먼트를 선택을 하라는 의미이다. 띄어쓰기를 할때와는 완전 다른 의미가 된다.

마치기 전에 실무팁을 배웠다. 첫째로 같은 아이디가 두개 존재해서는 안되는 이유였다. ul태그의 li태그 안에 a href로 링크를 걸 수 있는데, 이 링크로 다른 웹사이트를 지정할 수도 있고 다른 종류의 html도 지정할 수 있고 id값을 지정하여 해당 섹션으로 이동하게 할 수도 잇다. 이때 같은 아이디 값이 두개가 있다면 먼저 작성된 아이디 값의 섹션으로 이동을 하게 되나 개발자 입장에서는 혼란이 오게 된다. 때문에 a태그 속성에는 id가 들어갈 수 있어 하나의 id속성값은 하나의 html에만 존재해야 한다.
다음으로 말줌임표에 사용되는 코드를 알아보았다. 정해진 영역 안에 글자가 넘어가면 박스 바깥까지 글자가 튀어나가게 된다. 이것을 white-space: nowrap;와 overflow: hidden;과 text-overflow: ellipsis; 이 세가지 속성을 이용하여 박스 안에 말줄임표로 표시할 수 있다. 말줄임표를 여러번 사용하게 되면 각각의 태그나 class에 위의 속성값을 다 나열할 필요 없이 css에서 ellipsis로 역할을 담당하는 클래스를 만들어 위의 세개의 속성값을 적용하고 html에서 클래스를 추가해서 이용할 수 있다. 이 밖에도 클래스 명으로 마진이나 패딩을 이용하여 미리 만들어진 css코드를 html에 적용하여 사용할 수도 있다.







profile
웹프로그래밍

0개의 댓글