코딩/7-부트스트랩 Bootstrap

Bootstrap => 14장 ~ 16장 ~ 프로젝트

tree0505 2025. 6. 17. 10:16
반응형

14장_테이블

  • 01_테이블_기본.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>
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>        
    </head>
    <body>
        <!--
            (1) <thead>, <tbody>는 아무기능없으나 그냥 명시적으로 사용한다.
            (2) <th> 는 굵은 글씨로 표시된다.
        -->
        <div class="container" style="width: 1000px;">
            <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th>2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th>3</th>
                    <td>Larry the Bird</td>
                    <td>aa</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
        </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>
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>        
    </head>
    <body>
        <!--
            <thead> 와 <th> 를 빼고 전부같은 크기의 테이블을 만들수있다.
        -->
        <div class="container" style="width: 1000px;">
            <table class="table table-bordered">
                <tbody>
                  <tr>
                    <td>#</th>
                    <td>First</th>
                    <td>Last</th>
                    <td>Handle</th>
                  </tr>
                  <tr>
                    <td >1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <td >2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <td >3</th>
                    <td >Larry the Bird</td>
                    <td>aa</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
        </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>
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>        
    </head>
    <body>
        <!--
            colspan 속성을 이용해 가로를 합칠 수 있다.
        -->
        <div class="container" style="width: 1000px;">
            <table class="table table-bordered">  
                <tbody>
                  <tr>
                    <td>#</th>
                    <td>First</th>
                    <td>Last</th>
                    <td>Handle</th>
                  </tr>
                  <tr>
                    <td >1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <td >2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <td >3</th>
                    <td colspan="2">Larry the Bird</td>
                   
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
        </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>
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>        
    </head>
    <body>
        <!--
            rowspan을 이용해 세로를 합칠 수 있다.
        -->
        <div class="container" style="width: 1000px;">
            <table class="table table-bordered">      
                <tbody>
                  <tr>
                    <td rowspan="4">#</th>
                    <td>First</th>
                    <td>Last</th>
                    <td>Handle</th>
                  </tr>
                  <tr>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <td >Larry the Bird</td>
                    <td>aa</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
        </div>

    </body>
    </html>
  • 05_페이지네이션.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <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>

        <!--
            페이지네이션은 리스트의 일종으로 보통 테이블과 함께 사용된다.

            ul : pagination
            li : page-item
            a  : page-link
        -->

        <div class="container">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#">이전</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">이후</a></li>
            </ul>
        </div>
    </body>
    </html>
  • 06_페이지네이션_중앙정렬.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <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="d-flex justify-content-center">
        -->
        <div class="container">
            <div class="d-flex justify-content-center">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#">이전</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">이후</a></li>
                </ul>
            </div>
        </div>

    </body>
    </html>
  • 07_테이블과페이지네이션.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <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-center">
              <table class="table table-bordered" style="width: 1000px;">
                  <thead>
                    <tr>
                      <th >#</th>
                      <th >First</th>
                      <th >Last</th>
                      <th >Handle</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th >1</th>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <th >2</th>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <th >3</th>
                      <td >Larry the Bird</td>
                      <td>aa</td>
                      <td>@twitter</td>
                    </tr>
                  </tbody>
              </table>
          </div>
        </div>
        <div class="container">
          <div class="d-flex justify-content-center">
              <ul class="pagination">
                  <li class="page-item"><a class="page-link" href="#">이전</a></li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item"><a class="page-link" href="#">이후</a></li>
              </ul>
          </div>
        </div>
    </body>
    </html>

