[JavaScript]부트스트랩(Bootstrap) 활용하기 - 모달창, 네브바, 로그인Saichoiblog

Contents

[JavaScript]부트스트랩(Bootstrap) 활용하기 – 모달창, 네브바, 로그인

[JavaScript]부트스트랩(Bootstrap) 활용하기 – 모달창, 네브바, 로그인

부트스트랩이란 프론트엔트 컴포넌트 라이브러리로 자주 사용되는 메뉴, 대문, 모달 등의 UI를 제공한다.

부트스트랩 시작하기

위 홈페이지 접속하여 Get Start -> Starter template 코드를 복사해서 가져온다. Starter Templete에는 부트스트랩을 사용하기 위한 css, js cdn이 포함되어 있다. 참고로 부트스트랩 v4.6이다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="jumbotron main-background">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

모달창과 네브바 만들기

UI 숨기는 방법

display : none;
visibility : hidden;
opacity : 0;

UI 나타나기 숨기기 함수

show()
hide()
fadeIn()
fadeOut()
slideDown()
slideUp()
slideToggle()
fadeToggle()
toggle()

jQuery Slim 버전에서는 사용이 불가능하다.

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    
    <!-- jQuery cdn-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>Shrits Studio</title>
  </head>
  <body>

    <div class="black-bg">
        <div class="white-bg">
            <p>로그인 하세요.</p>
            <button class="btn btn-danger" id="close">닫기</button>
        </div>
    </div>

    <div class="nav-menu">
        <h4>Shirts Studio</h4>
        <p id="nav-btn">Products</p>
    </div>

    <ul class="list-group nav-sub">
        <li class="list-group-item">Outter</li>
        <li class="list-group-item">Innerwear</li>
        <li class="list-group-item">Shirts</li>
    </ul>

    <div class="jumbotron main-background">
        <h1 class="display-4">Shirts Studio</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a id="login" class="btn btn-primary btn-lg" role="button">Login</a>
    </div>


    <script>


        $("#close").click(function(){
            $(".black-bg").hide();
        });

        $("#login").on("click",function(){
            $(".black-bg").show();
        });

        $("#nav-btn").click(function(){
            $(".nav-sub").toggle();
        });

    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

로그인창 만들기

[JavaScript]조건문(if, else)if 조건문은 특정 조건이 맞을 때만 코드를 실행하기 위해 사용한다....

form과 관련된 이벤트

change : input 태그의 내용이 변경되었을 경우
input : input 태그에 내용이 입력하고 있는 경우

html

<div class="black-bg">
        <div class="white-bg">
            <p>로그인 하세요.</p>
            <form action="login.php">
                <div class="form-group">
                  <input type="email" class="form-control" placeholder="Email" id="email">
                  <p id="email-alert">이메일이 빈칸입니다.</p>
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" placeholder="Password" id="pwd">
                  <p id="pwd-alert">비밀번호가 빈칸입니다.</p>
                </div>
                <button type="submit" class="btn btn-primary">전송</button>
                <button class="btn btn-danger" id="close">닫기</button>
              </form>
        </div>
</div>

script

        $("form").on("submit",function(e){
            if($("#email").val() == ""){
                e.preventDefault(); // 폼의 전송을 막는다.
                $("#email-alert").show();
            }
            if($("#pwd").val() == ""){
                e.preventDefault(); // 폼의 전송을 막는다.
                $("#pwd-alert").show();
            }
        });

main.css

.main-background{
    background-image: url(img/main.jpg);
    background-size: cover;
    border-radius: 0;
}

.black-bg{
    background:rgba(0,0,0,0.5);
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: none;
}

.white-bg{
    background:#fff;
    width: 80%;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
}

.nav-menu{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    align-items: center;
}

.nav-sub{
    display: none;
}

코딩애플의 온라인 강좌

Bootstrap Javascript

[JavaScript]부트스트랩(Bootstrap) 활용하기 – 모달창, 네브바, 로그인

[JavaScript]부트스트랩(Bootstrap) 활용하기 – 모달창, 네브바, 로그인

부트스트랩 시작하기

모달창과 네브바 만들기

UI 숨기는 방법

UI 나타나기 숨기기 함수

index.html

로그인창 만들기

form과 관련된 이벤트

html

script

main.css

「右肩上がり」의 의미와 유래

보호된 글: 제2회 정보 공유 회의

[Go]GORM belong to와 has one의 차이점은 무엇일까?

[Go]Gorm Tag이해하기

제 2강 빅 오 표기법을 이용한 성능 향상과 활용 방법

자바스크립트 정리 모음

[JavaScript]HTML 조작하기

[JavaScript]애니메이션(Animate)

[JavaScript]제이쿼리(jQuery)

[JavaScript]이미지 슬라이드(Carousel)

[JavaScript]변수 활용하기

[JavaScript]라이브러리 활용하기

[JavaScript]Array & Object 자료형

[JavaScript]form 응용하기

[JavaScript]스크롤 이벤트(Scroll)