[Web] Grid system for responsive web design

 ► Responsive Web Design

• 디바이스 종류나 화면 크기에 상관없이, 어디에서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술
• Bootstrap grid system의 12개 column과 6개 breakpoints를 사용하여 반응형 웹 디자인을 구현

 

 ► Grid system breakpoints

• 화면 크기(breakpoints)에 따라 12개의 칸을 각 요소에 나누어 주는 것
• 웹 페이지를 다양한 화면 크게에서 적절하게 배치하기 위한 분기점
• 화면 너비에 따라 6개의 분기점 제공(xs, sm, md, lg, xl, xxl)
• 각 breakpoints 마다 설정된 최대 너비 값 "이상으로" 화면이 커지면 grid system 동작이 변경됨

⎣col-sm-6 : column에서 sm사이즈로 6칸을 차지하겠다

⎣ 박스와 박스 사이에 간격이 생겼다면 gutters를 조절해 주면 됨

⎣ box가 어떻게 보여지는지 확인하기 위해 이미지 아래와 같이 스타일 적용함

⎣ 화면을 줄이거나 늘였을 때 지정한 사이즈에 따라 재배치됨

⎣ col-12 col-sm-6 col-md-8 col-lg-3 col-xl-4

     : column을 12칸으로 나누고 sm사이즈일 때 6칸씩, md사이즈일 때 8칸씩, lg사이즈일 때 3칸씩, xl사이즈일 때 4칸씩 차지해라

⎣ class = "box"를 col 지정한 곳에 함께 작성하지 않는 경우 gutter가 사라지기 때문

    ⎣실제 업무에서는 column이 아니라 contents중심으로 보기 때문에 box 클래스를 따로 만들어 주는 것

⎣ 오른쪽 이미지의 offset-sm-4는 sm사이즈일 때 4칸, offset-md-0는 md사이즈일 때 0으로 바꾸면 offset 해제가 된다(=원상태로 돌아간다)

    offset해제를 안 하고 다음 스타일을 적용하면 원하는 스타일로 만들 수 없음!!

 

https://getbootstrap.com/docs/5.3/layout/breakpoints/ 

Breakpoints

https://getbootstrap.com/docs/5.3/layout/gutters/

Gutters

 

 

► Media query

• 지금 당장 필요한 기능은 아니고 css를 더 깊게 들어갈 경우 다시 공부하기!  

media query로 작성된 gird system의 breakpoints

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

 

► Grid cards

• row-cols : 행당 표시할 열(카드) 수를 손쉽게 제어할 수 있음

⎣ grid cards에서의 row-cols 문법이 기존과 다름

⎣ row-cols-1일 경우 한 줄에 카드 1개를 표시하겠다, row-cols-sm-3일 경우 sm사이즈일 때 한 줄에 카드를 3개를 표시하겠다

 

https://getbootstrap.com/docs/5.3/components/card/#grid-cards

Cards

 

---

► 읽어보면 좋은 글

https://ishadeed.com/article/responsive-design/

The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed

https://2022.stateofcss.com/en-US/

The State of CSS 2022