처음에 만들고 나서 뿌듯했는데 그 다음날 보니 엉망진창인듯한 느낌을 받은 사람 나야나 😂. 성격 상 그냥 넘어가기에는 너무나도 찝찝했던 디자인을 다시 뜯어고쳤다. 확실히 시안없이 웹사이트를 만드는 것은 너무나도 어렵다는 것을 깨닫고 디자이너의 중요성을 다시한번 느꼈다 🙃
전체적인 여백과 header 부분을 다시 뜯어고쳤다. 참고한 웹사이트는 국내 대학교 웹사이트! 개인적으로 대학교 웹사이트들이 딱딱한 느낌을 주면서도 말끔하게 정돈되어있는 느낌을 받아서 해당 웹사이트들을 참고해서 다시 레이아웃을 짰다.
뚝딱뚝딱 반응형을 만들 수 있을거란 생각은 나의 크나큰 착각이었다 😂 정말 이번 웹사이트를 하면서 지옥을 경험한거 같았다.
모바일버전 메인메뉴)
데스크탑 메인메뉴)
확연히 다른 두 네비게이션...이런게 몇개 있었다. 예를 들면, 슬라이더 형식이었다가 슬라이드를 사용하지 않던가 등등 🥺
고치는게 많다보니 반응형은 또 다른 웹사이트를 구축하는거와 다르지 않았다. 만들면서 모바일버전을 그렇게 만든 내 자신을 원망하면서 코드를 썼다. 그래도 웹사이트를 완성하고 난 지금은 굉장히 뿌듯하다!
.gnb {
display: table;
width: 100%;
height: 100%;
position: relative;
padding: 0;
}
.gnb-list {
width: 158px;
display: table-cell;
position: relative;
background: url(../images/navline.png) left top repeat-y;
}
display: table
, 자식에 display:table-cell
을 주면 자식태그의 크기가 부모 크기의 1/n이 자동적으로 계산되어 width를 가지게 된다. flex
를 사용해도 되지만 sub navigation이 내려오는 상황에서 이상하게 작동되어서(IE....) 다른 방법을 찾아보니 이런 신박한 방법이 있었다 💕::after
를 사용하거나 border-right
를 사용하는 경우 +버튼을 눌러서 또 다른 snb(depth2)가 나올때 약간 흔들리기도 하고, 줄이 늘어나지 않는 등 자잘한 버그가 너무 많았다. 그러다가 찾은 게시글
$(window).on("resize", function () {
if (
$(window).width() < 1199 &&
!$(".trends-list").hasClass("slick-initialized")
) {
$(".trends-list").slick("reinit");
}
});
✅ 크로스브라우징 전체 체크 (약 60% 완료)
✅ 키보드 관련 JS, Jquery 공부 및 스크립트 짜기
✅ 웹사이트를 보니 자잘하게 놓친 디자인이 있어서 해당 부분은 보안해야할 거 같다