CSS만으로 팝업창 설계 - 엘쯔의 웹강의실

CSS 팝업창 소개

팝업창은 웹사이트에서 사용자 경험을 크게 향상시킬 수 있는 다목적 도구입니다. 전통적인 전체 페이지 오버레이와 달리 CSS 기반의 팝업창은 사용자에게 현재 컨텍스트에서 벗어나지 않고 집중된 상호작용을 제공할 수 있습니다. 이 절에서는 CSS 팝업창의 인기 상승 뒤에 숨어 있는 이유와 현대 웹 디자인에서의 역할을 살펴보겠습니다.

CSS를 사용한 팝업창의 장점

CSS(Cascading Style Sheets)는 웹페이지의 레이아웃을 스타일링하는 데만 국한되지 않습니다. CSS를 사용하여 팝업창과 같은 동적이고 인터랙티브한 요소를 생성할 수도 있습니다. CSS를 활용하여 팝업창을 디자인하는 것은 다음과 같은 여러 가지 이점을 제공합니다.

JavaScript 의존성 감소
CSS를 사용함으로써 팝업 동작을 관리하기 위한 많은 JavaScript 코드가 필요하지 않아 코드가 더 깔끔하고 유지보수가 용이해집니다.
빠른 로딩 속도
CSS 기반 팝업은 자바스크립트가 많이 사용된 대안에 비해 리소스 측면에서 가벼운 경우가 많아 웹사이트의 로딩 속도가 빨라집니다.
일관된 스타일링
CSS를 활용함으로써 팝업의 디자인과 스타일이 전체 웹사이트의 미학과 시각적 일관성을 유지할 수 있습니다.
반응형 디자인
CSS를 통해 반응형 팝업을 생성하여 다양한 화면 크기와 디바이스에 적응하며 여러 플랫폼에서 사용자 경험을 향상시킬 수 있습니다.

기본 구조 생성

이제 기본 구조를 생성해보겠습니다.

HTML 구조 이해하기

CSS 팝업의 기초는 기본적인 HTML 구조에 있습니다. 일반적으로 팝업은 오버레이와 콘텐츠 컨테이너로 구성됩니다. 오버레이는 배경을 어둡게 하여(모달팝업) 팝업 콘텐츠에 주목을 끌며, 콘텐츠 컨테이너는 실제로 표시하려는 정보를 포함합니다.

CSS로만 작동하는 모달팝업을 구성하려면 다음과 같은 마크업을 작성합니다.

<input type="checkbox" class="modal_chk" id="modal_chk">
<label class="modal_bt" for="modal_chk">Modal Button</label>	
<label class="modal" for="modal_chk">
	<article>
		<p>모달 콘텐츠 입니다.</p>
		<label for="modal_chk" class="modal_bt">확인</label>
	</article>
</label>

CSS 스타일링

기본 구조를 마련한 후, CSS를 사용하여 스타일을 적용해봅시다. 오버레이와 콘텐츠 컨테이너를 스타일링하겠습니다.

<style>
	* {margin:0; padding:0;}
	label {cursor: pointer}
	body {display: flex; justify-content: center; align-items: center; height: 100vh;}
	.modal_chk {display: none}
	.modal_bt {padding:5px 10px; background:red; color:#fff; border-radius:3px;}
	.modal_bt:hover {transform: translate(1px,1px)}
	.modal {position: fixed; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,.8); display: none; justify-content: center; align-items: center}

	.modal article {background:#fff; width:400px; height:300px; border-radius:3px; display: flex; position: relative; cursor: auto; justify-content: center; align-items: center}
	.modal .modal_bt {position: absolute; bottom:20px; left:50%; transform:translateX(-50%)}

</style>

.modal 이 모달 팝업형식을 만드는 반투명 배경이자 팝업창의 컨테이너 역할입니다.
.modal article이 팝업창의 콘텐츠입니다.

CSS로 팝업창 트리거하기

팝업창 구조를 설정한 다음, 사용자가 특정 동작을 수행할 때 팝업이 나타나도록 트리거를 설정해야 합니다. CSS는 호버 효과와 클릭 이벤트와 같은 다양한 방법으로 이를 구현할 수 있습니다.

아래와 같이 .modal_chk의 이름을 가진 체크박스를 선택시 모달팝업이 보이도록 설정합니다.

.modal_chk:checked~.modal {display:flex}

이 과정의 최종 결과물은 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko" >
<head>
  <meta charset="UTF-8">
  <title>Modal width css only</title>
<style>
	* {margin:0; padding:0;}
	label {cursor: pointer}
	body {display: flex; justify-content: center; align-items: center; height: 100vh;}
	.modal_chk {display: none}
	.modal_bt {padding:5px 10px; background:red; color:#fff; border-radius:3px;}
	.modal_bt:hover {transform: translate(1px,1px)}
	.modal {position: fixed; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,.8); display: none; justify-content: center; align-items: center}
	.modal_chk:checked~.modal {display:flex}
	.modal article {background:#fff; width:400px; height:300px; border-radius:3px; display: flex; position: relative; cursor: auto; justify-content: center; align-items: center}
	.modal .modal_bt {position: absolute; bottom:20px; left:50%; transform:translateX(-50%)}
	
</style>
</head>
<body>
<input type="checkbox" class="modal_chk" id="modal_chk">
<label class="modal_bt" for="modal_chk">Modal Button</label>	
<label class="modal" for="modal_chk">
	<article>
		<p>모달 콘텐츠 입니다.</p>
		<label for="modal_chk" class="modal_bt">확인</label>
	</article>
</label>	
</body>
</html>

결론

CSS만을 사용하여 팝업창을 디자인하는 방법과 기술에 대해 알아보았습니다. 팝업창은 웹사이트에서 사용자와 상호작용하는 중요한 요소로, 적절한 디자인과 기능을 통해 사용자 경험을 향상시킬 수 있습니다.