[웹 UI 개발] 팝업 - 0

팝업은 특정 영역의 위치에 특정 사이즈의 레이어(창)를 특정 시점에 노출하는 것을 의미한다.

팝업에는 크게 Popup, Modal, Alert 세가지 종류로 나뉜다.

각각 새창(일반 팝업), 레이어 팝업, 알림(시스템 팝업)을 뜻한다.

 

 일반 팝업과 레이어 팝업은 아래와 같은 차이가 있다.

	일반 팝업	레이어 팝업
보여주는 방식	새창 열기	숨겨져있던 마크업 요소 보여주기
파일	새로운 html, css	동일한 html, css
진입 방법	a 태그 (팝업이 고유의 주소를 지님)	button 태그 (현재 페이지의 일부)
팝업 위치	window 기준	viewport 기준
노출 여부	브라우저 옵션으로 노출을 막을 수 있음	스크립트 로딩만 가능하다면 노출

 

디자인적인 통일성과 사용자에게 노출 될 확률이 높다는 이유로 요즘에는 레이어 팝업을 더 선호하는 편이다.

특히 모바일에서는 새창을 띄우면 다시 원래 페이지로 돌아가는 것이 불편하기 때문에 전체 페이지를 뒤덮은 형식의 레이어 팝업을 사용한다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발