-
Bootstrap 부트스트랩 Grid 사용하기 3 : 반응형 Grid 구성DEV/javascript 2022. 5. 3. 21:14
부트 스트랩을 이용하여 화면 분할 방법
(Container 및 Grid를 이용하여 반응형으로 화면을 만들어보자)
3. Grid (반응형)
간단한 col, row 응용과 반응형 화면을 구성해 보았다.
코드를 보면 충분히 쉽게 이해가 가능하다.
첫 번째 row 와 두 번째 row는 숫자와 실제 화면 위치를 잘 생각해 보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- [Bootstrap] --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- 테스트를 위한 CSS --> <style> .innerDiv { height: 200px; text-align: center; font-weight: bold; color: red; } </style> </head> <body> <!-- .container-fluid, which is width: 100% at all breakpoints --> <div class="container-fluid"> <div class="row"> <!-- row 1 --> <div class="innerDiv col-2"> <div class="innerDiv row"> <!-- col 내부에 새로운 row 선언 --> <div class="innerDiv col-4" style="background-color: #F8B400;">1</div> <div class="innerDiv col-8" style="background-color: #FAF5E4;">2</div> <div class="innerDiv col-12" style="background-color: #125B50;">3</div> </div> </div> <div class="innerDiv col-5" style="background-color: #DEB6AB;">4</div> <div class="innerDiv col-5" style="background-color: #AC7D88;">5</div> <!-- row 2 --> <div class="innerDiv col-2"><br>6</div> <div class="innerDiv col-5" style="background-color: white;">7</div> <div class="innerDiv col-5" style="background-color: black;">8</div> <!-- row 3 padding 확인 (p-4 : 패딩 4 만큼) --> <div class="row p-4"> <div class="innerDiv col-sm" style="background-color: #417D7A;"></div> <div class="innerDiv col-sm" style="background-color: #FF6363;"></div> <div class="innerDiv col-sm" style="background-color: #EBD8C3;"></div> <div class="innerDiv col-sm" style="background-color: #EBD8C3;"></div> </div> <!-- row 4 margin 확인 (p-4 : 패딩 4 만큼) --> <div class="row"> <!-- (m-0 ~ 4 : 마진 0 ~ 4 만큼) --> <div class="innerDiv col-sm m-0" style="background-color: #417D7A;"></div> <div class="innerDiv col-sm m-1" style="background-color: #FF6363;"></div> <div class="innerDiv col-sm m-2" style="background-color: #EBD8C3;"></div> <div class="innerDiv col-sm m-3" style="background-color: #EBD8C3;"></div> </div> </div> </div> </body> </html>
화면 출력 1, 2, 3번 DIV 위치와 코드를 잘 생각해 보면 감이 올 것이다.
세 번째 row와 네 번째 row는 조금 다름을 알 수 있다.
반응형 구성을 위해 .col 뒤에 -sm을 추가 하였다. (물론 .col-sm-4 와 같은 방식도 사용이 가능하다.)
sm 옵션에 대한 설명은 bootstrap 페이지에 잘 서술되어 있다.
sm은 컨테이너가 576px(width) 이하가 되면 반응 한다는 뜻이다.
실제로 브라우저 크기를 줄여 576px 이하가 되면 다음과 같이 구성이 변경된다.
첫 번째 row와 두 번째 row는 일반적인 row - col 구성이기 때문에 실제 비율에 맞게 줄어듬을 알 수 있다.
하지만 세 번째, 네 번째 row는 반응형으로 자동으로 줄바꿈이 됨을 알 수 있다.
위 구성을 잘 조합하여 사용하면 반응형 웹 페이지 구성이 간편하게 이루어진다.
(편하게 사용이 가능하다 빡쎄게 튜닝하기 힘들다...)
그리고 class에 p-4와 m-0, m-1, m-2, m-3이 추가된 것을 볼 수 있다.
해당 클래스는 부트 스트랩에서 padding과 margin값을 설정하는 방법이다.
p는 패딩, m은 마진을 뜻하며 숫자가 커질수록 해당 여백이 커진다.
그리고 padding, margin을 x축만 적용, y축만 적용 등 다양한 옵션을 제공한다.
mx-1 : margin을 x축만 1만큼
py-2 : paddin을 y축만 2만큼
위 margin과 padding이 얼마나 먹혔는지 확인해 보면 다음과 같다.
* 마지막으로 이거 보면 좋음!
https://seokbong.tistory.com/83
이 시리즈의 전편 : https://seokbong.tistory.com/81
Bootstrap 부트스트랩 Grid 사용하기 2 : Grid (Row, Col)
부트 스트랩을 이용하여 화면 분할 방법 (Container 및 Grid를 이용하여 반응형으로 화면을 만들어보자) 2. Grid (Row, Col) Bootstrap에서는 편리한 화면 구성을 위해 그리드 시스템을 제공한다. Boostrap은
seokbong.tistory.com
ref : Bootstrap Spacing
https://getbootstrap.com/docs/5.1/utilities/spacing/#margin-and-padding
Spacing
Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.
getbootstrap.com
'DEV > javascript' 카테고리의 다른 글
Javascript innerWidth, innerHeight, outerWidth, outerHeight (0) 2022.06.04 Bootstrap 부트스트랩 Grid 사용하기 4 : 반응형 구성 참고용 (0) 2022.05.04 Bootstrap 부트스트랩 Grid 사용하기 2 : Grid (Row, Col) (0) 2022.05.03 Bootstrap 부트스트랩 Grid 사용하기 1 : Container (0) 2022.05.03 Javascript setTimeout 함수 (0) 2022.05.02