[Bootstrap] Containers, Grid, Columns

• Bootstrap에서 Containers, Grid, Columns는 웹 페이지의 레이아웃을 구성하는 데 필수적인 요소입니다. 각각의 역할과 사용 시점을 명확하게 이해하는 것이 중요합니다.

  Containers

• 설명 : 컨테이너(Container)는 Bootstrap 레이아웃 시스템의 가장 기본적인 요소입니다. 페이지의 내용을 감싸는 데 사용되며, 마진과 패딩을 통해 내용이 디바이스 화면의 가장자리에 바로 닿지 않도록 합니다.
• 언제 사용해야 하는가 : 웹 페이지나 웹 애플리케이션의 최상위 레벨에서 사용됩니다. 페이지의 메인 컨텐츠를 위한 레이아웃을 정의할 때 시작점으로 사용합니다. 반응형 레이아웃을 구현할 때는 .container 클래스가 화면 크기에 따라 최대 너비를 조절하며, 전체 너비를 사용하고 싶을 때는 .container-fluid를 사용합니다.

  Grid

• 설명 : 그리드 시스템은 컨테이너 내에 생성되는 행(row)과 열(column)으로 구성됩니다. 이는 웹 페이지의 구조를 구성하는 데 사용되며, Flexbox 기반의 레이아웃 옵션을 제공합니다.
• 언제 사용해야 하는가 : 복잡한 레이아웃을 구현할 때 사용합니다. 특히 여러 섹션을 가로로 나란히 배치하거나, 반응형 디자인을 적용하여 다양한 화면 크기에서도 일관된 레이아웃을 유지하고자 할 때 그리드 시스템을 활용합니다.

  Columns

• 설명 : 컬럼(Columns)은 그리드 시스템 내부에서 실제 컨텐츠를 담는 역할을 합니다. 컬럼은 행(row) 내부에 위치하며, 여러 개의 컬럼을 함께 사용하여 컨텐츠를 가로로 나눕니다.
• 언제 사용해야 하는가 : 세부적인 레이아웃을 구성할 때 사용합니다. 예를 들어, 한 행 내에 텍스트, 이미지, 카드 등 다양한 요소를 나란히 배치하고자 할 때 컬럼을 사용합니다. 컬럼 크기는 화면 크기에 따라 조절되어, 반응형 디자인을 실현할 수 있습니다.

  요약

• Containers 는 웹 페이지의 메인 컨텐츠를 담는 박스로 사용되며, 페이지의 바깥쪽 여백을 관리합니다.
• Grid 는 복잡한 레이아웃을 구성할 때 사용되는 시스템으로, 행과 열의 조합으로 웹 페이지의 구조를 정의합니다.
• Columns 는 그리드 시스템 내의 행에 포함되어, 실제 컨텐츠를 담는 역할을 합니다. 다양한 크기의 화면에서도 일관된 레이아웃을 유지하기 위해 사용됩니다.

이 세 요소를 효과적으로 조합하여 사용함으로써, 반응형이면서 사용자 친화적인 웹 페이지를 구축할 수 있습니다.