🖥️ 글항아리

• 사이트명 : 글항아리
• 제작기간 : 22.12.23 ~ 23.01.20 (28일 소요)
• 사용언어 : html, css, javascript, node, MySql
• 라이브러리 : swiper
• 분류 : 반응형, 개인 리뉴얼 사이트
• 글항아리 사이트 배포 : https://geulhangariproject.herokuapp.com/
• 글항아리 깃허브 주소 : https://github.com/yoonchungah/projectgeulhangari.git

🙄기존 웹사이트 분석

전체적으로 사이트가 정돈되지 못한 느낌으로 사용자가 이용하기에 정보가 부족하다고 느꼈다

특히 메인 네비게이션이 따로 존재하지 않고 로고를 눌러야만 확인할 수 있는 부분에서

ul/ux 를 고려하지 않았다고 느꼈으며, 사용자와 소통할 수 있는 페이지가 따로 없는 것을 확인했다

🤓웹사이트 리뉴얼 방향

메인 네비게이션을 상단에 고정하여 서브페이지와의 이동이 자유로울수 있도록 조정하고자한다

기본으로 보여지는 메인페이지에서 서브페이지들에 대한 내용을 확인할 수 있도록 한다

동적인 요소를 사용하여 사용자의 시선을 끌도록 한다

일정 영역에서 탑버튼이 생성되어 스크롤이 길어져도 한번에 상단으로 이동할 수 있도록 한다

게시판을 활성화 하여 사용자와의 의사소통을 활발하게 조정한다

모바일 사용자를 고려하여 반응형으로 작업한다

👩🏻‍💻 Code Review

1. 스크롤할 때 특정포인트에서 header 배경색 변경

🔎 코드분석

window.onscroll = function () {
  headerChange();
}

let header = document.querySelector('header');
  function headerChange(){
  if ( document.body.scrollTop > 75 || document.documentElement.scrollTop > 75){
    header.classList.remove("scroll-header");
    header.classList.add("scroll-header");
  } else {
    header.classList.remove("scroll-header");
  }
}

헤더를 변수로 잡고 윈도우가 onscroll 될 때 바디의 scrollTop 이 75px보다 크거나

도큐먼트 엘리먼트 값의 scrollTop이 75px보다 클때 클래스 속성을 add/remove함으로써

배경색을 컨트롤했다 이때의 75px은 헤더의 높이를 나타낸다

.scroll-header{
  background-color: #333;
}

스크립트의 조건으로 추가한 클래스 속성엔 간단히 배경색을 바꾸어주었다.

2. 드롭다운 메뉴

🔎 코드분석

let subList = document.querySelectorAll('.sub_list');
let subMenu = document.querySelectorAll('.sub_menu');

  for( i = 0 ; i <subList.length; i++){      
      let subLorder = subList[i];
      let subMorder = subMenu[i];
        subLorder.addEventListener('mouseenter',()=>{
        subMorder.style.height = "140px";
        }),
        subLorder.addEventListener('mouseleave',()=>{
          subMorder.style.height = "0px";
        })
  }

서브 메뉴를 감싸는 li에 공통적인 class명을 주고

서브 메뉴를 감싸고 있는 ul에게도 공통적인 class명을 줬다

그리고 그것을 변수로 잡아줬다 for문을 공통적으로 사용하기 위해서이다

💣 문제발생

for문을 사용하고 그 안에 한 번 더 변수를 선언해줬는데 그냥 subList[i] 쓸 경우 인식을 못하는 문제가 발생했다

그리고 세로 길이가 길어지면서 천천히 떨어지는 효과를 주려고 기본 css의 height값을 0으로 잡은 뒤,

js에서 세로 값을 %로 지정하는 바람에 인식하지 못하고 제대로 안 떨어지는 문제가 있었다

💊 문제해결

subList[i]를 for문 안에서 한 번 더 변수를 선언해서 담아줬다

height값은 %가 아닌 px로 지정해 주었으며, mouseenter와 mouseleave를 사용하여

드롭다운 메뉴로 만들어주었다

3. 모바일 메뉴와 스크롤을 아예 숨기는 방법

🔎 코드분석

let navbar_menu = document.querySelector('nav>ul');
let mobile_menu = document.querySelector('.mobile_menu');
let scrollHidden = 0;

mobile_menu.addEventListener('click', ()=>{
  navbar_menu.classList.toggle('nav_active');
  mobile_menu.classList.toggle('line_active');
 
  if(scrollHidden == 0){
    document.body.style.overflow = "hidden";
    scrollHidden = 1;
  } else{
    document.body.style.overflow = "visible";
    scrollHidden = 0;
  }
});

기존에 가로로 나열된 메인 메뉴를 변수로 잡고 모바일 메뉴를 감싸고 있는 부모 또한 변수로 잡아줬다

그리고 메인 메뉴에 이벤트 리스너를 걸어 클릭했을 때 class명이 토굴로 넣었다 빠지게 조절했다

가로로 나열된 메인 메뉴를 세로로 바꾸는 것은 css의 display flex를 활용했다

스크롤이 없어지는 것은 scrollHidden을 이용하여 특정 조건에서 스크롤이 없어지게끔 해주었다

💣 문제발생

scrollHidden 이 제대로 먹지 않아 스크롤이 전혀 사라지지 않는 문제가 있었다

💊 문제해결

