부트스트랩 그리드 클래스의 숫자 이해: col-md-4, col-xs-1, col-lg-2

The 부트스트랩 프레임워크는 반응형 레이아웃 생성을 용이하게 하는 강력한 그리드 시스템을 도입합니다. 이 시스템에 필수적인 것은 col-* 형식의 클래스입니다. 여기서 별표는 숫자를 나타냅니다. 이 숫자는 그리드 내의 요소가 정렬되는 방식과 다양한 화면 크기에 반응하는 방식을 결정하는 데 중요한 역할을 합니다.

숫자는 그리드를 어떻게 정렬합니까?

col-* 클래스의 숫자는 관련 요소가 차지해야 하는 사용 가능한 너비 부분을 나타냅니다. 그리드 행의 전체 너비는 12개 열로 나뉘며 클래스의 숫자는 요소가 확장되는 열 수를 나타냅니다.

예를 들어 col-4는 요소가 4개 열에 걸쳐 있음을 의미합니다. 또는 사용 가능한 너비의 1/3입니다. col-12는 전체 너비에 걸쳐 12개 열을 모두 차지합니다.

숫자 사용 방법

이 클래스를 사용하려면 클래스 내의 요소에 할당하기만 하면 됩니다. 그리드 행. 예를 들어, 행 내에 너비가 같은 두 개의 열을 만들려면 다음을 사용합니다.

Column 1
Column 2

너비가 다른 3개의 열을 만들려면 다음을 사용할 수 있습니다.

Column 1
Column 2
Column 3

숫자는 무엇을 나타냅니까?

숫자 자체 외에도 다음 사항에 유의하는 것이 중요합니다. 접두사가 적용되었습니다. Bootstrap에서 이러한 접두사는 다양한 화면 크기를 나타냅니다.

• xs: 매우 작음(모바일 장치)
• sm: 작음(태블릿)
• md: 중간(데스크톱) )
• lg: 대형(더 큰 데스크톱)

여러 개 할당 col-* 클래스를 요소에 추가하면 각 화면 크기에서 요소가 작동하는 방식을 제어할 수 있습니다. 예를 들어 col-6 col-sm-4는 요소가 모바일 화면 너비의 절반, 태블릿 및 데스크톱 너비의 1/3에 걸쳐 있음을 의미합니다.

결론

반응형 및 적응형 웹 레이아웃을 만들려면 Bootstrap 그리드 클래스의 숫자와 접두사를 이해하는 것이 필수적입니다. col-* 클래스를 효과적으로 활용함으로써 개발자는 디자인이 다양한 화면 크기에 원활하게 반응하여 모든 장치에서 일관된 사용자 경험을 제공할 수 있습니다.