코누나님 - HTML, CSS / Chapter 7 - 반응형 웹사이트 만들기 Bootstrap

 

 

https://getbootstrap.com/docs/5.1/layout/grid/

Grid system

 

 

bootstrap은 웹사이트 전체를 12등분함

웹사이트의 구역을 12의 약수들만큼 나눔

 

 

 

모바일에서는 이 카드들이 나란히 정렬이 아닌 block형태로 정렬시키는 게 좋을텐데, 이 때의 해결방안은?

 

 

col-sm-12 클래스를 각 박스마다 추가해준다.

이 때 12, 3은 비율을 의미

 

    <div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <img src="https://blog.kakaocdn.net/dna/c9uBIm/btrATdY3TR5/AAAAAAAAAAAAAAAAAAAAAEio1HWgnAWSA8atCO4wZ4Y0c07BiEb8J5GlKoZqPglq/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=895P0fah8dYgVHN%2F4CBKRzLS3DM%3D" class="card-img-top" alt="지니">
                    <div class="card-body">
                      <h5 class="card-title">엔믹스 지니</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <img src="https://blog.kakaocdn.net/dna/c9uBIm/btrATdY3TR5/AAAAAAAAAAAAAAAAAAAAAEio1HWgnAWSA8atCO4wZ4Y0c07BiEb8J5GlKoZqPglq/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=895P0fah8dYgVHN%2F4CBKRzLS3DM%3D" class="card-img-top" alt="지니">
                    <div class="card-body">
                      <h5 class="card-title">엔믹스 지니</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <img src="https://blog.kakaocdn.net/dna/c9uBIm/btrATdY3TR5/AAAAAAAAAAAAAAAAAAAAAEio1HWgnAWSA8atCO4wZ4Y0c07BiEb8J5GlKoZqPglq/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=895P0fah8dYgVHN%2F4CBKRzLS3DM%3D" class="card-img-top" alt="지니">
                    <div class="card-body">
                      <h5 class="card-title">엔믹스 지니</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <img src="https://blog.kakaocdn.net/dna/c9uBIm/btrATdY3TR5/AAAAAAAAAAAAAAAAAAAAAEio1HWgnAWSA8atCO4wZ4Y0c07BiEb8J5GlKoZqPglq/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=895P0fah8dYgVHN%2F4CBKRzLS3DM%3D" class="card-img-top" alt="지니">
                    <div class="card-body">
                      <h5 class="card-title">엔믹스 지니</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
        </div>
    </div>

 

 

https://getbootstrap.com/docs/5.1/layout/grid/#grid-options

col-sm-12는 small사이즈가 됐을 때 각각의 박스가 12등분된 공간 중 12만큼 차지하는 것 (꽉 차지)

이를 초과하면 다음 줄로 넘어감

col-lg-3 : large 사이즈일 때 각각의 박스가 3/12만큼 차지

col-md-6 : medium 사이즈일 때 각각의 박스가 6/12만큼 차지

 

 

large - medium - small

 

 

 

https://getbootstrap.com/docs/5.1/layout/containers/

Containers

 

 

그치만 위에 캡쳐들은 안의 box들이 너무 퍼져있고, 이를 해결하기 위해 container 클래스 이용

 

 

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                      <h5 class="card-title">card</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                      <h5 class="card-title">card</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                      <h5 class="card-title">card</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 box">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                      <h5 class="card-title">card</h5>
                      <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="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>            
            </div>
        </div>
    </div>

 

 

1398px, 1400px 이상, 1400px 넘어가면 박스들(여백포함)의 너비가 1320px가 될 때까지 여백이 늘어나지만 이는 max-width를 해제해주면 됨