bootstrap-3

kh0520·2022년 5월 31일

1)학습내용

column 나누기 연습

   <style>
        header{background-image: url("https://images.unsplash.com/photo-1551662106-aa02be2c456e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fCVFQiU4QyU4MCVFQyVBMCU4NHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
               background-size: cover;
               background-repeat: no-repeat;
               background-position: center top;             
    }
    </style>



   <header>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top ">
            <div class="container-fluid">
               
                 <a class="navbar-brand" href="">
                    <img src="https://getbootstrap.kr/docs/5.1/assets/brand/bootstrap-logo.svg" width="30" height="24"> 
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-targer="">
                    <span class="navbar-toggler-icon"></span>    
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">explore</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">log in</a></li>
                    </ul>

                </div>   
            </div>

        </nav>

배경이미지 불러오기

<!-- 배경 이미지 불러오기-->
        <div class="container text-center py-5 ">
            <h1 class="text-white"><strong>어떤 사진을 찾으시나요?</strong>
            <br>여기 모든것이 다있습니다</h1>
            <p class="h4 text-white py-5"> 다양한 사진들이 무료로 있습니다 </p>
            <div class="btn btn-primary btn-lg py-3">upload project</div>
             <div class="text-secondary mt-5 d-none d-sm-block d-inline-flex flex-row"> 
                 <img class="align-top pt-0" src="./images/drop-icon.png" >
                 <span class="text-white d-inline-block ms-3 ">주의사항 :~~~~~~~~~~~~~</span>
             </div>   
        </div>

용어정리

d-none : 웹에서 안보이게
d-sm-block: sm사이즈 에서는 보이게함

1.첫번째 섹션

col-md-7 로 나누기

<section class="bg-light">
        <div class="container">
            <div class="row py-5">
                <div class="col-md-5">
                    <h2> <strong>디자인을 가장 빨리 보여주는 방법</strong></h2>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates labore non iure molestias, eius minus. Aliquam possimus obcaecati magni officia in sequi cupiditate, quis quae? Reiciendis recusandae culpa repellat cumque!</p>
                    <p><strong> 당신의 디자인을 보여주세요</strong><br>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates labore non iure molestias,
                    </p>
                </div>
                <div class="col-md-7">
                    <img class="img-fluid" src="./images/symu-panel-1.png">
                </div>
            </div>
        </div>
        
    </section>

py-5 : padding y축으로 5만큼
col-md-5 : column-middle-5

결과

2.두번째 섹션

col-md-7 , col-md-5 로 나눠보기

<section>
        <div class="container">
            <div class="row py-5">
                <div class="col-md-7">
                    <img class="img-fluid" src="./images/symu-panel-2.png">
                </div>
                <div class="col-md-5">
                    <h2><strong>여기에 다양한사진들이 있습니다</strong></h2>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates labore non iure molestias, eius minus. Aliquam possimus obcaecati magni officia in sequi cupiditate, quis quae? Reiciendis recusandae culpa repellat cumque!</p>
                    <p><strong>present your design</strong><br>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates labore non iure molestias,
                    </p>
                </div>
               </div>
            </div>
        </div>
    </section>

결과

3.세번째섹션

col-md-6 으로 나누어보기

<section>
       <div class="container py-5 d-none d-md-block">
           <div class="row">
               <div class="col-md-6">
                   <img src="./images/envelope-icon.jpg">
                   <h2>Email<br><strong>Notification</strong></h2>
                   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus reiciendis amet voluptates! Qui dolore assumenda nihil, reiciendis, quod tempora nam minus molestiae hic inventore non saepe, ut expedita accusamus consequuntur?</p>
               </div>

               <div class="col-md-6">
                   <img src="./images/lock-icon.jpg">
                   <h2>Email<br><strong>Notification</strong></h2>
                   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus reiciendis amet voluptates! Qui dolore assumenda nihil, reiciendis, quod tempora nam minus molestiae hic inventore non saepe, ut expedita accusamus consequuntur?</p>
               </div>
               

               </div>
           </div>
       </div>
   </section>