먼저 scrollHidden에 0이라는 값을 주고 이 값을 변하게 하여 스크롤을 사라지게 해주었다

if문을 사용하여 scrollHidden이 초기값인 0과 같을때 스크롤을 사라지게 하는 구문을 입력했다

그리고 바로 아래에 scrollHidden의 값을 1로 바꾸어 주었다

그리고 else문에 조건과 맞지 않는 경우 스크롤이 보이게 하는 구문을 입력한뒤 다시

scrollHidden 값을 초기 값인 0으로 바꾸어 주었다

이제 클릭을 하면 처음 지정한 변수 값과 같아 스크롤이 사라졌다가 다시 값이 변동 되어 클릭이

해제되었을 때 스크롤이 보이게 되는 것을 반복하게 된다

4. 반응형으로 줄였을때 스와이퍼 적용

🔎 코드분석

let tabBtn1 = document.querySelector('.tab_list_1_btn');
let tabBtn2 = document.querySelector('.tab_list_2_btn');
let tabBtn3 = document.querySelector('.tab_list_3_btn');

if( 1100 > window.innerWidth ){
  tabBtn1.addEventListener('click',()=>{
    document.querySelector('.tab_lists').style.transform =
    'translate(0vw)';
    tabBtn1.classList.add('btn_active');
    tabBtn2.classList.remove('btn_active');
    tabBtn3.classList.remove('btn_active');
    })
  tabBtn2.addEventListener('click',()=>{
    document.querySelector('.tab_lists').style.transform =
    'translate(-100vw)';
    tabBtn1.classList.remove('btn_active');
    tabBtn2.classList.add('btn_active');
    tabBtn3.classList.remove('btn_active');
  })
  tabBtn3.addEventListener('click',()=>{
    document.querySelector('.tab_lists').style.transform =
    'translate(-200vw)';
    tabBtn1.classList.remove('btn_active');
    tabBtn2.classList.remove('btn_active');
    tabBtn3.classList.add('btn_active');
  })
} else{
  document.querySelector('.tab_lists').style.transform =
    'translate(0vw)';
}

window.addEventListener("resize", tabListbtn);
function tabListbtn(){
  if( 1100 > window.innerWidth ){
    tabBtn1.addEventListener('click',()=>{
      document.querySelector('.tab_lists').style.transform =
      'translate(0vw)';
      tabBtn1.classList.add('btn_active');
      tabBtn2.classList.remove('btn_active');
      tabBtn3.classList.remove('btn_active');
      })
    tabBtn2.addEventListener('click',()=>{
      document.querySelector('.tab_lists').style.transform =
      'translate(-100vw)';
      tabBtn1.classList.remove('btn_active');
      tabBtn2.classList.add('btn_active');
      tabBtn3.classList.remove('btn_active');
    })
    tabBtn3.addEventListener('click',()=>{
      document.querySelector('.tab_lists').style.transform =
      'translate(-200vw)';
      tabBtn1.classList.remove('btn_active');
      tabBtn2.classList.remove('btn_active');
      tabBtn3.classList.add('btn_active');
    })
  } else{
    document.querySelector('.tab_lists').style.transform =
      'translate(0vw)';
  }
}

윈도우가 리사이즈 되었을때 1100보다 너비값이 작을경우 스와이퍼가 만들어지게 해주었다

스와이퍼 사이즈에서만 보이는 버튼을 탭 개수만큼 만들어주었고 각각 변수로 지정했다

버튼을 클릭하면 translate의 값이 조절되면서 보이는 탭이 달라진다

그리고 버튼에는 btn_active라는 클래스명을 추가하여 클릭시 색깔이 바뀌어 구분이 되도록 해주었다

💣 문제발생

윈도우가 리사이즈 되지 않을 경우에는 적용되지 않는 단점이 있다

💊 문제해결

윈도우 리사이즈이벤트 외에 한번더 써서 그 단점을 보완했다

5. 영역에 들어오면 보였다가 안보이면 사라지는 박스

🔎 코드분석

 let observer = new IntersectionObserver((e)=>{
  e.forEach((sec5)=>{
    if(sec5.isIntersecting){ 
      sec5.target.style.opacity = 1;
      sec5.target.style.left = 0;
      sec5.target.style.transition = 'all 2s';
    }else{
      sec5.target.style.opacity = 0;
      sec5.target.style.left = '-100%';
    }
  })
})

let noteWrap = document.querySelector('.note_list_wrap');
observer.observe(noteWrap);

IntersectionObserver를 이용해서 옵셋탑값 없이 스크롤 애니메이션을 쉽게 주는 방법을 알게되었다

.observe( ); ⇒ 내가 원하는 html 요소가 화면에 등장하는지 감시해주는 역할을 한다

감시할 요소를 ()안에 넣어 지정한다

isIntersecting : .observe( ) 로 지정한 html이 화면에서 보일때는 true 안보일때는 자동으로 false가 되게 해준다

noteWrap으로 지정해준 값의 모든 자식들에게 애니메이션을 추가하고 싶으니까

forEach를 써주고 파라미터를 sec5으로 지정했다

그리고 if 문으로 화면에 보일때만 아래의 스타일이 먹게해주었다 isIntersecting 화면에서 보일때는 true

안보일때는 자동으로 false가 되게 해준다 else에는 화면에서 사라질때 실행할 스타일을 넣어주었다