회사소개
블로그
DataSketchers

전체 메뉴

회사소개
사업영역
D-SKET
웹빌더CanvasEvents
고객사
블로그
위키
보도자료
ESG
Topics
디자인 시스템 ›
  • 디자인 시스템
    • DatePicker
    • DateTimePicker
    • Dialog
    • Drawer
    • Segmented (세그먼트)
    • Select (선택)
    • Virtualized Select (가상화 셀렉트)
    • Skeleton (스켈레톤)
    • 태그 (Tag)
    • 텍스트 (Text)
    • 타임라인 (Timeline)
    • 시간 선택기 (Time Picker)
    • 타임 셀렉트 (Time Select)
    • 툴팁 (Tooltip)
    • 투어 (Tour)
    • 트랜스퍼 (Transfer)
    • 트리 (Tree)
    • 트리 셀렉트 (TreeSelect)
    • 트리 V2 (Tree V2)
    • 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
    • Bulma 칼럼
    • Flexbox 기반의 칼럼
    • 칼럼 간격
    • 칼럼 중첩
    • 칼럼 옵션
    • 칼럼 반응형
    • 칼럼 크기
    • 불마 컴포넌트
    • 브레드크럼
    • 카드
    • 드롭다운
    • 메뉴
    • 메시지
    • 모달
    • 내비게이션 바
    • 페이지네이션
    • 패널
    • 탭
    • 불마 커스터마이징 개념
    • Bulma Sass 변수 목록
    • CSS 변수로 커스터마이즈하기
    • Modular Sass로 커스터마이즈하기
    • Sass로 커스터마이즈하기
    • Elements
    • Block
    • Box
    • Button
    • Content
    • Delete
    • Icon
    • Image
    • Notification
    • Progress Bar
    • Table
    • Tag
    • Title and Subtitle
    • Color Palettes in Bulma
    • CSS Variables in Bulma
    • Dark Mode in Bulma
    • Skeletons in Bulma
    • Bulma 테마
    • Form
    • Checkbox
    • File upload
    • Form controls
    • Input
    • Radio button
    • Select
    • Textarea
    • Grid
    • Fixed Grid
    • Grid Cells
    • Bulma Grid Playground
    • Smart Grid
    • Color helpers
    • Flexbox helpers
    • Other helpers
    • Color Palette helpers
    • Spacing helpers
    • Typography helpers
    • 반응형 헬퍼
    • 레이아웃
    • 컨테이너
    • 푸터
    • 히어로
    • 레벨
    • 미디어 객체
    • 섹션
    • Bulma Sass Extends
    • Bulma Sass Form Control Mixins
    • Bulma Sass Mixins
    • Bulma Sass Responsive Mixins
    • Bulma 대체 버전
    • Bulma 설치하기
    • Bulma v1로 마이그레이션
    • Bulma 모듈화
    • Bulma 개요
    • Bulma 반응형
    • Bulma 수식어 문법
    • Component index
    • Accordion
    • AI label
    • Breadcrumb
    • Button
    • Checkbox
    • Code snippet
    • Content switcher
    • Data table
    • Date picker
    • Dropdown
    • File uploader
    • Form
    • Inline loading
    • Link
    • List
    • Loading
    • Menu
    • Modal
    • Notification
    • Number input
    • Overflow menu
    • Overview: Components
    • Pagination
    • Popover
    • Progress bar
    • Progress indicator
    • Radio button
    • Search
    • Select
    • Slider
    • Structured list
    • Tabs
    • Tag
    • Text input
    • Tile
    • Toggletip
    • Toggle
    • Tooltip
    • Tree view
    • UI shell header
    • Axes and labels
    • Chart types
    • Color palettes
    • Get started
    • Get started
    • Frameworks
    • Frameworks
    • Get started
    • FAQs
    • Carbon Design System
    • Common actions
    • Empty states
    • Filtering
    • Forms
    • Global header
    • Loading
    • Login
    • Notifications
    • Overflow content
    • Search
    • Status indicators
    • 차트
    • 스파크라인
    • 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
    • 관련 프로젝트
    • 로드맵
    • 쇼케이스
    • 비전
    • Affix
    • Alert
    • Anchor
    • Autocomplete
    • Avatar
    • Backtop
    • Badge
    • Border
    • Breadcrumb
    • Button
    • Calendar
    • Card
    • Carousel
    • Cascader
    • Checkbox
    • Collapse
    • Color
    • ColorPicker
    • ColorPickerPanel
    • Config Provider
    • Container
    • DatePickerPanel
    • Descriptions
    • Divider
    • Dropdown
    • Empty
    • Form
    • Icon
    • Image
    • Infinite Scroll
    • Input
    • Input Number
    • InputOtp
    • InputTag
    • Layout
    • Link
    • Loading
    • Mention
    • Menu
    • Message
    • Message Box
    • Notification
    • Overview
    • Page Header
    • Pagination
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rate
    • Result
    • Scrollbar
    • 슬라이더
    • 스페이스
    • 스플리터
    • 스태티스틱
    • 스텝
    • 스위치
    • 테이블
    • 가상화 테이블
    • 탭
    • 타이포그래피
    • 업로드
    • 워터마크
    • 변경 이력
    • 커밋 예시
    • 커스텀 기본값
    • 다크 모드
    • 디자인 원칙
    • 개발 FAQ
    • 로컬 개발
    • 국제화
    • 설치
    • 마이그레이션
    • 커스텀 네임스페이스
    • 내비게이션
    • 빠른 시작
    • 서버 사이드 렌더링
    • 커스텀 테마
    • 내장 트랜지션
    • 번역
    • 접근성
    • AI 해로의 유형
    • 색상
    • 웹 별칭 색상 토큰
    • 웹 별칭 색상 토큰 2
    • 컴포넌트 수명주기와 로드맵
    • Android 라이브러리 개요
    • Android Avatar group
    • Android Avatar
    • Android Button
    • Android Progress indicator
    • Android Shimmer
    • iOS 라이브러리 개요
    • iOS Activity indicator
    • iOS Avatar group
    • iOS Avatar
    • iOS Button
    • 카드 너지
    • 헤즈업 디스플레이
    • 내비게이션 바
    • 진행 바
    • 세그먼트 컨트롤
    • 시머
    • 텍스트 필드
    • 툴팁
    • 웹 개요
    • Accordion
    • Avatar group
    • Avatar
    • Badge
    • Breadcrumb
    • Button
    • Card
    • Carousel
    • Checkbox
    • Combobox
    • Dialog
    • Divider
    • Drawer
    • Dropdown
    • Field
    • Fluent provider
    • Icon
    • Image
    • Info label
    • Input
    • Label
    • Link
    • List
    • Menu
    • Message bar
    • Nav
    • Persona
    • Popover
    • Progress bar
    • Radio group
    • Rating
    • Searchbox
    • Select
    • Skeleton
    • Slider
    • Spinner
    • Spin button
    • Switch
    • Tablist
    • Tag picker
    • Tag
    • Textarea
    • Text
    • Toast
    • React Toolbar
    • React Tooltip
    • Tree
    • Windows 개요
    • 콘텐츠 디자인
    • 콘텐츠 엔지니어링
    • 이벌(elval)을 위한 프롬프트 세트와 어서션 만들기
    • 무엇을 먼저 평가할지 정하기
    • 좋은 출력 품질 정의하기
    • 경험 유형별 출력 요구사항 정의하기
    • 복잡한 작업을 위한 프롬프트 정의하기
    • 시스템 수준 동작 정의하기
    • 작업 동작 패턴 정의하기
    • 어조와 맥락 동작 정의하기
    • 상호작용 동작 설계하기
    • 출력 품질 평가하기
    • 시스템 프롬프트 엔지니어링
    • 시간 경과에 따른 품질 추적
    • eval 결과를 올바른 수정으로 바꾸기
    • eval 결과 이해하기
    • 디자인 원칙
    • 디자인 토큰
    • Elevation
    • 디자인 시작하기
    • 개발 시작하기
    • Fluent 2의 새로운 기능
    • 핸드오프
    • 아이코노그래피
    • 레이아웃
    • 소재
    • 모션
    • 온보딩
    • 책임 있는 AI
    • 형태
    • 타이포그래피
    • 대기 UX
    • API
    • Form
    • State
    • Visibility
    • Breadcrumb
    • Form
    • Grid
    • Menu
    • Message
    • Table
    • Button
    • Container
    • Divider
    • Emoji
    • Flag
    • Header
    • Icon
    • Image
    • Input
    • Label
    • List
    • Loader
    • Placeholder
    • Rail
    • Reveal
    • Segment
    • Step
    • Text
    • Reset
    • Site
    • Recipes
    • Build Tools
    • Getting Started
    • Glossary
    • Integrations
    • What's New
    • Accordion
    • Calendar
    • Checkbox
    • Dimmer
    • Dropdown
    • Embed
    • Flyout
    • Modal
    • Nag
    • Popup
    • Progress
    • Rating
    • 검색
    • 셰이프
    • 사이드바
    • 슬라이더
    • 스티키
    • 탭
    • 토스트
    • 트랜지션
    • 레이아웃
    • 테마링
    • 광고
    • 카드
    • 댓글
    • 피드
    • 아이템
    • 통계
    • 디자인 리소스
    • 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) 개요
    • 제품 스코어카드
    • 제품 테스트하기
    • 접근성과 현지화
    • 콘텐츠 디자인 모범 사례
    • 브랜드 목소리와 톤
    • 대문자 표기
    • 숫자 표기
    • 구두점
    • 문장 구조
    • 용어
    • 텍스트 잘라내기
    • 단위와 기호
    • 콘텐츠 디자인 개요
    • 명령줄 인터페이스 핸드북
    • 명령줄 인터페이스 핸드북
    • 오류 메시지
    • PatternFly 디자인 가이드라인
    • 제품 투어
    • 툴팁
    • 색상
    • 모든 디자인 토큰
    • 디자인
    • 개발
    • 디자인 토큰 개요
    • 아이코노그래피
    • Bullseye 레이아웃
    • Bullseye 레이아웃
    • Bullseye 레이아웃
    • Bullseye 레이아웃
    • Flex 레이아웃
    • Flex 레이아웃
    • Flex 레이아웃
    • Flex 레이아웃
    • Gallery 레이아웃
    • Gallery 레이아웃
    • Gallery 레이아웃
    • Gallery 레이아웃
    • Grid 레이아웃
    • Grid 레이아웃
    • Grid 레이아웃
    • Grid 레이아웃
    • 레벨
    • 레벨
    • Level 레이아웃
    • 레벨
    • 레이아웃 개요
    • 스플릿
    • 스플릿
    • 스플릿
    • 스플릿
    • 스택
    • 스택
    • 스택
    • 스택
    • 모션
    • 모션
    • 모션
    • 파운데이션과 스타일 개요
    • 스페이서
    • 테마
    • 테마
    • 테마
    • 테마
    • 타이포그래피
    • 접근성 유틸리티
    • 텍스트 정렬 유틸리티
    • 배경색 유틸리티
    • 박스 섀도 유틸리티
    • 표시 유틸리티
    • 플렉스 유틸리티
    • 플로트 유틸리티
    • 유틸리티 클래스 개요
    • 크기 유틸리티
    • 간격 유틸리티
    • 텍스트 유틸리티
    • PatternFly로 디자인하기
    • PatternFly로 개발하기
    • HTML 트레이닝
    • HTML CSS 변수와 오버라이드 트레이닝
    • HTML 기초 트레이닝
    • React 트레이닝
    • React 기초 트레이닝
    • 액션
    • 일괄 선택
    • 카드 뷰
    • 카드 뷰
    • 카드 뷰
    • 컴포넌트 사용과 동작
    • 대시보드
    • 대시보드 CSS 변수
    • 대시보드
    • 필터
    • 필터
    • 패턴 개요
    • 비밀번호 생성기
    • 비밀번호 강도
    • Primary-detail
    • Primary-detail
    • Primary-detail
    • 오른쪽에서 왼쪽
    • 상태와 심각도
    • 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에서 열기
    • accent-color
    • align-content
    • align-items
    • align-self
    • appearance
    • aspect-ratio
    • backdrop-filter
    • backdrop-blur
    • backdrop-brightness
    • backdrop-contrast
    • backdrop-grayscale
    • backdrop-hue-rotate
    • backdrop-invert
    • backdrop-opacity
    • backdrop-saturate
    • backdrop-sepia
    • backface-visibility
    • background-attachment
    • background-blend-mode
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • block-size
    • border-collapse
    • border-color
    • border-radius
    • border-spacing
    • border-style
    • border-width
    • box-decoration-break
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • caret-color
    • clear
    • color
    • color-scheme
    • columns
    • compatibility
    • content
    • cursor
    • detecting-classes-in-source-files
    • display
    • editor-setup
    • field-sizing
    • fill
    • filter
    • filter-blur
    • filter-brightness
    • 대비 조절
    • 드롭 섀도우
    • 흑백 처리
    • 색상 회전
    • 색상 반전
    • 채도 조절
    • 세피아 톤
    • Flex
    • Flex Basis
    • Flex 방향
    • Flex Grow
    • Flex Shrink
    • Flex Wrap
    • Float
    • 폰트 패밀리
    • 폰트 피처 설정
    • 폰트 크기
    • 폰트 스무딩
    • 폰트 스트레치
    • 폰트 스타일
    • 폰트 숫자 변형
    • 폰트 두께
    • 강제 색상 조정
    • 간격
    • 자동 생성 열 크기
    • 그리드 자동 배치
    • 자동 생성 행 크기
    • 그리드 열
    • Grid Row
    • Grid Template Columns
    • Grid Template Rows
    • Height
    • Hyphens
    • Inline Size
    • Tailwind CSS 시작하기
    • Play CDN으로 시작하기
    • Tailwind CLI로 설치하기
    • PostCSS로 설치하기
    • Vite로 설치하기
    • Isolation
    • Justify Content
    • Justify Items
    • Justify Self
    • Letter Spacing
    • Line Clamp
    • Line Height
    • List Style Image
    • List Style Position
    • List Style Type
    • Margin
    • Mask Clip
    • Mask Composite
    • Mask Image
    • Mask Mode
    • Mask Origin
    • Mask Position
    • 마스크 반복
    • 마스크 크기
    • 마스크 타입
    • 최대 블록 크기
    • 최대 높이
    • 최대 인라인 크기
    • 최대 너비
    • 최소 블록 크기
    • 최소 높이
    • 최소 인라인 크기
    • 최소 너비
    • 혼합 모드
    • 객체 맞춤
    • 객체 위치
    • 불투명도
    • 순서
    • 아웃라인 색상
    • 아웃라인 오프셋
    • 아웃라인 스타일
    • 아웃라인 너비
    • 넘침
    • 줄바꿈
    • 오버스크롤 동작
    • 패딩
    • 원근
    • 원근 원점
    • 콘텐츠 배치
    • 아이템 배치
    • place-self
    • pointer-events
    • position
    • Preflight
    • resize
    • rotate
    • scale
    • scrollbar-color
    • scrollbar-gutter
    • scrollbar-width
    • scroll-behavior
    • scroll-margin
    • scroll-padding
    • scroll-snap-align
    • scroll-snap-stop
    • scroll-snap-type
    • skew
    • stroke
    • stroke-width
    • table-layout
    • tab-size
    • text-align
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style
    • text-decoration-thickness
    • text-indent
    • text-overflow
    • 텍스트 섀도우
    • 텍스트 변환
    • 텍스트 밑줄 오프셋
    • 텍스트 줄바꿈
    • 위치 지정: 위/오른쪽/아래/왼쪽
    • 터치 동작
    • 변환
    • 변환 원점
    • 변환 스타일
    • 트랜지션 동작
    • 트랜지션 지연
    • 트랜지션 지속 시간
    • 트랜지션 속성
    • 트랜지션 이징 함수
    • 이동
    • 업그레이드 가이드
    • 사용자 선택
    • 수직 정렬
    • 가시성
    • 공백 처리
    • 너비
    • 성능 최적화
    • 단어 줄바꿈
    • 쌓임 순서
    • 확대/축소
    • Transitions
디자인 시스템 ›

Bullseye 레이아웃

목차
Bullseye 레이아웃 (CSS 변수)본문CSS 변수 (CSS variables)더 알아보기 (Learn more)

Bullseye 레이아웃 (CSS 변수)

Bullseye 레이아웃에서 사용하는 CSS 변수를 정리한 문서예요. 패딩 값을 토큰으로 제어할 수 있어요.

출처: 문서

본문

CSS 변수 (CSS variables)

Selector Variable Value
.pf-v6-l-bullseye --pf-v6-l-bullseye--Padding 0

더 알아보기 (Learn more)

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