드디어 1차 결과물이 나왔다..
프론트 단은 지식이 부족하여, HTML/CSS를 사용하여 틀을 만드는 것이 쉽지 않았다.
때문에 코드가 이해가 안가고 매우 난잡할 것이다!
모바일 및 부라우저 별 최적화는 물론이고, 틀도 잘못 잡은데다, Javascript를 쓰면 편할 것을 CSS로 작성하여 매우 길어진 부분도 있다
물론 결과물을 낼 때쯤 이것을 깨닫고 모두 갈아엎을(?) 수 있었다. 하지만 "지금의 나는 얼마나 성장했나?"를 비교하는 것도 재밌을 것 같아, 일단은 그냥 놔두었다.
덕분에 HTML/CSS과 Javascript는 어떻게 활용하면 좋을지, CSS에는 어떤 단점이 있는지 등을 깨달을 수 있었다.
자세한 사항은 모두 끝난 뒤에 남기도록 하고, 우선 결과물 부터 확인해보자.
0. 전체적인 구조
전체적인 구조부터 간략히 살펴보자면, 크게 header, container, footer로 나뉜다.
header는 메뉴와 제목, 배경을 담당하고,
container는 말 그대로 내용의 메인을 담고있고,
footer는 copyright와 관련 링크를 담고있다.
(footer는 별게없으니 생략한다)
우선 header부터 살펴보자.
1. HEADER - 메뉴
메뉴는 앞서 이야기한 바와 같이, 3차 카테고리까지 링크를 제공하는 기능을 담고있다.
그리고 스크롤을 내려도 컨텐츠를 가리지 않도록 메뉴에 스크롤 애니메이션 효과를 주었다.
-
3차 카테고리 기능
카테고리는 보는 것처럼 드롭 다운으로 하되, 슬라이드 기능을 넣어주었다.
또한 그 많은 카테고리를 일일히 누르는 건 짜증날 수 있기에, hover로 펼쳐질 수 있게끔 하였다.
코드가 너무 기므로, 주요 부분만 확인해보자. -
구현
레이아웃 구조는 ul/li로 구성하였다.
<li class="nav_dropdown">
// 메인 UI 요소
<a class="item2" href="#">카테고리 V</a>
// 펼쳐질 드롭다운 리스트
<ul class="first_drop">
<li class="thema">
<a class="thema1" href="#">Thema1</a>
</li>
<li class="thema">
<a class="thema2" href="#">Thema2</a>
</li>
<li class="thema">
<a class="thema3" href="#">Thema3</a>
</li>
</ul>
</li>"카테고리 V"라는 곳에 마우스를 올리면, 그 밑의 "first_drop"이 펼쳐지는 구조이다.
그리고 슬라이딩 이벤트 효과는 CSS의 opacity/height 속성을 transition으로 구현하였다.
// 숨겨진 드롭다운 리스트
.first_drop {
position: absolute;
background-color: rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity .25s ease .1s;
}
// hover 이벤트
.nav_dropdown:hover .first_drop {
opacity: 1;
}opcaticy를 transition으로 0 -> 1로 서서히 변하도록 하여 Fade In/Out을 주고,
// 리스트 각각의 UI 요소들
.thema {
height: 0;
overflow: hidden;
transition: height .25s ease .1s;
}
// hover 이벤트
.nav_dropdown:hover .thema {
overflow: visible;
height: 40px;
}height도 0 -> 40px로 서서히 변하도록 하여, 드롭다운이 나타나게 했다. 두 결과를 합쳐서, 슬라이드와 비슷한 효과를 만들어 내었다.
스크롤 애니메이션 효과
메뉴가 항상 상단에 고정되어 있다면, 컨텐츠를 가려 눈에 거슬리게 된다.
따라서 스크롤 다운 시에 메뉴가 사라지는 기능을 Javascript로 구현하였다.
(이 부분은 다른분의 블로그의 코드를 그대로 가져왔다.
주소는 https://webdir.tistory.com/481 이곳이다.)
2. HEADER - 검색 UI
(왼쪽부터 차례대로 #search_cat, #saerch, #search_submit이다)
검색 UI는 Flex를 이용하여 구현했다.
#searchbar {
display: flex;
...
}
#search_cat {
flex-grow: 3;
...
}
#search {
flex-grow: 8;
...
}
#search_submit {
flex-grow: 1;
...
}flex-grow를 이용하여 적절한 비율을 정해주면, 알아서 컨텐츠 내부를 꽉 채워주기 때문에 편리하다.
그리고 왼쪽의 카테고리 선택 UI는 헤더의 메뉴와는 달리, Javascript로 간단히 구현하였다.
// 클릭 이벤트
$(".select_cat").click(function() {
$(".select_list").slideToggle();
});
// 드롭다운 이벤트
$(".select_list li").click(function() {
var select_category = $(this).text();
$(".select_cat").text(select_category+" V");
$(".select_list").slideToggle();
});클릭 이벤트에 한해, slideToggle로 메뉴를 열고 접히게끔 하였다. 또한 값을 불러와, 선택란의 값으로 바꾸는 드롭다운 이벤트도 추가하였다.
(이것을 깨달은 후, 큰 충격을 받았다..이렇게 간단한 걸 난...)
3. CONTAINER - 컨텐츠 구성
테마/카테고리 페이지의 컨텐츠는 말한대로 격자 형식으로 구현하였다.
격자 형태는 그리드만한 것이 없지만, 필자는 화면 크기에 따라 유연히 행과 열이 바뀌길 원했기 때문에, Flex로 구성하였다.
// 각 카테고리 버튼의 전체 리스트
.theme_list {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}flex-wrap의 속성을 wrap으로 설정하여 "컨테이너의 크기에 맞춰서 유연하게 행을 배치"할 수 있게 하였고,
align-content를 space-around로 하여, 각 행간의 간격을 벌려주었다.
4. 2차 결과물은...
일단 만들어내긴 했지만, 여러가지로 부족한 점이 많다.
이를 보완/추가 해야할 점은 다음과 같다.
- 전체적인 수정 및 리팩토링
- 모바일 및 브라우저 최적화
- 자동 검색 기능 구현(Jquey AutoComplete)
- 페이징 처리 UI 구현
- 나만의 스크롤 애니메이션 구현
위의 사항을 보완하여 2차이자 최종 결과물이 나올 것 같다.
특히 스크롤 애니메이션은 나의 코드가 아니어서, 매우 안타까웠다. 그 부분은 새로이 작성할 생각이다.
그리고 서버단도 너무 늦어지면 안되니, 병행할 예정이다.
(할 수 있을지 모르겠다ㅎㅎ...ㅇㅁㅇ..)
그럼 다시 화이팅!
