그리드 영역

그리드 영역을 사용하면 쉽게 재배열할 수 있는 재사용 가능한 배열을 만들 수 있습니다. 그리드 하위 항목을 그리드 영역에 삽입하고, 영역을 이동하고, 모든 콘텐츠가 영역에 따라 조정되는 것을 관찰합니다. 즉, 그리드의 모든 항목이 자동으로 업데이트됩니다.

그리드 영역을 활용하여 다음을 수행할 수 있습니다.

• 재사용 가능한 그리드 레이아웃 구축
• 영역을 재구성하여 다양한 장치의 그리드 레이아웃 수정
• 그리드 레이아웃의 여러 인스턴스를 동시에 업그레이드

이 기사 전체에서 다음 내용을 확인할 수 있습니다.

1. 그리드 영역으로 레이아웃을 고안하는 방법
2. 그리드 영역에 콘텐츠를 포함, 배치 및 정렬하는 방법
3. 그리드 영역을 재배치하고 크기를 조정하는 방법
4. 다양한 화면 크기에 맞게 그리드 영역을 구성하는 방법
5. 그리드 영역이 있는 레이아웃을 재활용하는 방법
6. 접근성을 위해 그리드를 검사하는 방법
7. 자주하는 질문

그리드 영역으로 레이아웃을 고안하는 방법

그리드를 설정한 후에는 그리드의 영역에 윤곽을 그려 재사용 가능한 레이아웃을 생성할 수 있습니다.

그리드 템플릿 영역 구분

캔버스에 그리드 영역을 직접 삽입할 수 있습니다. 그리드 편집 모드로 들어가서 그리드 셀 위에 마우스를 놓고 '...을 더한” 아이콘이 나타납니다. 그리드 영역을 추가한 후 모서리를 클릭하고 드래그하여 영역을 포함하고 위치를 변경할 수 있습니다. 지역 라벨을 클릭하고 설정 모달에서 위치를 지정하거나 스타일 패널, 지역 레이블을 클릭하고 위치를 정의합니다.

지역 식별

그리드 영역에 이름을 할당하려면 그리드 편집 모드에 액세스하고 지역 라벨을 클릭한 다음 이름. 그리드 영역 이름은 영역의 역할(예: “바닥글”)이나 해당 영역에 포함될 콘텐츠 유형(예: “기본 이미지”)을 설명하는 데 유용합니다.

그리드 영역에 콘텐츠를 포함, 배치 및 정렬하는 방법

그리드 영역을 정의한 후 요소를 각 그리드 영역에 통합할 수 있습니다. 이러한 요소는 해당 지역의 그리드 하위 요소가 되며 지역에 따라 자동으로 조정됩니다.

그리드 내에서 요소를 재배치하려면 요소를 선택하고 다음으로 이동합니다. 스타일 패널 > 그리드 자식 > 위치, 로 설정하세요 영역을 클릭하고 다음에서 요소를 배치하려는 지역을 선택합니다. 그리드 영역 쓰러지 다.

영역 내에서 콘텐츠 정렬

영역 내에 위치한 그리드 하위 항목은 상위 그리드의 정렬 설정을 상속받습니다. 지역 내의 단일 그리드 하위 정렬을 수정하려면 그리드 하위를 선택하고 다음을 방문하세요. 스타일 패널 > 그리드 자식 > 맞추다을 누르고 원하는 정렬 설정을 선택합니다.

그리드 영역을 재배치하고 크기를 조정하는 방법

그리드 영역 내의 모든 요소는 이동되고 크기가 조정됩니다. ~와 함께 지역.

영역을 이동하려면 그리드 편집 모드로 들어가서 영역을 새 위치로 드래그하세요. 영역의 크기를 조정하려면 해당 모서리를 드래그하세요. 영역은 겹칠 수 없으므로 영역을 다시 확장하기 전에 크기를 조정해야 할 수도 있습니다.

다양한 화면 크기에 맞게 그리드 영역을 개발하는 방법

