설정 조정

구성 설정은 상위 컨테이너 내 하위 구성 요소의 정렬 동작을 관리합니다. 다양한 조정 설정을 활용하여 레이아웃을 1차원 또는 2차원으로 조절하고 구성 요소가 서로 관련하여 표시되는 방식을 관리할 수 있습니다.

이 튜토리얼에서는 스타일 패널 > 공들여 나열한 것 분절:

1. 초등학교
2. 탄력있는
3. 격자무늬
4. 인라인 요소
5. 플렉스 인라인
6. 그리드 인라인
7. 인라인 구성
8. 사라지다

초등학교

초등학교 대부분의 구성요소에 대해 사전 설정된 조정 설정입니다. 기본 상위 요소의 모든 하위 구성 요소는 새로운 줄에서 시작되며 사용자 정의 너비가 지정되지 않는 한 상위 요소의 전체 너비를 차지합니다.

탄력있는

유연한 상자 직계 하위 구성 요소를 가로 또는 세로로 한 차원으로 구성합니다. 직계 자식이 쌓이는 방향, 부모 요소 내에서 정렬 및 정렬 방법, 자식 요소 사이에 간격이 있는지 여부, 다음 줄로 전환되는지 여부를 개인화할 수 있습니다.

탄력적 상위 요소를 설정하면 해당 상위 요소의 모든 직계 하위 요소가 탄력적 하위 요소가 됩니다. 탄력적 하위 설정에서 탄력적 하위 조정 설정(예: 크기, 배열, 순서)을 대체할 수 있습니다.

격자무늬

그리드 디자인 직계 자식을 2차원(수평 및 수직)으로 열과 행으로 구성합니다. 직계 하위 항목이 그리드 내에서 배치, 정렬 및 할당되는 방식을 사용자 정의하고 열과 행 사이에 공백을 도입할 수 있습니다. 그리드 하위 설정에서 그리드 하위 조정 설정(예: 위치, 범위, 정렬, 자리맞추기 및 순서)을 수정할 수 있습니다.

그리드 비율을 결정하는 동안 공간에 맞게 조정하면서 행과 열 공간을 자동으로 계산하는 FR 장치를 사용하여 유동 그리드를 설정할 수 있습니다.

인라인 요소

하위 구성요소 인라인 요소 상위 요소는 서로 옆에 정렬되며 너비는 내부 콘텐츠를 기준으로 합니다. 콘텐츠가 상위 요소의 경계에 도달하면 하위 항목이 래핑됩니다.

알림: 인라인 요소를 활용하면 HTML의 공백이 사이트 디자인에서 보이는 공간으로 변환됩니다. 인라인 요소 구성 요소 사이의 공백을 처리하는 방법을 알아보세요.

플렉스 인라인

플렉스 인라인 요소를 인라인 수준의 유연한 컨테이너로 표시합니다. Flex Inline 부모의 자식 구성 요소는 Flexbox 모델에 따라 정렬됩니다. 기본적으로 플렉스 컨테이너는 인라인 요소로 변환되는 반면 해당 하위 항목은 플렉스 항목으로 배치됩니다.

그리드 인라인

그리드 인라인 요소를 인라인 수준의 그리드 컨테이너로 표시합니다. 그리드 인라인 상위의 하위 구성요소는 그리드 모델에 따라 정렬됩니다. 플렉스 인라인에 비해 그리드 인라인은 상위 요소의 인라인 수준 동작과 하위 요소에 대한 그리드 레이아웃의 유연성을 통합합니다.

인라인 구성

인라인 구성 요소 내의 모든 텍스트 콘텐츠에 대한 사전 설정된 조정 설정입니다. 너비나 높이를 수정할 수는 없지만 여백과 안쪽 여백을 조정하여 인라인 요소의 레이아웃을 수정할 수 있습니다.

사라지다

당신은 다음을 고용할 수 있습니다 사라지다 요소를 완전히 숨기는 조정 설정입니다. 사라지도록 구성된 요소는 브라우저에 표시되지 않으므로 모바일 장치에 콘텐츠가 표시되는 방식을 변경하는 데 유리할 수 있습니다. 사라지도록 설정된 요소도 접근성 구조에서 제외되어 해당 요소와 해당 하위 항목이 화면 판독기와 같은 보조 기술에 액세스할 수 없게 됩니다.