style - 반응형 웹 Break Point

• 기획이 화면 폭마다 UI 와 기능을 다르게 잡아서 기준점부터 정했다
• Tailwind 는 모바일 우선이라 md: 는 768px 이상에서만 먹힌다
• v4 부터는 설정 파일 대신 CSS 에서 breakpoint 를 바꾼다

기준점부터

이번 프로젝트는 화면 폭마다 UI, UX 와 기능까지 바뀌게 기획돼 있었다. 그래서 화면을 짜기 전에 모바일, 태블릿, PC 를 어디서 자를지부터 정했다. 해상도 통계를 보면 나라별, 기기별로 많이 쓰는 화면 크기가 나와서 그걸 참고했다.

Media Query

CSS 만 쓴다면 Media Query 로 구간을 나눠 스타일을 따로 준다. 처음에 적어 둔 코드는 PC 구간과 태블릿 구간이 둘 다 768~1023px 로 겹쳐 있어서 PC 를 1024px 이상으로 고쳤다.

/* PC (1024px 이상) */
@media all and (min-width: 1024px) {
}

/* 태블릿 (768px ~ 1023px) */
@media all and (min-width: 768px) and (max-width: 1023px) {
}

/* 모바일 가로 (480px ~ 767px) */
@media all and (min-width: 480px) and (max-width: 767px) {
}

/* 모바일 세로 (479px 이하) */
@media all and (max-width: 479px) {
}

Tailwind

Next.js 프로젝트를 만들 때 Tailwind 를 yes 로 고르면 처음부터 세팅돼 있다. Tailwind 는 sm, md, lg, xl, 2xl 다섯 개 breakpoint 가 정해져 있고, 클래스 앞에 md: 처럼 붙이면 그 폭 이상에서만 적용된다. 모바일 우선이라 접두사가 없는 클래스가 기본이고, 큰 화면으로 갈수록 덮어쓴다.

v4 부터는 값이 rem 으로 바뀌었다. sm 은 40rem, md 는 48rem 이고 px 로 치면 예전과 같다.

container 클래스도 같은 기준으로 최대 너비가 바뀐다.

결국 Tailwind 클래스 안에 Media Query 가 들어 있는 셈이다.

기준 바꾸기

기획 기준이 기본값과 다르면 breakpoint 를 바꾼다. v3 에서는 tailwind.config.ts 의 theme.screens 를 고쳤고, v4 에서는 CSS 파일의 @theme 에 breakpoint 변수를 적는다. 기본값이 rem 이라 새로 추가하는 값도 rem 으로 맞춰야 순서가 안 꼬인다.

/* v4: globals.css */
@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

아래는 v3 방식으로 tailwind.config.ts 에서 바꾼 화면이다.