04. Tailwind CSS와 CSS 기초 (반응형)

Mobile first

시장조사기관 Statista의 2022년 통계에 따르면 글로벌한 E-commerce 시장에서 

모바일 매출의 2018년도에 이미 PC 매출을 넘어섰고,

모바일 매출의 비중은 점점 늘어나고 있다고 한다.

 

@media (max-width:)  vs. (min-width)

내가 몇 개월전에 코딩한 SCSS의 일부이다.

@media (max-width: 640px) {
  .menu {
    &__top {
      border-top: 1px solid;
      ...

우선 처음에 모든 디자인을 PC화면 기준으로 짜놓은 다음에, 

이제 모바일도 적용되는 반응형으로 만들어야지라고 하면서 위처럼 media query를 넣기 시작한다.

PC부터 짠 후 → 모바일을 짜기 때문에 (max-width: )가 들어가있다.

 

그러나 Tailwind CSS는 현대적인 흐름에 따라 이와 반대다.

즉, 모바일을 먼저 짜고 (mobile first), 그 다음에 PC화면을 짜도록 유도한다.

 

좀 더 자세히 살펴보자면

Tailwind CSS 공식 홈페이지에 보면 Core Concept 메뉴 중 하나가 반응형 디자인이다.

https://tailwindcss.com/docs/responsive-design 

 

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) { ... }

 

sm 이란 prefix를 쓰면 min-width 가 적용이 된다.

즉, sm: 뒤에 코드는 PC화면에서만 구현된다는 뜻이다.

 

테스트를 위해 다음 코드로 테스트

<div className="m-auto h-20 w-40 bg-pink-500 sm:bg-blue-500 lg:bg-purple-500"></div>

mobile 화면

PC 화면

즉, default는 모바일 형이다.

 

shrink-0

반응형 디자인을 하면서 많이 쓰이게 되는 코드는 shrink-0이다.

주로 PC화면에서는 flex 속성을 다르게 가져가면서, PC화면에서는 image 크기를 자동으로 줄이지 말라는 뜻으로 쓰인다.

  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 ...
      ...