이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다.
모달 만들기
모달이란, 다음 이미지와 같이 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI 를 의미합니다.
이번에는 이런 UI 를 HTML 과 JavaScript 를 사용하여 만들어보겠습니다.
우선, Codesandbox 에서 새로운 Vanilla Sandbox 를 만드세요.
그리고, index.js 를 열고 맨 위 import "./styles.css"; 하단의 코드를 지워주세요.
이번에 우리는 스타일링을 할 것이기 때문에 css 를 불러와야 합니다.
그 다음에, index.html 을 열어서 다음과 같이 수정해주세요.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>안녕하세요!</h1>
<p>내용내용내용</p>
<button>버튼 열기</button>
<script src="src/index.js"></script>
</body>
</html>
이렇게 화면이 나타났나요?
그 다음엔, 버튼 아래에 다음 내용을 보여주세요.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>안녕하세요!</h1>
<p>내용내용내용</p>
<button>버튼 열기</button>
<div class="modal-wrapper">
<div class="modal">
<div class="modal-title">안녕하세요</div>
<p>모달 내용은 어쩌고 저쩌고..</p>
<div class="close-wrapper">
<button>닫기</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>그러면 다음과 같이 보여질텐데요
여기에 CSS 로 스타일링을 해보겠습니다.
src 디렉터리 안에 들어있는 styles.css 파일을 열어서 다음과 같이 수정해보세요.
body {
font-family: sans-serif;
}
.modal-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
padding: 24px 16px;
border-radius: 4px;
width: 320px;
}
.modal-title {
font-size: 24px;
font-weight: bold;
}
.modal p {
font-size: 16px;
}
.close-wrapper {
text-align: right;
}그럼 다음과 같이 나타날 것입니다.
display 스타일을 사용하여 모달 열고 닫기
이제 모달을 열고 닫는 기능을 구현해보겠습니다.
방법은 굉장히 간단한데요, 바로 display 스타일을 사용하는 것 입니다.
index.html 을 다음과 같이 수정해보세요.
.modal-wrapper 쪽에는 인라인 스타일이 추가되었고, 각 버튼에 id 가 붙었습니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>안녕하세요!</h1>
<p>내용내용내용</p>
<button id="open">버튼 열기</button>
<div class="modal-wrapper" style="display: none;">
<div class="modal">
<div class="modal-title">안녕하세요</div>
<p>모달 내용은 어쩌고 저쩌고..</p>
<div class="close-wrapper">
<button id="close">닫기</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>display: none; 스타일을 사용하게 되면 해당 엘리먼트는 화면에서 숨겨지게됩니다.
이제, index.js 를 열어서 버튼과 모달의 DOM 을 선택해주고, 클릭 이벤트를 설정해주세요
import "./styles.css";
const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");
open.onclick = () => {
modal.style.display = "flex";
};
close.onclick = () => {
modal.style.display = "none";
};id 가 아닌 클래스로 DOM을 선택하고 싶을땐 document.getElementsByClassName 또는 document.querySelector 를 사용하면 됩니다.
document.querySelector 를 사용하여 class 값으로 DOM 을 선택 할 때에는 텍스트 앞에 . 을 붙여주어야 합니다.
이제 버튼들을 눌러보세요. 잘 작동하나요?
'프로그래밍 > Javascript(ES6)' 카테고리의 다른 글
| [Javascript, 자바스크립트] 익스플로러(IE)에서 forEach 에러 문제 해결 (0) | 2024.05.03 |
|---|---|
| [Javascript/ECMAScript6/ES6] 클릭시(증가,감소) 카운터 만들기 (0) | 2020.06.05 |
| [Javascript/ECMAScript6/ES6] async/await (0) | 2020.06.04 |
| [Javascript/ECMAScript6/ES6] Promise (0) | 2020.06.03 |
| [Javascript/ECMAScript6/ES6] Scope 와 Hoisting 에 대한 이해 (0) | 2020.06.02 |