Modal
Modal은 사용자가 특정 작업에 집중하도록 돕기 위해 화면의 중앙에 표시되는 오버레이 요소입니다. 주로 확인, 입력, 혹은 중요한 정보 전달에 사용됩니다. 모달은 화면의 다른 부분과의 상호작용을 차단하여 사용자의 집중을 유도합니다.
Modal
Modal은 사용자가 특정 작업에 집중하도록 돕기 위해 화면의 중앙에 표시되는 오버레이 요소입니다. 주로 확인, 입력, 혹은 중요한 정보 전달에 사용됩니다. 모달은 화면의 다른 부분과의 상호작용을 차단하여 사용자의 집중을 유도합니다.
Modal
Modal은 사용자가 특정 작업에 집중하도록 돕기 위해 화면의 중앙에 표시되는 오버레이 요소입니다. 주로 확인, 입력, 혹은 중요한 정보 전달에 사용됩니다. 모달은 화면의 다른 부분과의 상호작용을 차단하여 사용자의 집중을 유도합니다.
Anatomy
ESSENTIAL
1. 헤더
모달의 핵심 메시지나 주제를 명확히 전달하는 제목을 작성합니다.
2. 푸터
사용자가 수행해야 하는 주요, 보조 액션을 나타내는 버튼을 포함합니다.
OPTIONAL
3. 바디
제목을 보완하는 설명문을 보여주거나 추가 입력을 받는 인풋을 포함합니다.
체크박스
사용자가 동일한 메시지를 다시 보지 않도록 설정하는 버튼입니다.
Anatomy
ESSENTIAL
1. 헤더
모달의 핵심 메시지나 주제를 명확히 전달하는 제목을 작성합니다.
2. 푸터
사용자가 수행해야 하는 주요, 보조 액션을 나타내는 버튼을 포함합니다.
OPTIONAL
3. 바디
제목을 보완하는 설명문을 보여주거나 추가 입력을 받는 인풋을 포함합니다.
체크박스
사용자가 동일한 메시지를 다시 보지 않도록 설정하는 버튼입니다.
Anatomy
ESSENTIAL
1. 헤더
모달의 핵심 메시지나 주제를 명확히 전달하는 제목을 작성합니다.
2. 푸터
사용자가 수행해야 하는 주요, 보조 액션을 나타내는 버튼을 포함합니다.
OPTIONAL
3. 바디
제목을 보완하는 설명문을 보여주거나 추가 입력을 받는 인풋을 포함합니다.
체크박스
사용자가 동일한 메시지를 다시 보지 않도록 설정하는 버튼입니다.
State
Control
header icon
close button
Control
header icon
close button
Control
header icon
close button
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Spec
 | Height모든 해상도에서 Viewport 80%를 |
 | Scroll Behavior바디에서 스크롤이 생기는 경우 |
Modal의 Height는 사용자의 화면 크기(Viewport)에 따라 유동적으로 조정됩니다.
최대 높이값은 76rem으로 Viewport 80% 크기와 76rem 두 가지 중 작은 값이 최대 높이가 됩니다.
Spec
Height
모든 해상도에서 Viewport 80%를 최대 높이로 설정합니다.
Scroll Behavior
바디에서 스크롤이 생기는 경우 헤더에 border-bottom이 적용됩니다.
Spec
| Height모든 해상도에서 Viewport 80%를 |
| Scroll Behavior바디에서 스크롤이 생기는 경우 |
Modal의 Height는 사용자의 화면 크기(Viewport)에 따라 유동적으로 조정됩니다.
최대 높이값은 76rem으로 Viewport 80% 크기와 76rem 두 가지 중 작은 값이 최대 높이가 됩니다.
Usage
Do
바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.
Don't
close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.
Don't
인풋이 있는 경우, close(닫기)를 생략하면 안됩니다
Usage
Do
바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.
Don't
close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.
Don't
인풋이 있는 경우, close(닫기)를 생략하면 안됩니다
Usage
Do
바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.
Don't
close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.
Don't
인풋이 있는 경우, close(닫기)를 생략하면 안됩니다
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us