상자

그만큼 상자 블록은 콘텐츠를 화면 중앙에 깔끔하게 배치하는 데 효과적입니다. 일반적으로 세그먼트 블록과 함께 사용됩니다. 다음의 상자를 통합할 수 있습니다. 패널 삽입 > 구조 분절.

이 세션에서는 다음 내용을 논의합니다.

1. 상자의 구조
2. 박스, 세그먼트, 섹션 블록 활용 방법

상자의 구조

ㅏ 상자 미리 정의된 스타일이 있는 섹션 블록입니다. 브라우저 창을 기준으로 콘텐츠를 중앙에 배치하기 위해 더 큰 화면에서 최대 너비 940픽셀을 제공합니다. 작은 장치(예: 휴대폰 및 태블릿)에서는 상자가 전체 화면 너비에 걸쳐 늘어납니다.

상자의 최대 너비를 수정하여 뷰포트 크기에 계속 적응하면서도 설정된 최대 너비까지만 확장할 수 있습니다.

박스, 세그먼트, 섹션 블록 활용 방법

웹 디자인에서 상자는 섹션 블록 내부에 배치되는 경우가 많습니다. 섹션은 기본적으로 전체 너비를 차지합니다. 섹션 내에 상자를 배치하여 요소를 중앙을 향해 깔끔하게 그룹화할 수 있습니다. 그런 다음 상자 내부의 세그먼트 블록을 활용하여 레이아웃, 간격, 치수 및 배치를 통해 요소를 정렬할 수 있습니다.

전문가 팁: 섹션은 전체 너비에 걸쳐 있고 사전 정의된 '섹션' HTML5 태그를 포함하는 섹션 블록입니다. 상자는 최대 너비가 미리 설정된 섹션 블록입니다.

웹 레이아웃 구성에 대해 자세히 알아보세요.