회사소개
블로그
DataSketchers

전체 메뉴

회사소개
사업영역
D-SKET
웹빌더CanvasEvents
고객사
블로그
위키
보도자료
ESG
Topics
디자인 시스템 ›
  • 디자인 시스템
    • Material UI 컴포넌트
    • Affix
    • Alert
    • Anchor
    • App
    • AutoComplete
    • Avatar
    • Badge
    • BorderBeam
    • Breadcrumb
    • Button
    • Calendar
    • Card
    • Carousel
    • Cascader
    • Changelog
    • Checkbox
    • Collapse
    • ColorPicker
    • ConfigProvider
    • DatePicker
    • 설명 목록
    • 구분선
    • 드로어
    • 드롭다운
    • 빈 상태
    • 플렉스
    • 플로팅 버튼
    • 폼
    • 그리드
    • 아이콘
    • 이미지
    • 입력
    • 숫자 입력
    • 레이아웃
    • 목록
    • 리스티
    • 메이슨리
    • 멘션
    • 메뉴
    • 메시지
    • 모달
    • 알림
    • 컴포넌트 개요
    • 페이지네이션
    • 팝확인
    • 팝오버
    • 진행률
    • QR 코드
    • 라디오
    • 별점 평가
    • 결과 화면
    • 세그먼트
    • 셀렉트
    • 스켈레톤
    • 슬라이더
    • 스페이스
    • 스핀
    • 스플리터
    • 통계
    • 단계 표시
    • 스위치
    • 테이블
    • 탭
    • 태그
    • 타임라인
    • 시간 선택
    • 툴팁
    • 투어 가이드
    • 트랜스퍼
    • 트리
    • 트리 셀렉트
    • 타이포그래피
    • 업로드
    • _util
    • 워터마크
    • Ant Design CLI
    • 공통 Props
    • CSS 호환성
    • 기여하기
    • 테마 커스터마이징
    • design.md
    • 자주 묻는 질문
    • AI 에이전트용
    • 시작하기
    • 국제화
    • Ant Design of React
    • LLMs.txt
    • MCP
    • v5에서 v6로 마이그레이션
    • 서드파티 라이브러리
    • 서버사이드 렌더링
    • 스폰서
    • 커스텀 날짜 라이브러리 사용하기
    • Farm 연동하기
    • Next.js 연동하기
    • Refine 연동하기
    • Rsbuild 연동하기
    • Umi 연동하기
    • Vite 연동하기
    • 디자인 리소스
    • 정렬
    • 버튼
    • 사용 사례
    • 색상
    • 대비
    • 카피라이팅
    • 다크 모드
    • 데이터 표시
    • 데이터 입력
    • 데이터 형식
    • 데이터 목록
    • 상세 페이지
    • 직접 조작하기
    • 피드백
    • 폰트 시스템
    • 아이콘
    • 일러스트레이션
    • Ant Design 소개
    • 초대 제공하기
    • 레이아웃
    • 가볍게 유지하기
    • 모션
    • 내비게이션
    • 디자인 패턴 개요
    • 근접성
    • 즉시 반응하기
    • 반복
    • 빈 상태
    • 예외 페이지
    • 폼 페이지
    • 목록 페이지
    • 메시지와 피드백
    • 내비게이션
    • 탐험 채널 개요
    • 결과 페이지
    • 워크벤치
    • 그림자
    • 페이지에 머물게 하기
    • 전환 사용하기
    • 디자인 가치
    • 시각화
    • 시각화 페이지
    • Bootstrap 브랜드 가이드라인
    • Bootstrap 라이선스 FAQ
    • Bootstrap 소개
    • Bootstrap 팀
    • Bootstrap 번역
    • 어코디언
    • 알림
    • 배지
    • 브레드크럼
    • 버튼 그룹
    • 버튼
    • 카드
    • 캐러셀
    • 닫기 버튼
    • 콜랩스
    • 드롭다운
    • 목록 그룹
    • 모달
    • Navbar
    • Navs and tabs
    • Offcanvas
    • Pagination
    • Placeholders
    • Popovers
    • Progress
    • Scrollspy
    • Spinners
    • Toasts
    • Tooltips
    • Figures
    • Images
    • Reboot
    • Tables
    • Typography
    • Color
    • Color modes
    • 컴포넌트
    • CSS 변수
    • 최적화
    • 옵션
    • 커스터마이즈
    • Sass
    • 접근 방식
    • 아이콘
    • 체크박스와 라디오
    • 플로팅 라벨
    • 폼 컨트롤
    • 입력 그룹
    • 레이아웃
    • 폼
    • 범위
    • 셀렉트
    • 검증
    • 접근성
    • 브라우저와 기기
    • 콘텐츠 구성
    • 기여하기
    • 다운로드
    • Bootstrap 시작하기
    • JavaScript
    • Bootstrap과 Parcel
    • RFS
    • RTL
    • Bootstrap과 Vite
    • Bootstrap과 Webpack
    • Clearfix
    • 색상과 배경
    • 색상 링크
    • 포커스 링
    • 아이콘 링크
    • 위치
    • 비율
    • Stacks
    • 늘어나는 링크
    • 텍스트 잘림
    • 세로 구분선
    • 시각적으로 숨기기
    • 브레이크포인트
    • 컬럼
    • 컨테이너
    • CSS Grid
    • 그리드 시스템
    • 거터
    • 레이아웃용 유틸리티
    • Z-index
    • v5.3으로 마이그레이션
    • 유틸리티 API
    • 배경
    • 테두리
    • 색상
    • Display
    • Flex
    • Float
    • Interactions
    • Link
    • Object fit
    • Opacity
    • Overflow
    • Position
    • Shadows
    • Sizing
    • Spacing
    • Text
    • Vertical alignment
    • Visibility
    • Z-index
    • 차트
    • 스파크라인
    • AbsoluteCenter
    • 아코디언
    • 액션 바
    • 알림
    • 종횡비
    • 아바타
    • 배지
    • 블리드
    • 인용구
    • 상자
    • 브레드크럼
    • 버튼
    • 캘린더
    • 카드
    • 캐러셀
    • 센터
    • 체크박스
    • 체크박스 카드
    • Checkmark
    • Client Only
    • Clipboard
    • Close Button
    • Code
    • Code Block
    • Collapsible
    • Color Picker
    • Color Swatch
    • Combobox
    • Animation
    • Color Mode
    • Composition
    • Components
    • Server Components
    • Testing
    • Container
    • DataList
    • Date Input
    • Date Picker
    • Dialog
    • Download Trigger
    • Drawer
    • Editable
    • Em
    • Empty State
    • Environment Provider
    • Field
    • Fieldset
    • File Upload
    • Flex
    • Float
    • Floating Panel
    • For
    • Format Byte
    • Format Number
    • Grid
    • Group
    • Heading
    • Highlight
    • Hover Card
    • Icon
    • Icon Button
    • Image
    • Input
    • Kbd
    • Link
    • Link Overlay
    • List
    • Listbox
    • Locale Provider
    • Mark
    • Marquee
    • Menu
    • Native Select
    • Number Input
    • Overlay Manager
    • Pagination
    • Password Input
    • Pin Input
    • Popover
    • Portal
    • Presence
    • Progress
    • Progress Circle
    • Prose
    • QR Code
    • Radio
    • Radio Card
    • Radiomark
    • Rating
    • Rich Text Editor
    • Scroll Area
    • Segmented Control
    • Select
    • Separator
    • Show
    • SimpleGrid
    • Skeleton
    • Skip Nav
    • Slider
    • Spinner
    • Splitter
    • Stack
    • Stat
    • Status
    • Steps
    • Switch
    • Table
    • Tabs
    • Tag
    • Tags Input
    • Text
    • Textarea
    • Theme
    • Timeline
    • Toast
    • Toggle Tip
    • Tooltip
    • TreeView
    • 시각적으로 숨기기
    • Wrap
    • LLMs.txt 문서
    • MCP 서버
    • AI 스킬
    • CLI
    • Chakra UI에 기여하기
    • Iframe에서 Chakra UI 사용하기
    • Shadow DOM에서 Chakra UI 사용하기
    • Figma
    • Next.js(App)에서 Chakra UI 사용하기
    • Next.js(Pages)에서 Chakra UI 사용하기
    • Remix에서 Chakra 사용하기
    • Storybook에서 Chakra UI 사용하기
    • TanStack Router에서 Chakra 사용하기
    • Vite에서 Chakra 사용하기
    • 설치
    • v3로 마이그레이션
    • 애니메이션 스타일
    • 캐스케이드 레이어
    • Chakra Factory
    • 색상 투명도 수정자
    • 조건부 스타일
    • CSS 변수
    • 다크 모드
    • 포커스 링
    • 레이어 스타일
    • 스타일링
    • 반응형 디자인
    • 배경
    • 테두리
    • 표시
    • 효과
    • 필터
    • Flex와 Grid
    • 상호작용
    • 레이아웃
    • 리스트
    • 크기
    • 간격
    • SVG 스타일 프로퍼티
    • 테이블 스타일 프로퍼티
    • 변형(Transform) 스타일 프로퍼티
    • 전환(Transition)·애니메이션 스타일 프로퍼티
    • 타이포그래피 스타일 프로퍼티
    • 텍스트 스타일(Text Styles)
    • 가상 색(Virtual Color)
    • 애니메이션 토큰
    • 종횡비 토큰
    • 브레이크포인트 토큰
    • 색 토큰
    • 커서 토큰
    • 애니메이션 커스터마이징
    • 브레이크포인트 커스터마이징
    • 색 커스터마이징
    • 조건(Conditions) 커스터마이징
    • CSS 변수 커스터마이징
    • 전역 CSS 커스터마이징
    • 테마 커스터마이징 개요
    • 레시피 커스터마이징
    • 사이즈 커스터마이징
    • 스페이싱 커스터마이징
    • 유틸리티 커스터마이징
    • 레이어 스타일
    • 테마 개요
    • Radii
    • 레시피
    • 시맨틱 토큰
    • 그림자
    • 사이즈 토큰
    • 슬롯 레시피
    • 스페이싱 토큰
    • 텍스트 스타일
    • 토큰
    • 타이포그래피
    • Z-Index
    • Breakpoints
    • Breakpoints
    • Color
    • Container queries
    • 테마가 적용되는 컴포넌트 만들기
    • CSS Layers
    • 다크 모드
    • 기본 테마 탐색기
    • 밀도
    • 포커스 표시
    • 커스터마이징 방법
    • Overriding component structure
    • Overriding component structure
    • Palette
    • Right-to-left support
    • Shadow DOM
    • Shape
    • 스페이싱
    • 테마 컴포넌트
    • 테마
    • 트랜지션
    • 타이포그래피
    • z-index
    • z-index
    • Material UI for Figma
    • Material UI Sync plugin 🧪
    • 스폰서와 서포터
    • Changelog
    • 관련 프로젝트
    • 로드맵
    • 쇼케이스
    • 비전
    • 디자인 리소스
    • Example projects
    • Example projects
    • Frequently Asked Questions
    • Installation
    • 학습 자료
    • Material UI용 MCP
    • 지원
    • 지원되는 컴포넌트
    • 지원 플랫폼
    • React 템플릿
    • 사용법
    • Material UI Versions
    • Material UI Versions
    • API design approach
    • Building extensible themes
    • 컴포지션
    • Content Security Policy
    • 지역화
    • 번들 크기 줄이기
    • 반응형 UI
    • 서버 렌더링
    • 테스팅
    • TypeScript
    • TypeScript
    • Icons
    • Style library interoperability
    • Next.js 통합
    • Routing libraries
    • styled-components 사용하기
    • 테마 스코핑
    • Deprecated API에서 마이그레이션하기
    • v0.x에서 v1으로 마이그레이션
    • v3에서 v4로 마이그레이션
    • Migrating to v5: getting started
    • Migrating to v5: getting started
    • Migration from @material-ui/pickers
    • Upgrade to Grid v2
    • v6로 업그레이드하기
    • v7로 업그레이드하기
    • v9로 업그레이드하기
    • Accessibility
    • 접근 가능한 아이콘
    • Accordion
    • Alert Dialog
    • Animation
    • Aspect Ratio
    • Avatar
    • Checkbox
    • Collapsible
    • Composition
    • Context Menu
    • Dialog
    • 방향 공급자
    • Dropdown Menu
    • Form
    • Getting started
    • Hover Card
    • Introduction
    • Label
    • Menu Bar
    • Navigation Menu
    • One-Time Password Field
    • Password Toggle Field
    • Popover
    • 포털
    • Progress
    • Radio Group
    • Releases
    • Scroll Area
    • Select
    • Separator
    • Server-side rendering
    • Slider
    • 슬롯
    • Styling
    • Switch
    • Tabs
    • Toast
    • Toggle
    • Toggle Group
    • Toolbar
    • Tooltip
    • 시각적으로 숨김
    • Breakpoints
    • Color
    • Cursors
    • Dark mode
    • Theme overview
    • Radius
    • 접근 가능한 아이콘
    • 알림 대화상자
    • 종횡비
    • 아바타
    • 배지
    • 블록 인용
    • 박스
    • 버튼
    • 콜아웃
    • 카드
    • 체크박스
    • 체크박스 카드
    • 체크박스 그룹
    • 코드
    • 컨테이너
    • 컨텍스트 메뉴
    • 데이터 리스트
    • 대화상자
    • 드롭다운 메뉴
    • Em
    • 플렉스
    • Getting started
    • 그리드
    • Shadows
    • 제목
    • 호버 카드
    • 아이콘 버튼
    • 인셋
    • Kbd
    • Layout
    • 링크
    • Spacing
    • 팝오버
    • 포털
    • 프로그레스
    • Quote
    • 라디오
    • Radio Cards
    • Radio Group
    • Releases
    • Reset
    • Resources
    • Scroll Area
    • Section
    • Segmented Control
    • Select
    • Separator
    • Skeleton
    • Slider
    • Slot
    • Spinner
    • Strong
    • Styling
    • Switch
    • Table
    • Tab Nav
    • Tabs
    • Text
    • Text Area
    • Text Field
    • Theme
    • Tooltip
    • Visually Hidden
    • Typography
    • Accordion
    • Alert
    • 앱 바
    • 오토컴플리트
    • Avatar
    • Avatar
    • Backdrop
    • Badge
    • 하단 네비게이션
    • Box
    • 브레드크럼
    • Button
    • Button Group
    • 카드
    • 체크박스
    • Chip
    • Chip
    • Click-Away Listener
    • Container
    • CSS Baseline
    • Dialog
    • Divider
    • Drawer
    • Floating Action Button
    • 그리드
    • 이미지 목록
    • InitColorSchemeScript
    • InitColorSchemeScript
    • Links
    • Lists
    • Masonry
    • Menu
    • Menubar
    • Modal
    • No SSR
    • Number Field
    • 페이지네이션
    • Paper
    • Paper
    • Popover
    • Popper
    • Portal
    • Progress
    • Radio Group
    • Rating
    • Select
    • 스켈레톤
    • 슬라이더
    • Snackbar
    • Snackbar
    • Speed Dial
    • Stack
    • Stepper
    • Switch
    • Table
    • Tabs
    • Textarea Autosize
    • 텍스트 필드
    • 타임라인
    • Toggle Button
    • Toggle Button
    • Tooltip
    • Transfer List
    • Typography
    • useMediaQuery
    • shadcn/ui 소개
    • 블록 추가하기
    • 변경 사항
    • CLI
    • 아코디언
    • 알림
    • 알림 다이얼로그
    • 종횡비
    • 아바타
    • 배지
    • 브레드크럼
    • Button
    • Calendar
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Collapsible
    • Combobox
    • Command
    • Context Menu
    • Data Table
    • 날짜 선택기
    • 다이얼로그
    • 드로어
    • 드롭다운 메뉴
    • 리액트 훅 폼
    • 호버 카드
    • 입력
    • 입력 OTP
    • components.json
    • 라벨
    • 메뉴바
    • 네비게이션 메뉴
    • 페이지네이션
    • 팝오버
    • 프로그레스
    • 라디오 그룹
    • 리사이저블
    • 스크롤 영역
    • 셀렉트
    • 세퍼레이터
    • 시트
    • 사이드바
    • 스켈레톤
    • 슬라이더
    • Sonner 토스트
    • 스위치
    • 테이블
    • 탭
    • 텍스트에어리어
    • 토스트
    • 토글
    • 토글 그룹
    • 툴팁
    • 타이포그래피
    • 구(舊) 다크 모드 - Astro
    • 다크 모드
    • 다크 모드 - Next.js
    • 다크 모드 - Remix
    • 다크 모드 - Vite
    • Figma
    • 소개
    • 설치 - Astro
    • 설치 - Gatsby
    • 설치
    • Laravel
    • 수동 설치
    • Next.js
    • Remix
    • Vite
    • 모노레포
    • Next.js 15 + React 19
    • FAQ
    • 시작하기
    • 레지스트리
    • Open in v0
    • registry-item.json 스키마
    • registry.json 스키마
    • 테마 적용
    • v0에서 열기
    • Transitions
디자인 시스템 ›

브레이크포인트 토큰

목차
브레이크포인트 토큰 (Breakpoints)본문더 알아보기 (Learn more)

브레이크포인트 토큰 (Breakpoints)

Chakra UI가 기본 제공하는 브레이크포인트 목록에 대해 알아봐요. 반응형 스타일링에 바로 사용할 수 있어요.

출처: 문서

본문

Chakra UI는 다음 브레이크포인트를 기본으로 지원해요.

더 알아보기 (Learn more)

브레이크포인트 토큰 (Breakpoints)본문더 알아보기 (Learn more)
DataSketchers AI·데이터·디자인으로 기업의 디지털 전환을 지원합니다. 서울시립대학교 캠퍼스타운 창업기업
회사소개 사업영역 D-SKET 고객사 블로그 위키 보도자료 ESG 문의
© 데이터스케쳐스. All rights reserved. 사업자등록번호 349-81-03411