이번 포스팅에서는 모바일웹 환경을 위한 모달창을 만들어 보도록 하겠습니다.
모달 창은 UI 의 중요한 요소로, 사용자의 주의를 필요로 하는 정보를 표시하기 위해 현재 페이지 위에 오버레이되는 방식으로
나타납니다. 다양한 목적과 상황에 맞게 여러 종류의 모달 창을 사용할 수 있습니다.
모달창은 알림 모달 (Alert Modal) , 확인 모달 (Confirmation Modal), 입력 모달 (Input Modal), 로딩 모달 (Loading Modal)
등이 있습니다. 이번에 만들 모달창 안에 원하시는 유형으로 변경해서 사용하시면 됩니다.
또, 모달의 종류에는 팝업모달(Popup Modal), 바텀시트(Bottom Sheet ) , 다이얼로그 (Dialog) , 드로어 (Drawer) 로 크게
나눠볼 수 있는데 이번 만들기 시리즈에서는 기본적인 팝업모달을 제공합니다.
추후 포스팅 에 바텀시트, 다이얼로그 등 다양한 모달창을 만들어서 제공하도록 하겠습니다.
모바일 환경에서 만들기 시리즈 다른 글
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기
[ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기
햄버거 메뉴는 모바일 환경에서 주로 사용되는 네비게이션 메뉴입니다. 이 글에서는 간단한 CSS만을 사용하여 햄버거 메뉴를 만드는 방법을 알아보겠습니다. HTML 코드 작성 햄버거 메뉴와 네비
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 스크롤애니메이션 만들기
[ CSS ] 모바일 환경을 위한 스크롤애니메이션 만들기
스마트폰으로 화면을 내릴때 글자가 밑에서부터 부드럽게 생기는 효과를 본적 있으신가요? 이런 애니메이션 효과가 바로 스크롤애니메이션 입니다. 저번 포스팅에서는 모바일 환경을 위한 햄
it-ability.tistory.com
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 다크모드 토글 만들기
[ CSS ] 모바일 환경을 위한 다크모드 토글 만들기
스마트폰 사용이 일상화된 오늘날, 사용자들은 다양한 조명 환경에서 장시간 디바이스를 사용합니다. 이에 따라, 앱과 웹사이트의 다크모드 지원은 더 이상 선택이 아닌 필수가 되었습니다. 다
it-ability.tistory.com
# 1. 완성된 팝업모달 화면
# 2. 기본 폴더 구조
POPUPMODAL 폴더 구조 입니다.
├── index.html
├── css/
│ └── style.css
└── js/
└── script.js
# 3. HTML 소스 구조
팝업모달 기능을 구현하기 위해, 먼저 기본적인 HTML 구조를 설정합니다.
index.html 에서 기본적인 화면 레이아웃 및 화면구조를 작성하도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모바일 환경을 위한 팝업 모달 만들기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 모달을 열기 위한 버튼 -->
<button id="openModalBtn">모달 열기</button>
<!-- 모달 구조 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h2>팝업 모달 제목</h2>
<p>여기에 팝업 모달 내용이 들어갑니다.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
# 4. CSS 소스 구조
버튼 색 , 모달 효과 CSS 등이 있는 CSS 전체 코드 입니다.
주석을 참고해주세요
/* 기본 버튼 스타일 */
button {
background-color: #ff9800; /* 주황색 배경 */
color: white; /* 흰색 텍스트 */
padding: 10px 20px; /* 패딩 */
border: none; /* 테두리 없음 */
cursor: pointer; /* 커서 포인터 */
border-radius: 4px; /* 둥근 모서리 */
font-size: 16px; /* 폰트 크기 */
}
/* 버튼 호버 효과 */
button:hover {
background-color: #e68a00; /* 호버 시 색상 변경 */
}
/* 전체 모달 스타일 */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
/* 모달 내용 스타일 - 화면 중앙 배치 */
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 2px; /* 둥근 모서리 */
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19); /* 그림자 효과 */
width: 80%; /* 또는 적절한 너비 */
max-width: 600px; /* 최대 너비 설정 */
/* 중앙 배치를 위한 스타일 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 닫기 버튼 스타일 */
.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
# 5. JAVASCRIPT 소스 구조
자바스크립트 에서는 모달 열고 닫는 기능 , 모달 영역 바깥 클릭시 모달 닫기 등을 구현했습니다.
이번 모달 구현에서는 코드가 간단하기 때문에 설명은 따로 하지 않겠습니다. 궁금하신점 있으시면 댓글 달아주세요.
전체코드 입니다.
// 모달 요소와 모달을 여닫는 버튼 요소를 선택
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
var closeBtn = document.getElementsByClassName("close-button")[0];
// 버튼 클릭 시 모달 열기
btn.onclick = function() {
modal.style.display = "block";
}
// 닫기 버튼 클릭 시 모달 닫기
closeBtn.onclick = function() {
modal.style.display = "none";
}
// 모달 바깥 영역 클릭 시 모달 닫기
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
# 6.마무리
이번 포스팅에서는 모바일환경에서 많이 쓰이는 팝업 모달 을 구현해보았습니다.
모바일 환경에서의 웹 개발은 사용자 경험(UX)을 최우선으로 고려해야 합니다. 특히, 팝업 모달은 정보 제공, 사용자 피드백 수집, 중요한 알림 표시 등 다양한 목적으로 활용되며, 이는 모바일 웹사이트나 애플리케이션의 인터랙티브한 요소를 한층 강화시킵니다.
오늘 우리가 만들어본 팝업 모달 구현 방법을 통해, 사용자가 모바일 환경에서도 더 나은 상호작용을 경험할 수 있게 되었습니다.
다음 포스팅에서도 모바일 환경을 위한 다양한 효과를 만드는 작업을 해보도록 하겠습니다.