코딩/7-부트스트랩 Bootstrap

Bootstrap => 7장 ~ 8장

tree0505 2025. 6. 17. 09:53
반응형

07장_리스트_드랍다운

  • 01_드랍다운.html
  • 외워야 한다. 
  • 스위치 같은 것이 toggle이다.
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->    
    </head>
    <body>
        <!--
                드랍다운도 기본적으로
                (1) nav
                (2) nav-item  
                (3) nav-link 의 규칙을 따른다.  
        -->

        <!--
            [1]   <li class="nav-item dropdown">
                    드랍다운 을 설정한다.
           
            [2]  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">전체메뉴</a>
                    드랍다운버튼을 설정한다.

            [3]   <ul class="dropdown-menu">
                    드랍다운 항목을 묶는 역활을 한다.

            [4]   <li><a class="dropdown-item" href="#">신상품</a></li>
                    드랍다운 항목들이다.
        -->
        <div class="container bg-light">      
            <ul class="nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="" data-bs-toggle="dropdown">전체메뉴</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">신상품</a></li>
                        <li><a class="dropdown-item" href="#">베스트</a></li>
                        <li><a class="dropdown-item" href="#">알뜰쇼핑</a></li>
                    </ul>
                </li>

                <li class="nav-item"><a href="#" class="nav-link">한그룹</a></li>
                <li class="nav-item"><a href="#" class="nav-link">한그룹</a></li>
                <li class="nav-item"><a href="#" class="nav-link">한그룹</a></li>
            </ul>
        </div>

    </body>
    </html>
  • 08장_폼_인풋
  • 01_인풋_기본.html
  • class에 form 컨트롤을 넣어주면 된다.
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>

        <!--
            기본 인풋
            (1) label 의 for 와 input의 id를 일치시키면 글자를 눌러도 인풋창에 불이들어온다.
        -->
        <div class="container">
            <label for="email">이메일:</label>
            <input type="email" id="email" style="width: 300px;">
        </div>
       
        <hr>

        <!--
            부트스트랩 인풋
            (1) class="form-control" 이 추가된다. 클릭했을때 주변에 파란라인이 들어온다. 자동줄바꿈이된다.
            (2) 가로폭은 직접 style="width: 300px; 사용해서 변경한다.
            (3) label 의 for 와 input의 id를 일치시키면 글자를 눌러도 인풋창에 불이들어온다.
        -->
        <div class="container">
            <label for="email2">이메일:</label>
            <input type="email" class="form-control" id="email2" style="width: 300px;">  
        </div>
     
    </body>
    </html>
  • 02_인풋_세로폭.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->    
    </head>
    <body>

        <!--
            스타일을 사용해서 크기를 조절한다.
            style="width: 300px; height: 50px; font-size: 25px;
        -->
        <div class="container">
            <label for="email">이메일:</label>
            <input type="email" class="form-control" id="email" style="width: 300px; height: 50px; font-size: 25px;">  
        </div>

        <hr>
     
        <div class="container">
            <label for="email2">이메일:</label>
            <input type="email" class="form-control " id="email2" style="width: 300px; height: 40px; font-size: 20px;">  
        </div>
     
        <hr>
       
        <div class="container">
            <label for="email3">이메일:</label>
            <input type="email" class="form-control" id="email3" style="width: 300px; height: 30px; font-size: 15px;" >  
        </div>

     
    </body>
    </html>
  • 03_인풋_안내문.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

           integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
           crossorigin="anonymous"></script>    
       <!-- 부트스트랩 5.2.3 -->    
    </head>
    <body>

        <!--
            input태그의 placeholder 속성을 이용해
            사용자가 입력할 내용에 대한 안내 메시지를 작성할 수 있다.
        -->
        <div class="container">
            <label for="email">이메일:</label>
            <input type="email" class="form-control" id="email" style="width: 300px;" placeholder="이메일을입력하세요">  
        </div>
     
    </body>
    </html>
  • 04_인풋_비활성화.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->        
    </head>
    <body>

        <!--
            input태그의 disabled 속성은
            태그 배경색이 회색처리 되며, 입력을 할 수 없다.
        -->
        <div class="container">
            <label for="email">이메일:</label>
            <input type="email" class="form-control" id="email" style="width: 300px;" disabled placeholder="aaa@aaa.com">  
        </div>
     
        <hr>

        <!--
            input태그의 readonly 속성은
            입려된 내용만 출력하고, 입력을 할 수 없다.
        -->
        <div class="container">
            <label for="email2">이메일:</label>
            <input type="email" class="form-control" id="email2" style="width: 300px;" readonly placeholder="aaa@aaa.com">  
        </div>
           
    </body>
    </html>
  • 05_인풋그룹.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->        
    </head>
    <body>

        <!--
           class="input-group" 을 통해 인풋과 버튼을 일체형으로 만들 수 있다.    
        -->
        <div class="container">
            <div class="input-group" style="width: 500px;">
                <input type="text" class="form-control" placeholder="아이디를 입력하세요">
                <button class="btn btn-secondary">중복확인</button>
            </div>
        </div>

        <hr>

        <!--
            class="input-group"을 지정하지 않으면,
            개별로 취급하여 줄바꿈이 된다.
        -->
        <div class="container">
            <div style="width: 500px;">
                <input type="text" class="form-control" placeholder="아이디를 입력하세요">
                <button class="btn btn-secondary">중복확인</button>
            </div>
        </div>
    </body>
    </html>
  • 06_인풋그룹_가로배치.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->        
    </head>
    <body>

         <!--
           class="input-group" 을 통해 라벨과 인풋을 가로형으로만들수있다.
        -->

        <div class="container">
            <div class="input-group" style="width: 400px;">
                <label for="email" class="mt-2 mx-2">이메일:</label>
                <input type="email" class="form-control my-1" id="email" style="width: 300px;">  
            </div>
        </div>

    </body>
    </html>
  • 07_인풋_회원가입.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <div class="container" >
            <div class="row py-4 mb-2">
                <div class="text-center" >
                    <h3><b>회원가입</b></h3>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="d-flex justify-content-xl-center justify-content-center">
                <form class="mb-5">                
                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">아이디</label>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="아이디를 입력하세요" style="height:50px; width:250px; font-size:15px; ">
                        <button class="btn btn-secondary">중복확인</button>
                    </div>
                   
                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">비밀번호</label>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="비밀번호를 입력하세요" style="height:50px; width:250px; font-size:15px; ">
                    </div>

                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">비밀번호 확인</label>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="비밀번호를 입력하세요" style="height:50px; width:250px; font-size:15px; ">
                    </div>

                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">전화번호</label>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="비밀번호를 입력하세요" style="height:50px; width:250px; font-size:15px; ">
                    </div>

                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">주소</label>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="" style="height:50px; width:250px; font-size:15px; ">
                        <button class="btn btn-secondary">우편번호</button>
                    </div>

                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">나머지주소</label>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="" style="height:50px; width:250px; font-size:15px; ">
                    </div>
                    <div class="input-group mt-2">
                        <input type="text" class="form-control" placeholder="" style="height:50px; width:250px; font-size:15px; ">
                    </div>

                 
                    <button class="btn btn-primary btn-lg mt-3 py-3"  style="height:60px; width:350px;">가입</button>
                </form>

            </div>
        </div>
    </body>
    </html>

 

반응형

'코딩 > 7-부트스트랩 Bootstrap' 카테고리의 다른 글

Bootstrap => 14장 ~ 16장 ~ 프로젝트  (1) 2025.06.17
Bootstrap => 9장 ~ 13장  (0) 2025.06.17
Bootstrap => 4장 ~ 6장  (0) 2025.06.17
Bootstrap => 4장 ~ 6장  (1) 2025.06.17
BOOTSTRAP => 1장 ~ 3장  (0) 2025.06.16

'코딩/7-부트스트랩 Bootstrap'의 다른글

  • 현재글Bootstrap => 7장 ~ 8장

관련글

티스토리툴바