반응형 웹사이트

포토폴리오를 제출하면 화면 크기부터 줄여보는 당담자?!

포토폴리오로 만든 웹사이트를 제출하면 당담자가 화면크기부터 줄여본다는 소리를 들었다. 반응형 디자인이 중요함을 느꼈다. 또한 필자는 시스템 설정에 따라 화면모드가 바뀌는 것을 좋아하기에 이번 개발에서는 반응형을 각잡고 만들어 보면서 적용 방법을 기록해두려 한다.

1. CSS 미디어 쿼리 (Media Queries)

1-1. 화면 모드

변수를 설정해서 nav의 background-color를 설정하는데, 변수는 기본값으로 white 값을 가지고 화면 모드가 dark 이면 변수의 값이 black으로 변경된다.

:root {
  --nav-bg-color: white;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nav-bg-color: black;
}
nav {
  background-color: var(--nav-bg-color);
}

1-2. 화면 크기

일반적으로 데스크탑, 태블릿, 모바일을 기준으로 설정한다.

nav{
  /* 데스크탑 스타일 */
}
@media screen and (max-width: 768px) {
    /* 태블릿 스타일 */
}
@media screen and (max-width: 480px) {
    /* 모바일 스타일 */
}

2. JavaScript

2-1. 화면 모드 window.matchMedia()

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // 다크 모드일 경우
} else {
    // 라이트 모드일 경우
}

2-2. 화면 크기 window.innerWidth

function checkScreenSize() {
    const width = window.innerWidth;
    if (width < 768) {
        // 모바일 전용 로직
    } else if (width >= 768 && width < 1200) {
        // 태블릿 전용 로직
    } else {
        // 데스크탑 전용 로직
    }
}

2-2-1. react

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => setWindowWidth(window.innerWidth);
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

if (windowWidth < 768) return navMovile();
else return navDesktop();