부트스트랩의 레이아웃 옵션
그리드 시스템 (Grid System)
부트스트랩의 그리드 시스템은 기본적으로 12개의 열을 기반으로 하여, 웹 페이지의 요소들을 쉽게 배치할 수 있도록 돕습니다. 각 열(.col-*)은 부모 컨테이너 안에서 비율에 맞춰 크기를 조정합니다. container 클래스 안에 row 클래스를 사용하고, 그 안에 각 열을 col 클래스로 나누어 배치할 수 있습니다. 이 시스템을 활용하여 모바일부터 데스크탑까지 다양한 화면 크기에서 반응형 웹 디자인을 쉽게 구현할 수 있습니다.
반응형 웹 디자인 (Responsive Design)
부트스트랩의 반응형 디자인은 다양한 화면 크기에서 레이아웃이 자동으로 조정되도록 도와줍니다. col-sm-, col-md-, col-lg-, col-xl- 클래스를 사용하여 각 화면 크기별로 열의 크기나 배치를 설정할 수 있습니다. 예를 들어, 모바일 화면에서는 col-12로 설정하고, 데스크탑 화면에서는 col-lg-6으로 설정하여 화면 크기에 맞춰 요소가 적절히 배치되도록 할 수 있습니다. 이를 통해 사용자는 어떤 기기에서도 최적화된 웹 페이지를 경험할 수 있습니다.
컨테이너 (Container)
부트스트랩에서 컨테이너는 페이지의 레이아웃을 고정 또는 유동적으로 설정하는 데 사용됩니다. container 클래스는 고정된 너비를 가지고 있으며, 페이지의 내용이 일정 너비 내에서 배치되도록 합니다. 반면, container-fluid 클래스는 화면 전체 너비를 차지하여 유동적인 레이아웃을 구현할 수 있습니다. container와 container-fluid를 적절히 사용하여, 웹 페이지가 다양한 해상도에서 일관되게 표시될 수 있도록 관리할 수 있습니다.
정렬 옵션 (Alignment)
부트스트랩은 요소를 쉽게 정렬할 수 있는 다양한 클래스를 제공합니다. justify-content-*와 align-items-* 클래스를 사용하여, 수평 및 수직 방향으로 콘텐츠를 정렬할 수 있습니다. 예를 들어, justify-content-center를 사용하면 수평으로 가운데 정렬하고, align-items-center를 사용하면 세로 방향으로 가운데 정렬할 수 있습니다. 이러한 정렬 기능은 그리드 시스템, 카드, 버튼 등 다양한 요소에 적용할 수 있으며, 레이아웃을 더 깔끔하고 직관적으로 만듭니다.
오프셋 (Offset)
부트스트랩의 오프셋 기능은 그리드 시스템 내에서 특정 열을 오른쪽으로 밀거나, 페이지 내에서 원하는 위치로 이동시키는 데 사용됩니다. 예를 들어, offset-md-3 클래스를 사용하면 중간 크기 이상의 화면에서 해당 요소가 3개의 열만큼 오른쪽으로 밀리게 됩니다. 이 기능을 통해 레이아웃에서 특정 요소를 정밀하게 조정하거나, 빈 공간을 삽입하는 데 유용하게 사용할 수 있습니다.