[TIL] Tailwind CSS 기초 - 2 (Responsive Modifiers)

오늘 공부한것 & 기억하고 싶은 내용

Mobile-First

• Tailwind CSS는 모바일 우선이다.
• 작성하는 css는 모두 소형 기기에 적용된다는 뜻이다. 그렇기 때문에 더 큰 화면에 적용시키는 modifier들이 존재한다.
• Tailwind Css는 모바일 디자인을 먼저 구현하고 그 뒤에 큰 화면으로 키워가는 것을 명심하자.

다음과 같은 코드를 작성하면 작은 화면에서 background-color 색이 변한다는 뜻이 아니다.

<div className="sm:bg-red-100"></div>

@media (min-width: 640px) {
  .sm\:bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) /* #fee2e2 */;
  }
}

이건 최소값이 640px일때부터 빨간배경으로 바뀐다는 뜻이다.
sm 즉 작은 값은 640px을 뜻하고, sm만 빨간 배경색을 가지게 된다는 뜻이 아니다.
sm(작은화면)부터 그 이후의 화면까지 빨간 배경색을 갖게 된다는 뜻.
작은화면부터 ~ 그 이후 화면까지 적용된다는 의미

<div className="sm:bg-red-100 md:bg-green-100"></div>

@media (min-width: 640px) {
  .sm\:bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) /* #fee2e2 */;
  }
}

@media (min-width: 768px) {
  .md\:bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)) /* #dcfce7 */;
  }
}

md(중간사이즈)부터 그 이후까지 초록 배경을 갖게 된다.

<div className="sm:bg-red-100 md:bg-green-100 lg:bg-cyan-100 xl:bg-orange-100  2xl:bg-purple-100"></div>

@media (min-width: 640px) {//sm: 640px 이상
  .sm\:bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) /* #fee2e2 */;
  }
}

@media (min-width: 768px) {//md: 768px 이상
  .md\:bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)) /* #dcfce7 */;
  }
}

@media (min-width: 1024px) {//lg: 1024px 이상
  .lg\:bg-cyan-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1)) /* #cffafe */;
  }
}

@media (min-width: 1280px) {//xl: 1280px 이상
  .xl\:bg-orange-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1)) /* #ffedd5 */;
  }
}

@media (min-width: 1536px) {//2xl: 1536px 이상
  .\32xl\:bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)) /* #f3e8ff */;
  }
}

배운점 & 느낀점

css로 반응형 참 많이 구현했는데, sm, md, lg, xl, 2xl로 사이즈가 다 정해져있다니..
각 프로젝트마다 디자인이 달라서 컨테이너도 달랐는데 이렇게 정해주니 얼마나 편한가 ....
미디어쿼리를 작성하지 않아도 되는 것도 너무 좋다!!
반응형 작업 안한지 오래됐는데 갑자기 하고 싶어지는 이 마음!!