[포트폴리오 만들기] tailwind css로 반응형 적용하기

포트폴리오 사이트를 모바일로 볼 사람을 없을거라는 생각에 모니터 크기가 길게 늘어졌을때 내용이 중앙에 유지되게끔만 신경을 썻다.

그러나 최근 면접에서 포트폴리오 사이트에 반응형 적용이 안되있다는 말을 들었다.
프론트엔드 포폴은 포트폴리오 사이트 자체가 포트폴리오란 생각이 들었다.

그래서 포폴 사이트에 반응형을 만든다면 프론트엔드 개발자로서 역량을 좀 더 보여줄 수 있을 것 같아 반응형을 적용해보기로 했다.

✅ break point 설정

1. default breakpoint

tailwind에선 일반적인 breakpoint을 기본값으로 제공한다.

sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

// 적용 예
<img class="w-16 md:w-32 lg:w-48" src="...">

2. 직접 breakpoint 지정하기

// tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '1024px',
      // => @media (min-width: 1024px) { ... }

      'lg': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

📍문제
기본 폰트 사이즈는 2xl이고 sm일때만 xs으로 적용될 것을 생각하고 작성한 코드.
<div class="text-2xl sm:text-xs" />

그러나 sm은 최소 640px부터 ~ 최대값은 제한이 없기 때문에 breakpoint가 md, lg일 때도 다 폰트 사이즈가 xs로 적용된다.

3. min,max 범위가 지정된 breakpoint 지정하기

// tailwind.config.js

module.exports = {
  theme: {
     screens: {
      sm: { min: "390px", max: "819px" },
      md: { min: "820px", max: "1023px" },
      lg: { min: "1080px" },
    },
  }
}

📍해결
이렇게 min, max 범위가 정해져있는 breakpoint로 지정하면 2번에서의 문제를 해결할 수 있다.

---

✅ 주의사항 - 상대 단위 사용하기

https://knulab.com/archives/1153

화면이 줄어드니 컨텐츠들이 뷰포트 사이즈를 삐져나와 가로 스크롤이 발생했다.
반응형을 생각하지 못하고 컨텐츠에 너비를 고정적으로 지정해서 발생한 문제이다.

때문에 반응형을 구현하려면 너비는 브라우저에 상대적인 크기로 지정해야한다.