※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. 모달 UI 만들기

모달: 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI 를 의미한다.

 

1) HTML을 이용한 모달의 내용과 버튼 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="open">모달 열기</button>
    <div class="modal-wrapper">
        <div class="modal">
            <div class="modal-title">안녕하세요</div>
            <p>모달 내용은 어쩌고 저쩌고..</p>
            <div class="close-wrapper">
                <button id="close">닫기</button>
            </div>
        </div>
    </div>
</body>
</html>

실행 결과

2) 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;
}

.close-wrapper {
    text-align: right;
}

2-1) HTML과 CSS 연결

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css"> <!-- CSS 연결 -->
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="open">모달 열기</button>
    <div class="modal-wrapper">
        <div class="modal">
            <div class="modal-title">안녕하세요</div>
            <p>모달 내용은 어쩌고 저쩌고..</p>
            <div class="close-wrapper">
                <button id="close">닫기</button>
            </div>
        </div>
    </div>
</body>
</html>

실행 결과

HTML만 사용했을 때는 화면 왼쪽에 텍스트와 버튼이 치우쳐져 있었고 박스 형태의 스타일도 없었는데

CSS로 스타일을 주니 화면 가운데에 이렇게 모달창이 생겼다.

그렇지만 닫기 버튼을 눌러도 없어지지 않기에 이벤트 처리를 해주게 하는 JavaScript를 통해 열고 닫는 이벤트 설정을 해주어야 한다.

 

2. 자바스크립트로 이벤트 설정

1) 자바스크립트로 이벤트 설정

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"; // 버튼 클릭 시 모달창 없어짐
};

2) HTML에 자바스크립트 연동 및 모달창 숨기기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="open">모달 열기</button>
    <div class="modal-wrapper" style="display: none;"> // 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="section24.js"></script> // 자바스크립트 연동
</body>
</html>

실행 결과

 

 

최종 결과

1) 평상시 

2) 열기 버튼을 눌렀을 때

'개발 공부한 내용 정리 > JavaScript' 카테고리의 다른 글

JavaScript- 카운터 만들기  (0) 2020.08.22
JavaScript- Promise all 와 Promise race  (0) 2020.08.21
JavaScript- async / await  (0) 2020.08.20
JavaScript- Promise  (0) 2020.08.19
JavaScript- 비동기 처리  (0) 2020.08.18

+ Recent posts

티스토리툴바