학습한 내용
- 덴마크 쇼핑몰, https://helbak.com/ 레이아웃 따라해보는 작업
- 상단영역
- 메인영역
- 하단영역
- 기타 HTML, CSS
덴마크 쇼핑몰은 반응형 레이아웃 입니다.
이미지는 https://placeholder.com/ 로 대체하였습니다.
모바일 상단, 메인 영역
모바일 하단 영역
PC 화면
작업순서는 상단, 메인, 하단 순으로 진행합니다.
html 영역
css 모바일 화면
css pc 화면
상단 영역작업
로고, 메뉴 3개
PC는 한줄 모바일은 2줄(상단 로고, 하단 메뉴)로 나누어 집니다.
상단은 크게 2개로 나누었습니다.
(모바일버전 부터 작업합니다)
CSS
기본 태그 css를 지정합니다. 마진0, 패딩0, 리스트의 점, a태그의 밑줄 제거
미디어 쿼리는 em 단위를 사용합니다.
헤더영역
모바일에 2줄로 로고는 100%, 메뉴3개는 33.33%로 잡습니다.
모바일에서는 헤더영역이 고정되지 않아 스크롤을 내리면 안보이게됩니다.
PC영역에서는 position: fixed; top: 0; left: 0; 설정하여 스크롤을 내려도 고정하게 만듭니다.
로고영역 설정
모바일에서는 로고 클릭가능 영역을 전체로 설정합니다.
PC에서는 크게 잡지 않습니다.
상하 가운데 정렬
top: 50%;
transform: translateY(-50%);메인영역
리스트 형태라서 ul, li 태그를 사용합니다.
h2태그와 이미지태그를 article 태그로 묶어서 사용하였습니다.
이미지 크기 563px에 근접하게 높이를 56.25%로 설정합니다.
@media (min-width: 60em) 설정시 넓이는 50%, 높이는 56.25의 절반인 28.125%로 설정합니다.
하단영역
Terms and conditions, cookies, 지불방식, 상단으로 올라가는 버튼이 있습니다.
모바일 화면에서는 세로방향 가운데 정렬로 나타냅니다.
pc화면에서는 왼쪽, 가운데, 오른쪽 화면으로 나타냅니다.
왼쪽, 오른쪽은 float를 사용하여 배치하였습니다.
가운데화면은 position: absolute; bottom: 0; left: 50%; margin-left:-33px 사용하여 가운데에 배치하였습니다.
html 에서 id는 고유하게 한개존재 합니다. clss는 여러개 사용해도 괜찮습니다.
css에서 id 선택시 #을 사용합니다.
a 태그에서 href="#"을 기본으로 넣습니다. a태그를 클릭하면 현재 페이지 상단으로 이동하게 됩니다.
href="#footer" 을 넣게된다면 id가 footer인 위치로 이동하게 됩니다.
텍스트 사용시 화면 자동 줄바꿈을 방지시 white-space: nowrap; 사용합니다.
박스 밖으로 넘어간 텍스트를 안보이게 처리하려면 overflow: hidden;을 사용합니다.
박스 경계선에서 짤린 텍스를 말줄임으로 표시하기위해서 text-overflow를 사용합니다.
자주사용하는 속성들은 클래스로 만들어서 html에 추가해주면 됩니다.
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} 학습한 내용 중 어려웠던 점 또는 해결못한 것들
쇼핑몰의 footer 영역의 형제관계에있는 left-nav 클래스, right-methods 클래스는 정상 적으로 레이아웃 위치를 잡았지만 to-top-button은 header 아래로 이동하는 문제가 있었습니다.
해결방법 작성
결과적으로는 clear:both를 사용하여 해결하였습니다.
해결과정에서 원인은 알았지만 어디부분에 코드를 넣어야할지 몇번 시도하다 해결하였습니다.
학습 소감
레이아웃작업이 여전히 쉽지는 않다고 느껴집니다.
반복작업을 줄여주는 클래스는 편해보입니다.
