[Web] 🍭웹 팝업의 종류와 구현 방법(레이어 팝업, 모달리스 팝업, 모달팝업)

웹 팝업은 사용자의 경험과 상호작용에 큰 영향을 미치는 중요한 UI 요소이다. 최근에 프로젝트를 하면서 메인 페이지에 몰아져 있는 팝업 코드들이 코드가 길어짐에 따라 정리가 안되는 것 같아서 팝업에 대한 내용을 한번 정리하고 따로 파일로 구분해보려고 한다.이번에는 레이어 팝업, 모달리스 팝업, 모달 팝업의 개념, 특징, 장단점, 사용 사례, 구현 방법을 자세히 설명하고, 비교해보려고 한다. 1. 레이어 팝업 (Layer Popup)개념레이어 팝업은 웹 페이지 내부에서 특정 위치에 고정된 팝업페이지 레이아웃의 일부처럼 보이며, 배경과 상호작용이 가능특징페이지 흐름을 방해하지 않음특정 위치에 고정되거나 페이지 스크롤에 따라 움직이지 않음사용자가 배경과 자유롭게 상호작용 가능장점사용자 흐름을 크게 방해하지 않..

• format_list_bulleted web_dev
• · 2024. 11. 25.
• textsms

popup / modal / tab

modal - popup 누르면 popup 공지 사이트 서버 점검으로 10:00~18:00까지 서비스 중지됩니다. 닫기 notice-tab 공지사항1 공지사항2 공지사항3 서브1번입니다. 서브1번이라고요 서브2번입니다. 서브2번이라고요 서브3번입니다. 서브3번이라고요 popup - javascript로 작성 Click popup close popup - jQuery로 작성 Click popup close popup이 열릴 때 뒤에 배경 어둡게 Click popup close ☆ 모달과 팝업의 비교 - 모달 새로운 윈도우 창이 열리는 것이 아니라 레이어가 보여지는 것 (부모-자식 관계) 중간중간에 사용자에게 보여주는 경우가 많음. display:none display:block - 팝업 현재 열려있는 브라..

• format_list_bulleted 자격증/웹디자인기능사
• · 2022. 6. 22.
• textsms