15장_카드

  • 01_카드_기본.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="card" style="width: 300px;">
                    (1) 카드를 명시한후 가로사이즈 세로사이즈등을 설정한다.
                <div class="card-body">
                    (2) 카드 바디에 적고싶은 내용을 적는다.
        -->

        <div class="container">
            <div class="card" style="width: 300px;">
                <div class="card-body">
                  <h5>Card title</h5>
                  <h6 style="color:rgba(0,0,0,0.5)">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" >Card link</a> &nbsp; &nbsp;
                  <a href="#" >Another link</a>
                </div>
            </div>
        </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>
        <!--
            [카드]
                <img src="1.jpg" class="card-img-top border-bottom">
                (1) 카드에 이미지를 넣을수있다.
        -->

        <div class="container">
            <div class="card" style="width: 270px">
              <img src="img/1.jpg" class="card-img-top border-bottom">
              <div class="card-body">
                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
              </div>
            </div>  
        </div>
       

    </body>
    </html>
  • 03_카드_상품정보.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <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="py-4">
        &nbsp;
      </div>

      <div class="container ">
        <div class="row">
            <div class="col-12 col-xl-6">
                <div class="d-flex justify-content-center justify-content-xl-end">
                    <div class="col-8 border">
                        <img src="img/1.jpg" class="img-fluid">
                    </div>

                </div>
            </div>
            <div class="col-12 col-xl-6">
                <div class="d-flex justify-content-center justify-content-xl-start">
                    <div class="col-8 border">
                        <div class="col-12 card border">
                            <div class="card-body">
                                <div class="card-text">
                                    <span style="font-size: 23px; font-weight: 600;">혼자 공부하는 파이썬</span> <br>      
                                    <span style="font-size: 13px; color: rgb(0, 0, 0); font-weight: 300;">윤인성 저 | 한빛미디어 | 2019년 06월 10일 </span>      <br>      
                                    <span style="font-size: 23px; color: rgb(13, 94, 216); font-weight: 600;">98,000원 </span>      <br>  
                                    <span style="font-size: 13px; color: rgb(13, 94, 216); font-weight: 300;">로그인 후 적립혜택이 적용됩니다.</span>      <br>      
                                    <hr>
                                    <span style="font-size: 15px; color: rgb(0, 0, 0); font-weight: 600;">무료배송 </span>      <br>        
                                    <span style="font-size: 15px; color: rgb(0, 0, 0); font-weight: 600;">지금주문하면 다음날 오후 도착 예정 </span>      <br>  
                                   
                                    <div class="bg-light mt-2 p-2" >
                                        <span style="font-size: 11px; color: rgb(0, 0, 0); font-weight: 400;">수량 </span>      <br>        
                                        <hr>
                                        <ul class="pagination pagination-sm">
                                          <li class="page-item"><a class="page-link" href="#">-</a></li>
                                          <li class="page-item text-center" style="width : 50px"><a class="page-link" href="#">2</a></li>
                                          <li class="page-item"><a class="page-link" href="#">+</a></li>
                                        </ul>                                        
                                    </div>        
                                </div>
                               
                                <div class="card-text  my-3">
                                    <span style="font-size: 15px; color: rgb(37, 37, 37); font-weight: 500;">총상품금액(1개) </span>  
                                   
                                    <p class="text-end" style="font-size: 23px; color: rgb(13, 94, 216); font-weight: 600;">98,000원 </p>  
                                </div>
                                <hr>
                                <div class="card-text" >
                                    <button class="btn btn-danger" type="button">장바구니</button>
                                    <button class="btn btn-outline-dark" type="button">구매하기</button>
                                </div>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
    </body>
    </html>
  • 16장_모달
  • 01_모달_기본.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    </head>
    <body>
        <!--
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test">
                (1) 모달을 작동시킬 버튼

           

             <div class="modal fade" id="test"  aria-hidden="true">
                (2) 숨겨져있다가 버튼을 누르면 화면에 표시 id값이 버튼의 target과 같아야한다.
           
           
            <div class="modal-dialog">
                (3) 모달이 상단에서 출력된다.
           

             <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                (4) 닫는 버튼

            ---------------------------------
            나머지는 자유롭게 작성한다.
          -->
            <div class="container">
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test">
                Launch demo modal1
              </button>
       
              <!-- Modal -->
              <div class="modal fade" id="test"  aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" >Modal title</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                      내용1...
                    </div>
                    <div class="modal-footer">
                   
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>



    </body>
    </html>


  • 02_모달_가운데.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    </head>
    <body>
        <!--
           <div class="modal-dialog modal-dialog-centered">
              (1) 모달이 가운데서 생성된다.

          -->
          <div class="container">          
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test">
              Launch demo modal2
            </button>

            <!-- Modal -->
            <div class="modal fade" id="test"  aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" >Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
                  <div class="modal-body">
                    내용....
                  </div>
                  <div class="modal-footer">
                 
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
    </body>
    </html>


  • 03_모달_사용자약관동의.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    </head>
    <body>
        <!--
             <div class="modal-dialog modal-dialog-scrollable"> 옵션은 모달창 내용이 길어졌을대 스크롤바가 생긴다.
          -->
          <div class="container">          
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test">
              Launch demo modal3
            </button>

            <!-- Modal -->
            <div class="modal fade" id="test"  aria-hidden="true">
              <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" >Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                      모든 국민은 그 보호하는 자녀에게 적어도 초등교육과 법률이 정하는 교육을 받게 할 의무를 진다.
                      모든 국민은 종교의 자유를 가진다. 국회의원은 법률이 정하는 직을 겸할 수 없다.
                      국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.
                      재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을
                      해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.
                  </div>
                  <div class="modal-footer">
                 
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

    </body>
    </html>


