팝업, 모달창

1. 일반 팝업 

새로운 웹 창을 하나 더 추가시키는 기능, 

 - 크기 줄일 수도 있고 위치 옮길 수도 있다. 

 - 상단의 페이지 주소를 복사해서 새 탭에서도 열 수 있다.

 - 브라우저 설정에서 팝업 차단하면 팝업 뜨지 않음

 

2. Alert/ Confirm / Prompt : (시스템 팝업)

 - 각자의 컴퓨터 환경과 브라우저에 따라서 정해진 디자인으로 뜨는 팝업

 - 별도로 마크업이나 디자인이 필요하지 않다. 

 

3. 레이어 팝업 : Modal

 - 원래 있던 콘텐트에 반투명한 배경으로 깔리고 그 위에 팝업이 뜬다. 

 - 상단에 주소창도 없고 옯길 수도 없다. 

 - 이 팝업은 온전하게 현재 이 브라우저에 속해있기 때문에 브라우저를 옯겨야지만 옮겨진다. 

 

4. 일반 팝업 vs. 레이어 팝업

 - 새 창으로 열기 때문에 새로운 html과 css 파일이 필요하다. 

 - 팝업 페이지의 고유 주소가 있기 때문에 a 태그로 링크 걸어서 진입하는 방식이 자연스럽다.

 - window(화면 모니터 자체)기준으로 위치를 잡는다.

 - 브라우저 옵션에서 팝업 차단으로 노출을 막을 수 있다.

 

5. 레이어 팝업

 - 숨겨져있던 마크업 요소를 보여주는 것

 - 현재 웹페이지와 동일한 html, css파일 사용

 - 현재 페이지의 일부 요소를 스크립트로 보여주는 것이기 때문에 button태그를 사용하여 팝업 띄움

 - 브라우저 내의 뷰포트 기준으로 위치 잡음

 - 스크립트 로딩만 가능하면 노출이 된다.

 

 

 

참고 : https://velog.io/@wish/18.-%EB%A0%88%EC%9D%B4%EC%96%B4%ED%8C%9D%EC%97%85

💛[부스트코스_웹 UI 개발] 18. 레이어팝업