jonbeo 님의 블로그

안녕하세요 😊웹페이지에서 공지사항, 이미지 확대, 로그인 창 등을 띄울 때모달 팝업은 정말 자주 사용됩니다.이번 글에서는 jQuery로 간단하게 모달 팝업을 구현하는 방법을 단계별로 안내드립니다.📍 1. 기본 HTML 구조모달 열기 × 모달 제목 여기에 내용을 작성하세요. .modal : 모달 전체 영역 (기본적으로 숨김).modal-content : 팝업 내부 내용.close : 닫기 버튼📍 2. CSS 스타일.modal { display: none; /* 기본 숨김 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0..

안녕하세요 😊웹사이트에서 흔히 보이는 UI 요소 중 하나가바로 **모달 팝업(Popup)**입니다. 대부분의 팝업은 JavaScript로 구현되지만,HTML5에서는 아예 **전용 태그 **를 지원합니다!오늘은 태그의 기본 사용법과 실제 예제를초보자도 따라할 수 있게 정리해드릴게요 💡📍 1. 태그란?HTML5에서 새로 추가된 대화 상자(dialog) 전용 태그팝업 창처럼 화면 위에 뜨는 박스를 JavaScript 없이 생성 가능사용자에게 메시지를 보여주거나 확인/취소 등의 입력을 받을 때 사용📍 2. 기본 예제 이용약관에 동의하십니까? 닫기약관 보기 📌 주요 메서드show() – 비모달 팝업 (배경 클릭 가능)showModal() – 모달 팝업 (배경 클릭 불가)close() – 팝업 닫기..