HTML, CSS, JS로 팝업(모달)창 구현하기
요즘 웹사이트 필수 기능! '상세보기' 팝업창 구현하기
요즘 잘 만든 웹사이트를 둘러보면 공통적으로 발견되는 기능이 있습니다. 바로 '팝업(Popup)' 또는 '모달(Modal)' 창입니다. 상품의 상세 정보를 보여주거나, 로그인을 요청하거나, 중요한 공지사항을 띄울 때 현재 페이지를 벗어나지 않고도 사용자에게 집중도 높은 경험을 제공하는 아주 중요한 기능이죠.
보기에는 복잡해 보이지만, 사실 기본적인 HTML, CSS, JavaScript 지식만 있다면 누구나 구현할 수 있습니다. 오늘은 '그림으로 쉽게 배우는 HTML+CSS+자바스크립트' 도서의 11장 최종 프로젝트 내용을 바탕으로, 메뉴 카드를 클릭하면 상세 정보를 보여주는 팝업 창을 만드는 전 과정을 단계별로 알기 쉽게 소개해 드리겠습니다.
1단계: 뼈대 세우기 - HTML 구조 설계
모든 웹 페이지 제작의 시작은 튼튼한 구조를 설계하는 것입니다. 팝업 창은 크게 두 부분으로 나눌 수 있습니다.
오버레이 (Overlay): 팝업 창 뒤에 깔리는 반투명한 검은색 배경. 사용자의 시선을 팝업에 집중시키는 역할을 합니다.
팝업 콘텐츠 (Popup Content): 이미지, 텍스트, 버튼 등 실제 내용이 들어가는 흰색 상자.
이 구조는 '그림으로 쉽게 배우는 HTML+CSS+자바스크립트' 책에서 그림으로 아주 명확하게 설명하고 있습니다.
이 구조를 바탕으로 HTML 코드를 작성해 보겠습니다. <body> 태그가 끝나기 직전에 아래 코드를 추가합니다.
popup 클래스를 가진 div가 전체 오버레이 역할을 합니다.
그 안에 popup-content가 실제 콘텐츠 창이 됩니다.
popup-close는 닫기 버튼, popup-body는 이미지와 텍스트 영역을 감싸게 됩니다.
2단계: 디자인 입히기 - CSS 스타일링
이제 HTML로 만든 뼈대에 CSS로 디자인을 입혀 제대로 된 팝업 창처럼 보이게 만들 차례입니다.
핵심 포인트 1: 화면 전체를 덮는 오버레이 만들기
popup 클래스에 position: fixed; 속성을 부여하고 top, left, right, bottom 값을 모두 0으로 설정하면, 스크롤과 상관없이 화면 전체를 덮는 레이어가 만들어집니다. 배경색은 rgba(0, 0, 0, 0.5)처럼 rgba를 사용해 반투명하게 만듭니다.
핵심 포인트 2: 콘텐츠를 화면 정중앙에 배치하기
오버레이에 display: flex;와 함께 align-items: center;, justify-content: center; 속성을 추가하면 자식 요소인 popup-content가 마법처럼 화면 정중앙에 배치됩니다.
핵심 포인트 3: 닫기 버튼을 오른쪽 위에 배치하기
이것은 실무에서 정말 많이 사용하는 기법입니다. 부모 요소(popup-content)에 position: relative;를, 자식 요소(popup-close)에 position: absolute;를 부여한 뒤 top: 20px;, right: 20px;와 같이 위치를 지정하면 부모 요소를 기준으로 정확한 위치에 배치할 수 있습니다.
핵심 포인트 4: 처음에는 보이지 않게 숨기기
팝업은 처음부터 보이는 것이 아니라 특정 행동을 했을 때 나타나야 합니다. 따라서 popup 클래스에 display: none; 속성을 추가해 평소에는 보이지 않도록 숨겨둡니다.
3단계: 생명 불어넣기 - JavaScript 이벤트 처리
이제 가장 중요한 단계입니다. JavaScript를 이용해 사용자의 행동에 반응하는 동적인 팝업을 만들어 보겠습니다. 우리가 구현할 기능은 다음과 같습니다.
기능 1: '상세 보기' 버튼을 클릭하면 숨겨뒀던 팝업 창이 나타난다.
기능 2: 팝업 창의 'X' 버튼을 클릭하면 팝업 창이 다시 사라진다.
작동 방식
이 기능의 핵심 원리는 'display' 속성을 바꾸는 것입니다. CSS에서 display: none;으로 숨겨두었던 팝업을 JavaScript로 display: flex;로 바꿔주면 화면에 나타나고, 다시 none으로 바꾸면 사라지는 원리입니다.
Step 1: 필요한 HTML 요소들을 JavaScript로 가져오기
먼저 addEventListener를 추가할 버튼들과 제어할 팝업 창을 querySelector나 querySelectorAll로 선택해서 변수에 담아둡니다.
Step 2: '상세 보기' 버튼에 클릭 이벤트 추가하기 (팝업 열기)
querySelectorAll로 가져온 모든 메뉴 버튼을 forEach 반복문으로 순회하며 각각에 'click' 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭하면, 이벤트 리스너가 실행되면서 popup.style.display = "flex"; 코드를 통해 팝업 창을 화면에 보여줍니다.
Step 3: '닫기' 버튼에 클릭 이벤트 추가하기 (팝업 닫기)
querySelector로 가져온 닫기 버튼에도 'click' 이벤트 리스너를 추가합니다. 사용자가 이 버튼을 클릭하면 popup.style.display = "none"; 코드가 실행되어 팝업 창을 다시 숨깁니다.
결론
어떤가요? 세 단계로 나누어 보니 팝업 기능이 생각보다 간단한 원리로 동작한다는 것을 알 수 있습니다.
HTML로 팝업의 구조를 만들고,
CSS로 디자인한 뒤 display: none;으로 숨겨놓았다가,
JavaScript로 사용자의 클릭 이벤트를 감지해 display 속성을 바꿔주기만 하면 됩니다.
이것이 바로 웹 페이지에 동적인 기능을 부여하는 가장 기본적인 패턴입니다. 오늘 배운 내용을 응용하면 로그인 창, 공지사항, 이미지 갤러리 등 무궁무진한 기능을 만들 수 있습니다.
'그림으로 쉽게 배우는 HTML+CSS+자바스크립트'는 이처럼 실용적인 예제를 통해 웹 개발의 핵심 원리를 차근차근 알려줍니다. 오늘 만든 팝업은 책 속 최종 프로젝트의 일부일 뿐입니다. 책과 함께라면 여러분도 자신만의 멋진 웹 페이지를 처음부터 끝까지 완성할 수 있을 것입니다.
웹 개발을 처음 배우려고 할 때 가장 먼저 드는 생각은 “대체 어디서부터 시작해야 하지?”입니다. 낯선 용어, 익숙하지 않은 코드, 구조를 이해하기 어려운 화면 구성 등 초보자 입장에서 웹 개발을 배우는 일은 쉽지 않습니다.
『그림으로 쉽게 배우는 HTML+CSS+자바스크립트』는 이러한 고민을 가진 분들을 위해 만들어진 책입니다. 웹 페이지의 뼈대를 구성하는 HTML, 스타일을 담당하는 CSS, 동적인 기능을 구현하는 자바스크립트까지, 웹 개발의 핵심 기술을 그림과 실생활 비유를 활용해 누구나 이해하기 쉽게 풀어냈습니다.
