Tailwind - 반응형 디자인

2025. 2. 13. 00:05·FE/CSS

 

Tailwind - 반응형 디자인

#Web/CSS


Tailwind CSS는 미디어 쿼리를 사용하지 않고, 미리 정의된 브레이크포인트 유틸리티를 통해 반응형 디자인을 구현할 수 있다.


브레이크포인트


뷰포트 메타 태그

Tailwind의 반응형 유틸리티를 사용하기 전에, 반드시태그를 HTML 문서의섹션에 추가해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

브라우저가 페이지의 크기를 기기 화면 크기에 맞게 조정하도록 지시하는 것이다.


ex) 배경색 변경

<div class="bg-blue-500 md:bg-red-500 lg:bg-green-500">
  이 박스는 화면 크기에 따라 배경색이 바뀝니다.
</div>

ex) 이미지 크기 변경

<!-- 기본적으로 폭은 16, 중간 크기 화면에서 32, 큰 화면에서 48로 변경 -->
<img class="w-16 md:w-32 lg:w-48" src="https://via.placeholder.com/300" alt="placeholder image">

ex) 배치 바꾸기

<div
  class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"
>
  <div class="md:flex">
    <div class="md:shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="https://via.placeholder.com/300"
        alt="Modern building"
      />


설명

  • 기본적으로 div는 block 레이아웃을 따르며, md:flex 클래스를 통해 화면 크기가 중간 이상일 때 flex 레이아웃으로 변환된다
  • 이미지와 콘텐츠는 모바일 화면에서는 각각 쌓이고, 중간 크기 이상에서는 좌우로 배치됩니다(md:shrink-0는 이미지를 축소되지 않도록 방지).
  • 다른 브레이크포인트(sm, lg, xl, 2xl)도 추가하여 더 다양한 사이즈에서 스타일을 조정할 수 있습니다.

Mobile-first (모바일 우선 접근 방식)

Tailwind CSS는 모바일 우선 접근 방식을 사용한다. 브레이크포인트가 없는 기본 유틸리티가 모바일 장치부터 모든 화면 크기에 적용된다는 뜻이다. 이후, 더 큰 화면에서는 브레이크포인트 접두어(sm, md, lg 등)를 붙여 화면 크기에 따라 스타일을 조정할 수 있다


예시

<div class="text-center sm:text-left">
  <p>모바일에서는 텍스트가 중앙 정렬되고, 큰 화면에서는 좌측 정렬됩니다.</p>
</div>

브레이크포인트 범위 타겟팅

<div class="md:max-2xl:flex"> 
  <!-- 이 요소는 중간 크기 화면에서만(2xl 미만!) flex로 적용됩니다. -->
</div>

커스텀 브레이크포인트 설정

tailwind.config.js 파일에서 원하는 브레이크포인트를 직접 설정할 수 있습니다.


/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',   // 640px 이상일 때 적용
      'laptop': '1024px',  // 1024px 이상일 때 적용
      'desktop': '1280px', // 1280px 이상일 때 적용
    },
  }
}

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복

'FE > CSS' 카테고리의 다른 글

Tailwind - 다크모드  (0) 2025.02.13
Tailwind - 트랜지션, 애니메이션  (0) 2025.02.13
Tailwind - Layout(Container, Flexbox, Grid, Position)  (0) 2025.02.13
Tailwind - Core(Utility-First CSS, State)  (0) 2025.02.13
Tailwind - 간격 조절, Sizing  (0) 2025.02.13
'FE/CSS' 카테고리의 다른 글
  • Tailwind - 다크모드
  • Tailwind - 트랜지션, 애니메이션
  • Tailwind - Layout(Container, Flexbox, Grid, Position)
  • Tailwind - Core(Utility-First CSS, State)
lumana
lumana
배움을 나누는 공간 https://github.com/bebeis
  • lumana
    Brute force Study
    lumana
  • 전체
    오늘
    어제
    • 분류 전체보기 (456) N
      • Software Development (27)
        • Performance (0)
        • TroubleShooting (1)
        • Refactoring (0)
        • Test (8)
        • Code Style, Convetion (0)
        • DDD (0)
        • Software Engineering (18)
      • Java (71)
        • Basic (5)
        • Core (21)
        • Collection (7)
        • 멀티스레드&동시성 (13)
        • IO, Network (8)
        • Reflection, Annotation (3)
        • Modern Java(8~) (12)
        • JVM (2)
      • Spring (53)
        • Framework (12)
        • MVC (23)
        • Transaction (3)
        • AOP (11)
        • Boot (0)
        • AI (0)
      • DB Access (1)
        • Jdbc (1)
        • JdbcTemplate (0)
        • JPA (14)
        • Spring Data JPA (0)
        • QueryDSL (0)
      • Computer Science (129) N
        • Data Structure (27)
        • OS (14)
        • Database (10)
        • Network (21)
        • 컴퓨터구조 (5) N
        • 시스템 프로그래밍 (23)
        • Algorithm (29)
      • HTTP (8)
      • Infra (1)
        • Docker (1)
      • 프로그래밍언어론 (15)
      • Programming Language(Sub) (77)
        • Kotlin (1)
        • Python (25)
        • C++ (51)
        • JavaScript (0)
      • FE (11)
        • HTML (1)
        • CSS (9)
        • React (0)
        • Application (1)
      • Unix_Linux (0)
        • Common (0)
      • PS (13)
        • BOJ (7)
        • Tip (3)
        • 프로그래머스 (0)
        • CodeForce (0)
      • Book Review (4)
        • Clean Code (4)
      • Math (3)
        • Linear Algebra (3)
      • AI (7)
        • DL (0)
        • ML (0)
        • DA (0)
        • Concepts (7)
      • 프리코스 (4)
      • Project Review (6)
      • LegacyPosts (11)
      • 모니터 (0)
      • Diary (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
lumana
Tailwind - 반응형 디자인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.