tailwindcss/css 반응형 웹사이트

tailwindcss는 className에 스타일을 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4로 설정하고

• grid-cols-1: 기본 사이즈 세로 1줄
• md:grid-cols-2: 브라우저 사이즈가 md(768px) 이상일 때, 세로 2줄
• lg:grid-cols-3: 브라우저 사이즈가 lg(1024px) 이상일 때, 세로 3줄
  이런 뜻을 가지고 있다

export default async function Home() {
  // 무료 상품 API 문서: https://fakestoreapi.com/docs
  const response = await fetch('https://fakestoreapi.com/products');
  const products = await response.json();
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {products.map((product: Product) => (
        <div key={product.id} className="border shadow-sm">
          <Image src={product.image} alt={product.title} width={200} height={200} />
          <h1>{product.title}</h1>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}

코드에서는 이렇게 사용되며 next.config.mjs에 설정해주면 된다

/* next.config.mjs */
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fakestoreapi.com",
      },
    ],
  },
};

export default nextConfig;

일반 css는

@media (조건) {
  스타일
}

/* 브라우저 너비가 768px 이상의 사이즈에서 아래 속성(display: flex)을 적용한다. */
@media (min-width: 768px) {
  .클래스명 {
    display: flex;
  }
}

/* 브라우저 너비가 768px 이하의 사이즈에서 아래 속성(display: flex)을 적용한다. */
@media (max-width: 768px) {
  .클래스명 {
    display: flex;
  }
}

css를 작성하듯이 작성하면 된다.