無제

Vanilla Javascript_하단 슬라이드 모달 본문

<script>

Vanilla Javascript_하단 슬라이드 모달

yo-u-loo 2026. 6. 12. 18:29

 

Vanilla-JS-modal

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>하단 슬라이드 모달 예제-https://www.youtube.com/watch?v=7IIb7_g9KkQ&list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg&index=15
    </title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="js.css">
    <script src="script.js"></script>
</head>

<body>

    <main>
        <div class="show-btn">
            <a onclick="showcon()" class="sb" href="#">Contents view</a>
        </div>
    </main>

    <div class="contents" id="_contents">
        <h1>Why do we use it?</h1>
        <p><br></p>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
            search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
        <a href="https://www.youtube.com/watch?v=7IIb7_g9KkQ&list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg&index=15"
            target="_blank">Read More</a>
        <div onclick="hidecon()" class="hide"><b>✕</b></div>
    </div>

    <script>
        let modal = document.querySelector("#_contents");

        function showcon() {
            modal.style.bottom = "0px";
        }

        function hidecon() {
            modal.style.bottom = "-300px";
        }
    </script>
</body>

</html>

 

@import url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap');

* {
    border: 0px solid rosybrown;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
    font-family: 'PT Serif', serif;
    font-size: 1rem;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #000 50%, #111 50%);
}

h1 {
    font-size: 2rem;
}

p {
    color: #888;
}

.show-btn {
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    padding: 40px 20px;
    text-align: center;
}

.sb {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    transition: 0.3s;
}

.sb:hover {
    background: #f00;
}

.contents {
    width: 80%;
    height: 300px;
    padding: 40px;
    overflow: hidden;
    background: #fff;
    transition: 0.5s;
    position: fixed;
    bottom: -300px;
    left: 10%;
}

.contents a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    background: #000;
    padding: 10px 30px;
    margin: 20px 0 0 0;
    transition: 0.3s;
    cursor: pointer;
}

.contents a:hover {
    color: #fff;
    background: #f00;
}

.hide {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: black;
    opacity: 0.5;
    transition: 0.3s;
    cursor: pointer;
}

.hide:hover {
    transform: rotate(360deg);
    opacity: 1;
}

 

이번 코드는 실무 웹 퍼블리싱에서 이벤트 배너, 모바일 하단 메뉴, 알림창 등을 구현할 때 자주 활용되는 ‘하단 슬라이드 업/다운 레이어 팝업(모달)’ 기능입니다.

페이지 중간에 있는 버튼을 클릭하면 화면 하단에서 내용이 부드럽게 올라오고, 닫기(✕) 버튼을 누르면 다시 아래로 자연스럽게 내려가 사라지는 인터랙션을 제공합니다.

이러한 방식은 모바일 UI(App-like Web)를 구현하거나 스와이프 형태의 메뉴를 구성할 때 매우 유용하게 활용할 수 있는 예제입니다.

또한 이 코드를 정상적으로 실행하고 효과를 확인하려면 외부 CSS 파일(style.css)에서 레이어 팝업의 위치 설정과 애니메이션 속성이 적절하게 구성되어 있어야 합니다.

 

 

[슬라이드 모달을 위한 필수 CSS 공식]

자바스크립트에서 bottom 값을 변경했을 때, 화면에서 자연스럽게 움직이는 슬라이드 모달 효과를 만들기 위해서는 CSS에 몇 가지 필수 속성이 반드시 함께 설계되어 있어야 합니다.

  1. position: fixed; (또는 absolute)
     레이어 팝업이 브라우저 화면 기준으로 고정되어 동작하도록 만드는 핵심 속성입니다.
    뷰포트를 기준으로 위치가 잡히기 때문에 스크롤과 상관없이 일정한 위치에서 움직일 수 있습니다.

  2. bottom: -300px; (시작 위치)
     페이지가 처음 로드될 때 모달이 화면에 보이지 않도록 자신의 높이만큼 아래로 숨겨두는 초기 상태 설정입니다.
    이 값을 통해 “숨김 → 등장” 구조가 만들어집니다.

  3. transition: 0.5s; (애니메이션 스위치) ★핵심
     가장 중요한 속성으로, 자바스크립트가 bottom 값을 -300px에서 0px로 변경할 때 0.5초 동안 부드럽게 올라오는 애니메이션 효과를 만들어 줍니다.
    이 속성이 없으면 변화가 즉시 적용되어 화면이 뚝뚝 끊기듯 보이게 됩니다.

 

'<script>' 카테고리의 다른 글

Vanilla Javascript_이미지 갤러리 전환  (0) 2026.06.12
Vanilla Javascript_타이핑 효과 예제  (0) 2026.06.12
Parameter (파라미터)와 Argument (아규먼트)  (0) 2026.06.02
var, let, const 변수 선언 방식  (0) 2026.06.02
Variable Scope (변수 스코프)와 Hoisting (호이스팅)  (0) 2026.06.02
'<script>' Related Articles more