211111-211114 웹접근성 프로젝트 (3) 반응형작업, JS

옛슬·2021년 11월 13일

PROJECTS 🥞

목록 보기

4/6

개요

11월 11일 ~ 11일 14일까지 약 4일간 한 코딩에 대한 글입니다 😫

1. 반응형 작업전 다시 CSS 뜯어고치기

처음에 만들고 나서 뿌듯했는데 그 다음날 보니 엉망진창인듯한 느낌을 받은 사람 나야나 😂. 성격 상 그냥 넘어가기에는 너무나도 찝찝했던 디자인을 다시 뜯어고쳤다. 확실히 시안없이 웹사이트를 만드는 것은 너무나도 어렵다는 것을 깨닫고 디자이너의 중요성을 다시한번 느꼈다 🙃

전체적인 여백과 header 부분을 다시 뜯어고쳤다. 참고한 웹사이트는 국내 대학교 웹사이트! 개인적으로 대학교 웹사이트들이 딱딱한 느낌을 주면서도 말끔하게 정돈되어있는 느낌을 받아서 해당 웹사이트들을 참고해서 다시 레이아웃을 짰다.

2. 디자인의 욕심은 반응형을 힘들게 하곤 하지 😥

뚝딱뚝딱 반응형을 만들 수 있을거란 생각은 나의 크나큰 착각이었다 😂 정말 이번 웹사이트를 하면서 지옥을 경험한거 같았다.
모바일버전 메인메뉴)

데스크탑 메인메뉴)

확연히 다른 두 네비게이션...이런게 몇개 있었다. 예를 들면, 슬라이더 형식이었다가 슬라이드를 사용하지 않던가 등등 🥺
고치는게 많다보니 반응형은 또 다른 웹사이트를 구축하는거와 다르지 않았다. 만들면서 모바일버전을 그렇게 만든 내 자신을 원망하면서 코드를 썼다. 그래도 웹사이트를 완성하고 난 지금은 굉장히 뿌듯하다!

3. 그래서 배운 코드는... 👩‍💻

display: table | display: table-cell


  .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....) 다른 방법을 찾아보니 이런 신박한 방법이 있었다 💕

background-image로 line 만들기

background로 navigation line 만들기... 정말 힘들었다 그 이유는 gnb-list안에 제목(정보공개와 같은)이 있고 그 안에 sub-navigation이 있는 형태였는데, 그러다보니 ::after를 사용하거나 border-right를 사용하는 경우 +버튼을 눌러서 또 다른 snb(depth2)가 나올때 약간 흔들리기도 하고, 줄이 늘어나지 않는 등 자잘한 버그가 너무 많았다. 그러다가 찾은 게시글
https://javascript.plainenglish.io/2-css-features-we-didnt-know-exists-f039471b18cb
해당 게시글은 stripe background를 만드는 방법을 보여주는데, image의 경우 repeat이 가능하기 때문에 자잘한 연속된 패턴을 넣는데 좋을거 같아 해당 방법을 사용하게 되었고, 해당 웹사이트에서 받은 이미지를 확인해보니 navline이라는 파일도 있었다!

크기에 따라 Slick 유/무 정하는 코드


  $(window).on("resize", function () {
    if (
      $(window).width() < 1199 &&
      !$(".trends-list").hasClass("slick-initialized")
    ) {
      $(".trends-list").slick("reinit");
    }
  });

요건 stackoverflow에서 참고해서 내가 다시 짠 코드 일부 슬라이드가 데스크탑 사이즈가 되면 사라지는데 다시 쭐일 때 slick이 destroy되어서 사이트가 키우고 줄이면 망가져 보였다. 그래서 resize할 때 해당 클래서가 없으면 다시 slick이 시작될 수 있도록 코드를 넣어주었다.