[카테캠 선택강의] 반응형 적용

미디어 쿼리

미디어 쿼리를 사용할 때 나는 흔히 다음과 같이 많이 사용한다.

이게 실은 all and 가 생략되어있었다는 것을 알게되었다.

/* @media 타입 and (기능) { 스타일 } */
@media (min-width: 360px) {

}

@media all and (min-width: 360px) {

}

 

흔히 사용되는 것은 screen 타입이다.

조금 신기했던게 print 타입을 이용하면 프린트 출력되는 화면에 웹사이트가 어떤 UI 로 보일지도 고려할 수 있다.

 

 

 

전혀 몰랐던 것이 있는데 다음처럼 breakPoint 에 대해 CSS 파일을 나누어 import 할 수도 있다는 것을 알게 되었다. 어쩌면 사용할 수도 있을 것 같다.

 

타입 또한 같이 명시할 수 있음을 상기하자.

 

 

 

transition은 display: none 에는 적용이 안된다.

이유는 다음 블로그글 참고!

2023.05.01 - [FrontEnd] - display: none에 transition이 적용되지 않는 이유 그리고 접근성 트리, 렌더링 트리

 

반응형 적용한 코드를 보면 아래 붉은색 영역에 해당하는 .clone-menu 요소는 데스크탑 환경에서는 display:none 처리된다. 

하지만 모바일 환경에서는 해당요소에 transition 이 걸려야하기 때문에 다음과 같은 코드를 사용했다.

 

 

 

 

숨기는것은 display: none 으로 할 수 있지만, transition 을 적용하기 위해 display: block 으로 변경하고 visibility: hidden, opacity:0를 준 코드이다.

header .clone-menu {
  display: none;
}

header .clone-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 103px;
  left: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.4s;
  transform: translate(0, -50px);
}

header.menuing .clone-menu {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}

 

 

 

 

화면 크기가 달라졌을 때 이벤트 발생

window 에 resize 이벤트와 innerWidth를 사용하여 화면크기가 변경될 때 자바스크립트 코드를 실행할 수 있다.

// 화면 크기가 달라졌을 때 검색 모드가 종료되도록 처리.
window.addEventListener('resize', event => {
  if (window.innerWidth <= 740) {
    headerEl.classList.remove('searching');
  } else {
    headerEl.classList.remove('searching--mobile');
  }
});

 

 

 

 

가상클래스 사용해서 토글 버튼 만들기

토글 버튼을 가상클래스 사용해서 만든게 눈에 띄어서 기록한다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

반응형에서 발휘되는 contain 의 진가

bgtext 클래스에서 background-size: contain 으로 값을 주었을까? 

.bgtext {
  display: block;
  text-indent: -9999px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

 

아래 영상의 ipad 이미지를 보면 width 값을 변경할때 마다 이미지의 비율이 자동으로 맞춰진다.

 

 

 

Order 

order 를 사용해본적이 없는 것 같다. 다음처럼 이미지 와 텍스트가 있는 레이아웃의 순서를 바꿀때 고려할 수 있을 것 같아 기록한다.

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

유사배열 배열로 변환하는 방법

유사배열을 배열로 변환하는 대표적인 방법으로 Array.from 이 있는데, 코드를 보다가 스프레드 연산자를 사용하는 코드도 봐서 기록한다.

const mapEls = [...document.querySelectorAll('footer .navigations .map')];

 

 

 

배열 요소에 EventLinstener 

mapEls.forEach(el => {
  const h3El = el.querySelector('h3');
  h3El.addEventListener('click', () => {
    el.classList.toggle('active');
  });
});

 

 

 

 

아코디언

아래의 코드를 응용하여 아코디언을 만들 수 있다.

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.