[CSS] 모달(Modal)과 모달리스(Modaless)

 

 

 

📌 모달(Modal)

: 모달 창이 열렸을 때 기존에 있던 창을 사용하지 못하는 방식

제어권을 독점하게 되어 모달창이 종료하기 전까지는 기존창을 작업할 수 없는 방식

- 경고창 등

 

 

 

✨ 팝업

1. 기존에 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는 창
2. 원래 브라우저와 독립적인 관계
3. 브라우저의 옵션을 통해 열리지 않도록 강제할 수 있음 => 모달과의 차이점

 

 

 

 

📌 모달리스(Modaless) / 논모달(Non-modal)

: 창이 열리더라도 기존에 있던 창을 작업할 수 있는 방식

사용자가 순서에 상관없이 접근이 가능하기 때문에 사용자의 동작에 관계 없이 응용 프로그램의 상태를 일관성 있게 유지해야 함

- 도구창, 편집 메뉴창 

 

 

 

📍 모달 / 비모달을 사용하는 상황

출처: https://tech.toktokhan.dev/2021/07/21/about-modal/

 

 

---

 

참고

 

[api]모달과 모달리스의 차이

 

 

이거도 모달, 저거도 모달, 이게 모람

 

 

모달인데, 모달이 아닙니다.