[TIL 4주차 수요일] 오버레이와 모달

스텍 (Stack)

버튼을 상하나 좌우로 2개 이상을 같이 사용하는 경우, 팝업 등의 요소에서도 볼 수 있고, 일반적인 화면에서도 버튼을 좌우나 상하로 배치한 경우를 볼 수 있

출처 : 스파르타 코딩클럽

독(Dock)

하단에 고정된 형태, 버튼 컴포넌트는 단일 요소로 사용하는 경우도 있지만, 대부분의 경우 화면의 하단에 고정된 독(Dock) 형태로 사용

출처 : 스파르타 코딩클럽

 

포지션 속성

 

스태틱(Static)

가장 기본값으로, 요소에 아무런 속성값을 주지 않은 그대로의 상태

 

픽스드(Fixed)

화면 전체를 기준으로 요소를 그 위치에 고정

 

앱솔루트(Absolute)

픽스드와 같지만, 요소가 고정되는 위치는 화면 전체가 아니라 요소를 감싼 상위 컨테이너를 기준으로 하며 상위 컨테이너가 반드시 오토레이아웃이어야 한다.

 

스티키(Sticky)

스티키 포지션은 픽스드와 스태틱을 전환하며 적용되는 속성,스크롤 안에서는 스태틱이다가, 스크롤을 넘어가면 화면 상단에 고정

 

모달(Modal)과 팝업

팝업

문자 그대로 팝하고 튀어나온다는 뜻, 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 부름

출처 : 스파르타 코딩클럽

 

 

모달

사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것, 까맣게 가려진 뒤쪽 화면은 조작할 수 없다

모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나

출처 : 스파르타 코딩클럽

 

오버레이와 라이트박스

바텀시트, 플로팅 버튼의 메뉴, 드롭다운 메뉴 등 화면 위에 중첩되는 요소는 모두 오버레이라고 부를 수 있다.

UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고 한다

 

출처 : 스파르타 코딩클럽

 

라이트박스

모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 있는 반투명한 층

출처 : 스파르타 코딩클럽