영역 수정은 다양한 화면 크기에 맞게 디자인할 때 특히 유리합니다. 개별 중단점에서 영역의 위치를 변경하고 크기를 조정하여 다른 장치의 레이아웃을 변경할 수 있습니다.

그리드 영역이 있는 레이아웃을 재활용하는 방법

상위 그리드 클래스는 정의한 각 그리드 영역과 관련됩니다. 그리드 영역 레이아웃을 재활용하려면 상위 그리드 클래스를 다른 요소(예: div 블록)에 적용하세요. 그런 다음 콘텐츠를 새 그리드 영역으로 드래그하고 새로운 콘텐츠로 동일한 레이아웃을 구축할 수 있습니다.

예를 들어, 이 접근 방식은 재사용 가능한 페이지 레이아웃을 생성하는 데 유용합니다. 머리글 영역, 주요 콘텐츠 영역, 바닥글 영역을 구분할 수 있습니다. 또는 이미지 영역과 텍스트 영역으로 카드 레이아웃을 구성할 수 있습니다.

여러 발생에 걸쳐 그리드 영역 수정

이러한 그리드 영역 레이아웃은 구성 요소와 유사하게 작동합니다. 단일 인스턴스를 수정하여 사이트 전체에서 그리드 영역 레이아웃의 모든 인스턴스를 즉시 업데이트할 수 있습니다. 콘텐츠 위치 지정에 영향을 줄 수 있으므로 그리드 영역 레이아웃을 수정할 때 주의하세요. 단일 발생에서 그리드 영역을 조정해야 하는 경우 언제든지 콤보 클래스를 활용할 수 있습니다.

접근성을 위해 그리드를 검사하는 방법

수동으로 배치된 그리드 하위 항목과 마찬가지로 그리드 영역 하위 항목도 그리드에 명시적으로 윤곽이 지정됩니다. 이러한 하위 요소가 그리드 영역을 따라 조정되면 document 순서의 위치는 변경되지 않습니다. 사이트 접근성을 보장하기 위해 그리드에서 영역을 이동할 때 이 점에 주의하십시오. 정리 목적으로 지역을 이동했는지, 그리고 읽기 순서가 영향을 받지 않는지 확인하세요.

명시적인 그리드 하위 항목을 다시 정렬합니다. 항해자 사용자가 콘텐츠를 읽기를 원하는 순서에 맞춰야 합니다. 이 작업은 페이지에서 이러한 그리드 하위 항목의 위치에 영향을 주지 않습니다.

자주하는 질문

지역 이름을 바꾸거나 지역을 제거하면 어떻게 되나요?

영역을 제거하면 해당 영역에 위치한 그리드 하위 항목이 자동 생성된 행과 열로 전환됩니다. 이러한 하위 항목을 복원하려면 동일한 이름의 지역을 다시 삽입하세요.

그리드 영역에 여러 요소를 삽입하면 어떻게 되나요?

요소가 겹칩니다. 네비게이터에서 이러한 요소를 다시 정렬하거나 Z-인덱스를 활용하여 겹치는 순서를 조정할 수 있습니다.

그리드 영역의 일부인 셀에 그리드 하위 항목을 삽입할 수 있습니까?

예, 자동 위치 또는 수동 위치 그리드 하위 항목은 영역의 일부인 셀을 차지할 수 있습니다.

예를 들어 배경색을 사용하여 확장된 그리드 영역을 생성할 수 있습니다. 그런 다음 그리드 셀에 수동으로 배치된 헤더 내용을 삽입할 수 있습니다.

1. 첫 번째 행의 4개 열에 걸쳐 있는 "머리글" 그리드 영역을 만듭니다.
2. "헤더" 그리드 영역 내에 div 블록을 배치하고 배경색을 정의합니다.
3. 1열 1행에 로고를 수동으로 배치
4. 탐색 모음을 행 1의 2열에서 4열까지 수동으로 배치하고 확장합니다.

컬렉션 목록의 그리드 영역을 묘사할 수 있나요?

컬렉션 목록에 대한 그리드 영역을 묘사할 수는 없지만 컬렉션 목록 내의 컬렉션 항목에 대한 그리드 영역은 묘사할 수 있습니다.