서론

나는 최근에 사용방법을 학습한 tailwindCSS 라는 css 라이브러리를 포트폴리오 페이지 개발 프로젝트에
적용하여 실습 감각을 익히고 있다.
그러던 중 모바일 반응형 레이아웃을 구현하면서 반응형 breakpoints를 커스터마이징하여 사용하는 방법을 알게 되었는데 나중에 사용할 때 까먹지 않기 위해 velog에 기록해본다.

본론

적용할 코드 부분

내가 모바일용 css 속성을 적용할 코드는 위에 형광색으로 표시해놓은 곳이다. tailwindCSS 에서는 기본적으로 아래와 같은 반응형 breakpoints prefix 제공한다.

이걸 가만히 보면 모바일 스크린을 위한 break prefix는 별도로 정의되어 있지 않다. 이말은 즉슨 tailwindCSS 으로 반응형을 구현하려면 기본적으로 prefix 없이 정의하는 tailwind css 속성 값은 '모바일 스크린'을 기준으로 삼고, 그 외 태블릿, PC 스크린에 대한 css 속성 코드는 md, lg 와 같은 prefix를 사용하여 별도로 정의해주면 반응형 레이아웃 구현에는 큰 문제가 없을 것이다.
하지만 나는 default 기준을 모바일이 아닌 'laptop' 을 기준으로 css 속성 코드를 작성하고 싶었기에 모바일용 breakpoint prefix를 커스텀 생성해보기로 했다.

breakpoints 커스터마이징

커스터마이징은 프로젝트의 루트 경로에 있는 tailwind css에 대한 환경을 설정하는 tailwind.config.js 라는 파일에서 할 수 있다. (해당 파일이 없을 경우, 신규로 생성하면 된다.)
나는 Case 2 방법을 이용하였다.

💡 Case 1. 기본 prefix 명을 사용하고 싶은 경우

	/** @type {import('tailwindcss').Config} */
module.exports = {
	(...)
    screens: { // 아래의 값들은 min-width이다.
      mobile: '320px',  // <-- *신규로 추가한 모바일 스크린용 breakpoint prefix
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      2xl: '1536px',
    },
  },
};

💡 Case 2. 장치 유형에 따른 prefix 명을 사용하고 싶은 경우 (커스터마이징)

• breakpoints 기준도 조금씩 다를 수 있기 때문에, 본인이 자주 사용하는 min-width 값들로 사용하면 된다.

	/** @type {import('tailwindcss').Config} */
module.exports = {
	(...)
    screens: { // 아래의 값들은 min-width이다.
      mobile: '320px',
      tablet: '600px',
      laptop: '1200px',
      desktop: '1536px',
    },
  },
};

적용 결과

위에 형광색 표시된 부분과 같이, mobile 이라는 커스텀 prefix를 사용하여 mobile 스크린일 때는 해당 div 속성 내부의 text content 들의 size: sm 스타일 속성값이 적용되도록 하고, 그 외 tablet 이상의 스크린일 때는 size: lg 값이 적용 되도록 tailwind css 코드를 정의한 후, 로컬 환경에서 확인하였더니 정상적으로 적용된 것을 볼 수 있었다.

모바일 스크린일 때

태블릿 이상 스크린일 때

결론

• material UI 또는 tailwindCSS 등 몇몇 라이브러리에서 표준으로 사용하는 breakpoint prefix(sm, md, lg, xl)가 평소에 자주 헷갈린다면 장치 유형을 prefix 로 커스터마이징 하여 사용하는 것을 추천한다. (생산성 향상✨)
• 요즘 같이 스마트폰이 없으면 아무것도 할 수 없는 시대에서 반응형 웹은 필수 필수 또 필수이다. 항상 웹 개발을 할 때 사전에 반응형 레이아웃을 고려하는 것 을 잊지 말자 🔥