TIL | 09/23/2022

# 반응형 웹 CSS 작성

CJ ONE 사이트는 반응형 웹으로 제작 중이다.

어제까지 PC크기의 CSS는 작성했고 오늘 모바일고 타블렛크기까지 완성했다.

새롭게 변경되는 위치/정렬 등을 크롬 확장툴을 이용해 크기에 맞춰 작성했다.(클론코딩에 유용하다.)

Page Ruler Redux라는 확장 툴인데 현재는 구글 웹스토어에 없다.

아티클이나 요소들의 위치를 변경할 때 주의할 점이 있었다. top과 left 값으로만 지정하고 변경할 것.

그렇지 않으면 윈도우 창을 리사이징 할 때마다 중구난방으로 움직인다.

PC크기에서 left 와 top 값을 지정하고 나머지는 값만 수정하자.

모바일 크기에는 탑메뉴와 메인메뉴가 없어지고 좌측에서 나오는 햄버거메뉴가 나와야한다.

뒷배경이 어두워지게 새로운 div 도 생성하고 z-index 값을 잘 생각하고 지정하자.

자식은 부모의 z-index 값을 따라간다. 주의하자.
(그래서 이 햄버거 메뉴도 헤더에서 벗어나서 다시 마크업 했다.)

// 햄버거 버튼 클릭
const body = document.querySelector('body');
const bg = document.querySelector('div.bg');

const mobBtn_open = document.querySelector('.mobBtn_open');
const mobBtn_close = document.querySelector('.mobBtn_close');
const mob = document.querySelector('.mob');

mobBtn_open.addEventListener('click', (e) => {
  e.preventDefault();
  mob.classList.add('on');
  body.classList.add('on');
  bg.classList.add('on');
  mobBtn_close.classList.add('on');
});
mobBtn_close.addEventListener('click', (e) => {
  e.preventDefault();
  mob.classList.remove('on');
  body.classList.remove('on');
  bg.classList.remove('on');
  mobBtn_close.classList.remove('on');
});

// 햄버거 메뉴 드롭다운
const mob_topMenu_dd = document.querySelector('.mob_topMenu>dd:nth-last-of-type(2)');
const mob_topMenu_ul = document.querySelector('.mob_topMenu>dd:nth-last-of-type(2)>ul');
const mob_gnb_ul = document.querySelectorAll('nav.mob_gnb>ul>li.arrow');

mob_topMenu_dd.addEventListener('click', (e) => {
  e.preventDefault();
  mob_topMenu_dd.classList.toggle('on');
});
mob_gnb_ul.forEach((item) => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    e.currentTarget.classList.toggle('on');
  });
});

햄버거 메뉴를 클릭하거나 닫거나, 메뉴에 있는 드롭다운 메뉴의 Javascript코드는 이제 간단하게 작성 할 수 있다.

아래 브랜드 리스트 중에 맨 오른쪽에 있는 것은 mouseover 했을 때 자식 요소가 좌측으로 나와야한다.

웹의 크기가 달라지면 맨 오른쪽에 있는 요소의 인덱스 번호가 달라진다.

그래서 윈도우가 리사이징 될때마다 html 의 가로값을 불러와 환경에 맞게 조건에 사용할 번호를 재 할당 했다.

const brandLi = document.querySelectorAll('.content3_inner>div>ul>li');

let htmlWidth = document.querySelector('html').offsetWidth;
let classLeft = '';
let changeCls = () => {
  if (htmlWidth > 768) {
    classLeft = 6; // 타블렛,PC크기는 6개씩
  } else {
    classLeft = 4; // 모바일은 4개씩
  }
};
changeCls();
window.addEventListener('resize', () => {
  htmlWidth = document.querySelector('html').offsetWidth;
  changeCls();
});

brandLi.forEach((item, idx) => {
  item.addEventListener('mouseover', (e) => {
    e.preventDefault();
    if ((idx + 1) % classLeft !== 0) {
      e.currentTarget.classList.add('on');
    } else {
      e.currentTarget.classList.add('left');
    }
  });
  item.addEventListener('mouseout', (e) => {
    e.preventDefault();
    if ((idx + 1) % classLeft !== 0) {
      e.currentTarget.classList.remove('on');
    } else {
      e.currentTarget.classList.remove('left');
    }
  });
});

이렇게 CJ ONE 사이트 클론코딩이 마무리 됐다.

# 새로운 개인 프로젝트

다음 주 부터는 혼자서 웹사이트 두개를 클론코딩해야한다.

웹 접근성 인증을 받은 사이트 중 고르려고 한다. 일단 카카오 뱅크 선택. 또 하나는 주말에 골라야지

다음주에 예비군 훈련도 있고 금요일에 취업 상담도 있으니 빡세게 해야할 것 같다.

오늘 끝, 내일 안녕