텀블벅 클론 페이지 제작
제작기간 23.11.20~23.11.23
HTML과 CSS를 이용해 실제 사이트의 레이아웃을 구현하는 것에 중점을 두었습니다.
<header>, <section>, <aside> 등 시맨틱 태그를 가능한 한 사용하여 추후 수정을 위해 가독성을 높이려고 노력했습니다.
flex와 grid를 가능한 한 활용했습니다.
실제로 홈페이지 레이아웃 구조를 참고하기보다는 스스로 해석하여 구조를 완성했습니다.
BEM방법론을 일부 적용했으며 너무 길어지지는 않게끔, 적절하게 반영하기 위해 노력했습니다.
.main-menu {
position: sticky;
top: 0px;
width: 1100px;
background-color: #fff;
display: flex;
justify-content: space-between;
z-index: 10;
}
.main-menu__list {
display: flex;
align-items: center;
}
.main-menu .main-menu__list__text{
font-weight: 700;
}
.main-menu__list li {
padding: 10px 20px 10px 0;
}
상단 주요메뉴가 스크롤을 내려도 상단에 고정으로 위치하게끔 만들었습니다.
이 과정에서 scrollY를 계산하여 주요메뉴를 뷰포트 상단에 고정하는 방식을 js로 구현하려 했으나,static과 fixed 속성을 동시에 가진 display:sticky를 알게 되었습니다. 기본적으로 static 속성이지만 어느 지점에 다다르면 fixed가 되는 간단한 css 속성입니다.
실제 페이지와 다르게 구현한 부분
- 홈페이지의 실제 레이아웃 구조를 거의 확인하지 않았으나 카테고리의 드롭다운 메뉴는 세부 카테고리(ex.전체, 보드게임, 의류)는
flex로 쌓인 것을 알 수 있었습니다. 그렇지만 단순한 메뉴 구조상, 확실한 나열 규칙이 없다고 생각하여 유지 보수를 위한grid를 선택했습니다.
글을 작성하던 도중 같은 열끼리 어느정도 비슷한 주제로 묶인다는 것을 발견했습니다. 이런 형태는 어떤 식으로 구현하면 세부 카테고리를 더 추가하는 등의 유지 보수의 효율성 측면에서 좋을지 계속 고민하고 있습니다.
- 슬라이드가 이용되는 부분은 swiper 라이브러리를 사용했습니다. js를 사용한 유일한 부분이고, 주 목적과는 거리가 있어서 자세히 구현하지는 않았지만 무난하게 사용할 수 있었습니다.
그래도 어떤 구조로 되어있는지 자세히 익혀야 자유자재로 사용할 수 있을 것 같습니다.
실제로 그리드 슬라이드를 만들 때 제대로 작동이 되지 않아 일반적인 그리드를 사용했습니다.
제작 후기
다양한 레이아웃을 구성하고 싶어 선택했지만 여러모로 배울 점이 많은 사이트라는 생각이 들었습니다.
활용도가 다양한 슬라이드 기능을 더 잘 구현하고 싶다는 생각이 들었고, 좋은 라이브러리도 내가 사용법을 잘 모르고 사용하게 된 것이 크게 다가왔습니다.
이후에도 똑같이 구현하고 싶었던 세부적인 기능들을 추가해 살을 붙여나갈 생각입니다.
