Breakpoints (반응형 브레이크포인트)

Foundation의 반응형 브레이크포인트는 Tailwind CSS 기본값을 사용하여 Mobile First 반응형 디자인을 지원합니다.

반응형 철학

Foundation의 반응형 시스템은 다음 원칙을 따릅니다:

Mobile First: 모바일 기기를 우선으로 설계
Progressive Enhancement: 큰 화면에서 점진적으로 개선
Standard Breakpoints: Tailwind 기본값 사용 (업계 표준)
Consistency: 모든 컴포넌트가 동일한 브레이크포인트 사용

Breakpoint Scale

Foundation은 5단계 브레이크포인트를 제공합니다.

Tailwind 기본 브레이크포인트

Breakpoint	Min Width	기기	Tailwind Prefix
xs	0px	Mobile (기본)	(prefix 없음)
sm	640px	Large Mobile	`sm:`
md	768px	Tablet	`md:`
lg	1024px	Desktop	`lg:`
xl	1280px	Large Desktop	`xl:`
2xl	1536px	Extra Large Desktop	`2xl:`

Mobile First 접근

기본 스타일 (Mobile)


<div className="p-md">{/* Mobile: 16px padding */}</div>

반응형 스타일 추가


<div className="p-md lg:p-xl">
  {/* Mobile: 16px padding */}
  {/* Desktop (lg+): 32px padding */}
</div>

사용 방법

Typography


<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold">
  {/* Mobile: 24px */}
  {/* Tablet: 32px */}
  {/* Desktop: 36px */}
  Responsive Heading
</h1>

Spacing


<section className="py-2xl lg:py-3xl px-md lg:px-xl">
  {/* Mobile: py-48px, px-16px */}
  {/* Desktop: py-64px, px-32px */}
  Section Content
</section>

Layout


<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md">
  {/* Mobile: 1 column */}
  {/* Tablet: 2 columns */}
  {/* Desktop: 3 columns */}
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

컴포넌트별 반응형 가이드


export default function Navigation() {
  return (
    <nav className="px-md lg:px-xl py-md">
      <div className="flex items-center justify-between">
        <div className="text-xl font-bold">Logo</div>
 
        {/* Mobile: Hamburger Menu */}
        <button className="lg:hidden">☰</button>
 
        {/* Desktop: Full Menu */}
        <div className="hidden lg:flex gap-lg">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </nav>
  );
}

Hero Section


export default function Hero() {
  return (
    <section className="py-2xl lg:py-3xl px-md lg:px-xl">
      <div className="max-w-screen-xl mx-auto text-center">
        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-md">
          Responsive Hero Title
        </h1>
        <p className="text-base md:text-lg text-gray-600 mb-xl max-w-2xl mx-auto">
          Hero description that scales with screen size
        </p>
        <div className="flex flex-col sm:flex-row gap-md justify-center">
          <button className="px-lg py-md bg-primary text-white rounded">
            Get Started
          </button>
          <button className="px-lg py-md bg-white border rounded">
            Learn More
          </button>
        </div>
      </div>
    </section>
  );
}

Feature Grid


export default function Features() {
  return (
    <section className="py-2xl px-md">
      <div className="max-w-screen-xl mx-auto">
        <h2 className="text-2xl md:text-3xl font-bold mb-xl text-center">
          Features
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-lg">
          <div className="p-lg bg-white border rounded">Feature 1</div>
          <div className="p-lg bg-white border rounded">Feature 2</div>
          <div className="p-lg bg-white border rounded">Feature 3</div>
        </div>
      </div>
    </section>
  );
}

Container Max Width

표준 Container 크기


<div className="max-w-screen-sm mx-auto">  {/* 640px */}
<div className="max-w-screen-md mx-auto">  {/* 768px */}
<div className="max-w-screen-lg mx-auto">  {/* 1024px */}
<div className="max-w-screen-xl mx-auto">  {/* 1280px */}
<div className="max-w-screen-2xl mx-auto"> {/* 1536px */}

실전 예제


export default function Article() {
  return (
    <article className="max-w-screen-lg mx-auto px-md lg:px-xl py-2xl">
      <h1 className="text-3xl md:text-4xl font-bold mb-md">Article Title</h1>
      <p className="text-lg text-gray-600 mb-xl">Lead paragraph</p>
      <div className="prose prose-lg">{/* Article content */}</div>
    </article>
  );
}

Visibility Controls

특정 화면에서만 표시


{
  /* Mobile only */
}
<div className="block lg:hidden">Mobile Menu</div>;
 
{
  /* Desktop only */
}
<div className="hidden lg:block">Desktop Navigation</div>;
 
{
  /* Tablet and above */
}
<div className="hidden md:block">Tablet+ Content</div>;

접근성 고려사항

Touch Target Size

모바일에서는 터치 타겟이 최소 44x44px이어야 합니다.


<button className="min-h-[44px] min-w-[44px] px-md py-sm">
  Touch Friendly
</button>

Testing

브레이크포인트 테스트

다음 기기 크기에서 테스트하세요:

iPhone SE: 375px
iPhone 12/13: 390px
iPad: 768px
Desktop: 1280px
Large Desktop: 1920px