02_프로젝트

  • 01_itemList.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>

        <div class="container-fluid">
            <img src="img/banner01.jpg" class="img-fluid" alt="배너이미지">
        </div>

        <div class="container">
            <div class="row py-4 mb-4">
                <div class="text-center">
                    <h3><b>전체상품</b></h3>
                </div>
            </div>
        </div>

        <!-- 1행 -->
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
        </div>

        <!-- 2행 -->
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-12 col-xl-3 mb-5">
                    <div class="d-flex justify-content-center">
                        <div class="card" style="width: 270px">
                            <img src="img/1.jpg" class="card-img-top border-bottom">
                            <div class="card-body">
                                <div class="card-text mb-1" style="font-size:16px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">혼자 공부하는 머신러닝+딥러닝</div>
                                <div class="card-text mb-1" style="font-size:14px; color: rgba(162, 162, 162, 0.973); font-weight: 500;">박해선 저 | 한빛미디어</div>
                                <div class="card-text " style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">26,000원</div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
        </div>    

        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>

    </body>
    </html>
  • 02_memberJoin.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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>

                   
                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">성별</label>
                    <br>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                        <label class="form-check-label" for="inlineRadio1">남성</label>
                        </div>
                        <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                        <label class="form-check-label" for="inlineRadio2">여성</label>
                        </div>
                        <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                        <label class="form-check-label" for="inlineRadio3">선택안함</label>
                        </div>
                    <br>

                    <label class="mt-4" style="font-size:15px; color: rgba(117, 117, 117, 0.973); font-weight: 500;">유입경로</label>
                    <select class="form-select" aria-label="Default select example">
                        <option value="1">인터넷 검색</option>
                        <option value="2">지인권유</option>
                        <option value="3">SNS</option>
                        <option value="4">광고</option>
                        <option value="5" selected>기타</option>
                        </select>
           

                    <div class="form-check py-3">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            전체동의  
                        </label>
                    </div>

                    <ul class="list-group" >
                        <li class="list-group-item py-3" >
                            <input type="checkbox" class="form-check-input me-1" >
                            <label class="" style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">이용약관 동의</label>
                        </li>
                        <li class="list-group-item py-3">
                            <input type="checkbox" class="form-check-input me-1"> 개인정보취급 동의
                        </li>
                        <li class="list-group-item py-3">
                            <input type="checkbox" class="form-check-input me-1"> 만14세 입니다.
                        </li>
                        <li class="list-group-item py-3">
                            <input type="checkbox" class="form-check-input me-1"> 마케팅 메일 수신 동의(선택)
                        </li>
                    </ul>
                   
                    <button class="btn btn-primary btn-lg mt-3 py-3"  style="height:60px; width:350px;">가입</button>
                </form>
            </div>
        </div>

       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 03_memberLogin.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="">                
                    <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>
                   
                    <button class="btn btn-primary btn-lg mt-3 py-3"  style="height:60px; width:350px;">로그인</button>
                </form>
            </div>
        </div>

        <br><br><br><br><br><br><br><br><br>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 04_boardList.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="row my-5">
                <div class="col-12 col-xl-2">
                    <ul class="list-group">
                        <li class="list-group-item"><a class="nav-link" href="">공지사항</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">자주하는 질문</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">1:1 문의</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">대량주문 문의</a></li>
                    </ul>
                </div>
               
                <div class="col-12 col-xl-10">
                        <div class="table">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <td colspan="4" class="text-end">
                                            <button type="button" class="btn btn-primary">글쓰기</button>
                                        </td>
                                    </tr>
                                </thead>
                                <thead>
                                    <tr>
                                      <th  width="80px">번호</th>
                                      <th >제목</th>
                                      <th width="80px">작성자</th>
                                      <th >작성일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>[안내]컬리 소비자 분쟁해결 기준 안내</td>
                                        <td>컬리</td>
                                        <td>2022.07.27</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="container">
                            <div class="d-flex justify-content-center">
                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#">이전</a></li>
                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#">이후</a></li>
                                </ul>
                            </div>
                          </div>
                </div>
            </div>

        </div>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 05_boardInfo.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="row my-5 gy-3">
                <div class="col-12 col-xl-2">
                    <ul class="list-group">
                        <li class="list-group-item"><a class="nav-link" href="">공지사항</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">자주하는 질문</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">1:1 문의</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">대량주문 문의</a></li>
                    </ul>
                </div>
                <div class="col-12 col-xl-10">
                        <div class="table">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <td colspan="2" class="text-center">
                                            <span style="font-size: 20px;font-weight: bold;">게시글 정보</span>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th  width="150px">번호</th>
                                        <td>
                                            <input type="text" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="150px">작성자</th>
                                        <td>
                                            <input type="text" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="80px">제목</th>
                                        <td>
                                            <input type="text" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="80px">글내용</th>
                                        <td>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="80px">사진첨부</th>
                                        <td>
                                            <div class="d-flex justify-content-start">    
                                                <img src="img/1.jpg" width="150px">
                                            </div>
                                            <hr>
                                            <div class="d-flex justify-content-start">    
                                                <img src="img/1.jpg" width="150px">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" class="text-center">
                                            <button type="button" class="btn btn-primary" style="width: 200px;height: 50px;">답글 쓰기</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                </div>
            </div>

        </div>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 06_boardWrite.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="row my-5 gy-3">
                <div class="col-12 col-xl-2">
                    <ul class="list-group">
                        <li class="list-group-item"><a class="nav-link" href="">공지사항</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">자주하는 질문</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">1:1 문의</a></li>
                        <li class="list-group-item"><a class="nav-link" href="">대량주문 문의</a></li>
                    </ul>
                </div>
                <div class="col-12 col-xl-10">
                        <div class="table">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <td colspan="2" class="text-center">
                                            <span style="font-size: 20px;font-weight: bold;">새글 작성</span>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th  width="150px">번호</th>
                                        <td>
                                            <input type="text" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="150px">작성자</th>
                                        <td>
                                            <input type="text" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="80px">제목</th>
                                        <td>
                                            <input type="text" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="80px">글내용</th>
                                        <td>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th  width="80px">사진첨부</th>
                                        <td>
                                            <input class="form-control" type="file" id="formFile">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" class="text-center">
                                            <button type="button" class="btn btn-primary" style="width: 200px;height: 50px;">답글 쓰기</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                </div>
            </div>

        </div>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 07_itemInfo.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="row">
                <div class="col-12 col-xl-6 mb-5">
                    <div class="d-flex justify-content-center justify-content-xl-end">
                        <div class="col-8 border">
                            <img src="img/1.jpg" class="img-fluid" >
                        </div>

                    </div>
                </div>

                <div class="col-12 col-xl-6 mb-5">
                    <div class="d-flex justify-content-center justify-content-xl-start">
                        <div class="col-8 border">
                            <div class="col-12 card border" >
                                <div class="card-body">
                                    <div class="card-text">
                                        <span style="font-size: 23px; font-weight: 600;">혼자 공부하는 파이썬</span> <br>      
                                        <span style="font-size: 13px; color: rgb(0, 0, 0); font-weight: 300;">윤인성 저 | 한빛미디어 | 2019년 06월 10일 </span>      <br>      
                                        <span style="font-size: 23px; color: rgb(13, 94, 216); font-weight: 600;">98,000원 </span>      <br>  
                                        <span style="font-size: 13px; color: rgb(13, 94, 216); font-weight: 300;">로그인 후 적립혜택이 적용됩니다.</span>      <br>      
                                        <hr>
                                        <span style="font-size: 15px; color: rgb(0, 0, 0); font-weight: 600;">무료배송 </span>      <br>        
                                        <span style="font-size: 15px; color: rgb(0, 0, 0); font-weight: 600;">지금주문하면 다음날 오후 도착 예정 </span>      <br>  
                                       
                                        <div class="bg-light mt-2 p-2" >
                                            <span style="font-size: 11px; color: rgb(0, 0, 0); font-weight: 400;">수량 </span>      <br>        
                                            <hr>
                                            <nav aria-label="Pagination example">
                                                <ul class="pagination pagination-sm">
                                                  <li class="page-item"><a class="page-link" href="#">-</a></li>
                                                  <li class="page-item text-center" style="width : 50px"><a class="page-link" href="#">2</a></li>
                                                  <li class="page-item"><a class="page-link" href="#">+</a></li>
                                                </ul>                                        
                                        </div>        
                                    </div>
                                   
                                    <div class="card-text  my-3">
                                        <span style="font-size: 15px; color: rgb(37, 37, 37); font-weight: 500;">총상품금액(1개) </span>  
                                       
                                        <p class="text-end" style="font-size: 23px; color: rgb(13, 94, 216); font-weight: 600;">98,000원 </p>  
                                    </div>
                                    <hr>
                                    <div class="card-text" >
                                        <button class="btn btn-danger" type="button">장바구니</button>
                                        <button class="btn btn-outline-dark" type="button">구매하기</button>
                                    </div>
                                </div>
                              </div>
                        </div>
                    </div>
                </div>

               
            </div>
        </div>

        <div class="container" >
            <div class="row py-4 mb-2">
                <div class="text-center" >
                    <h3 ><b>상세정보</b></h3>
                </div>
            </div>
        </div>

        <div class="container mt-3">
            <div class="d-flex justify-content-center">
                <div>
                    <img src="img/contentImg01.jpg" class="img-fluid">
                </div>
            </div>
        </div>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 08_cartList.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="row">
                <div class="col-12 col-xl-6 ">
                    <div class="d-flex justify-content-center justify-content-xl-end">
                        <div class="col-12 border">
                            <div class="card-body">
                                <div class="card-text">
                                    <div class="table">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <td colspan="2">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                            <label class="form-check-label" for="flexCheckDefault">전체선택</label>
                                                        </div>
                                                    </td>
                                                    <td class="text-end">
                                                        <button type="button" class="btn btn-primary">선택삭제</button>
                                                    </td>
                                                </tr>
                                            </thead>
                                            <!-- 1번 -->
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                            <label class="form-check-label" for="flexCheckDefault"></label>
                                                        </div>
                                                    </td>
                                                    <td><img src="img/1.jpg" width="100" style="border: 1px solid lightgray;"></td>
                                                    <td><span style="font-size: 16px; font-weight: 600;">HTML+CSS+자바스크립트</span> <br></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>상품수량</td>
                                                    <td>
                                                        <ul class="pagination pagination-sm">
                                                            <li class="page-item"><a class="page-link" href="#">-</a></li>
                                                            <li class="page-item text-center" style="width : 50px"><a class="page-link" href="#">2</a></li>
                                                            <li class="page-item"><a class="page-link" href="#">+</a></li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>주문금액</td>
                                                    <td>38,000원</td>
                                                </tr>
                                            </tbody>

                                            <!-- 2번 -->
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                            <label class="form-check-label" for="flexCheckDefault"></label>
                                                        </div>
                                                    </td>
                                                    <td><img src="img/1.jpg" width="100" style="border: 1px solid lightgray;"></td>
                                                    <td><span style="font-size: 16px; font-weight: 600;">자바스크립트 완벽가이드</span> <br></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>상품수량</td>
                                                    <td>
                                                        <ul class="pagination pagination-sm">
                                                            <li class="page-item"><a class="page-link" href="#">-</a></li>
                                                            <li class="page-item text-center" style="width : 50px"><a class="page-link" href="#">1</a></li>
                                                            <li class="page-item"><a class="page-link" href="#">+</a></li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>주문금액</td>
                                                    <td>38,000원</td>
                                                </tr>
                                            </tbody>

                                            <!-- 3번 -->
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                            <label class="form-check-label" for="flexCheckDefault"></label>
                                                        </div>
                                                    </td>
                                                    <td><img src="img/1.jpg" width="100" style="border: 1px solid lightgray;"></td>
                                                    <td><span style="font-size: 16px; font-weight: 600;">리눅스 C프로그래밍리눅스 C프로그래밍</span> <br></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>상품수량</td>
                                                    <td>
                                                        <ul class="pagination pagination-sm">
                                                            <li class="page-item"><a class="page-link" href="#">-</a></li>
                                                            <li class="page-item text-center" style="width : 50px"><a class="page-link" href="#">1</a></li>
                                                            <li class="page-item"><a class="page-link" href="#">+</a></li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>주문금액</td>
                                                    <td>38,000원</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                                                           
                                </div>
                            </div>

                           
                        </div>

                    </div>
                </div>

                <div class="col-12 col-xl-6 mt-5">
                    <div class="d-flex justify-content-center justify-content-xl-start">
                        <div class="col-10 border">
                            <div class="col-12 card border" >
                                <div class="card-body">
                                    <div class="card-text">
                                       
                                        <div class="table">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <td colspan="2">
                                                            <span style="font-size: 23px; font-weight: 600;">결제금액</span>
                                                        </td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>상품금액</td>
                                                        <td class="text-end">114,000원</td>
                                                    </tr>
                                                    <tr>
                                                        <td>배송비</td>
                                                        <td class="text-end">0원</td>
                                                    </tr>
                                                    <tr>
                                                        <td>결제금액</td>
                                                        <td>
                                                            <p class="text-end" style="font-size: 23px; color: rgb(13, 94, 216); font-weight: 600;">114,000원 </p>  
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2"  class="text-end">
                                                            <button class="btn btn-danger" type="button">장바구니</button>
                                                            <button class="btn btn-outline-dark" type="button">구매하기</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                </div>
                              </div>
                        </div>
                    </div>
                </div>

               
            </div>
        </div>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>
  • 09_orderList.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="d-flex justify-content-xl-end justify-content-center">
                <ul class="nav">
                    <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>
                    <li class="nav-item"><a href="#" class="nav-link">ADMIN</a></li>
                </ul>
            </div>
        </div>

        <div class="container">  
            <div class="d-flex justify-content-xl-center justify-content-center">
                <a href="#">
                    <img alt="헤더로고" src="img/logo1000.png" class="img-fluid" width="150px">
                </a>
            </div>
        </div>  

        <nav class="navbar navbar-expand-xl bg-light">
            <div class="container">
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#header-nav"        
                >
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="header-nav">
                    <ul class="navbar-nav me-auto">
                        <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 class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item "><a class="nav-link" href="">알뜰쇼핑</a></li>
                       
                    </ul>

                    <ul class="nav">
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                          <button type="submit" class="btn btn-secondary">검색</button>
                      </div>
                    </ul>
                </div>    
            </div>
        </nav>
       
        <hr>
        <!-- header end -->

        <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="row">
                <div class="d-flex justify-content-xl-center justify-content-center">
                    <div class="col-8 col-xl-6">
                        <div class="table">
                            <table class="table">
                                <tbody>
                                    <tr  class="border-top">
                                        <td><img src="img/1.jpg" width="80" style="border: 1px solid lightgray;"></td>
                                        <td>
                                            <span style="font-size: 16px; font-weight: 600;">리눅스 C프로그래밍리눅스 C프로그래밍</span> <br>
                                            <span style="font-size: 16px; font-weight: 600;">12,900원</span>  
                                            <span style="font-size: 16px; color: gray;"> | 1개</span>
                                            <br>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="img/1.jpg" width="80" style="border: 1px solid lightgray;"></td>
                                        <td>
                                            <span style="font-size: 16px; font-weight: 600;">리눅스 C프로그래밍리눅스 C프로그래밍</span> <br>
                                            <span style="font-size: 16px; font-weight: 600;">12,900원</span>  
                                            <span style="font-size: 16px; color: gray;"> | 1개</span>
                                            <br>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="img/1.jpg" width="80" style="border: 1px solid lightgray;"></td>
                                        <td>
                                            <span style="font-size: 16px; font-weight: 600;">리눅스 C프로그래밍리눅스 C프로그래밍</span> <br>
                                            <span style="font-size: 16px; font-weight: 600;">12,900원</span>  
                                            <span style="font-size: 16px; color: gray;"> | 1개</span>
                                            <br>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>                    
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <br><br><br><br><br>
       
        <!-- footer -->
        <div class="container-fluid bg-light mt-3">
            <br>
            <div class="row text-center py4">
              <div class="col" style=" font-size: 10px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">
                잇북에서 판매되는 상품 중에는 잇북에 입점한 개별 판매자가 판매하는 잇북플레이스(오픈마켓) 상품이 포함되어 있습니다.
                <br>
                잇북플레이스(오픈마켓) 상품의 경우 잇북는 통신판매중개자로서 통신판매의 당사자가 아닙니다. 잇북은 해당 상품의 주문, 품질, 교환/환불 등 의무와 책임을 부담하지 않습니다.
                <br>
                <br>
                <em><span style=" font-size: 12px; color: rgba(167, 167, 167, 0.973); font-weight: 400;">© ITBOOK CORP. ALL RIGHTS RESERVED</span></em>
              </div>
            </div>
            <br>
        </div>
       
    </body>
    </html>

 

반응형

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

Bootstrap => 9장 ~ 13장  (0) 2025.06.17
Bootstrap => 7장 ~ 8장  (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 => 14장 ~ 16장 ~ 프로젝트

관련글

티스토리툴바