유동적 레이아웃으로 요소 정렬하기

유동적 레이아웃을 사용하면 여러 페이지 크기 및 방향에 대한 정렬과 비율이 자동으로 조정되도록 요소를 정렬할 수 있습니다. 반응형 문서에서는 특히 유동적 레이아웃의 장점이 드러나지만 유동 레이아웃에서는 고정 크기 요소도 사용할 수 있습니다.

Google Web Designer에서 다양한 방법을 사용하여 유동적 레이아웃을 빌드할 수 있습니다.

비율 기반 값

비율을 유지하고 서로와 상대적으로 맞춰지도록, 크기와 위치를 픽셀 대신 비율을 사용하여 지정할 수도 있습니다.

픽셀 대신 비율을 사용하려면 속성 패널의 입력란에서 px를 클릭하고 드롭다운에서 %를 선택합니다.

모든 위치 및 크기 값을 비율로 변환하려면 '비율 사용 ' 버튼을 클릭합니다.

비율 기반 값과 픽셀 기반 값은 문서에서 함께 사용할 수 있습니다.

앵커를 사용하면 요소 또는 컨테이너의 크기, 패딩 또는 테두리 너비가 변경되더라도 컨테이너 내에서 요소를 영구적으로 맞출 수 있습니다. 위치 또는 변환 속성을 설정하면 앵커 포인트의 요소가 상쇄됩니다.

가로 앵커 모드와 수직 앵커 모드를 선택할 수 있으며, 기본값은 '왼쪽 상단'입니다.

모드	효과
왼쪽	요소의 왼쪽 가장자리가 컨테이너의 왼쪽 가장자리에 맞춰집니다.
가운데	가로를 기준으로 요소의 가운데가 컨테이너의 가운데에 맞춰집니다.
오른쪽	요소의 오른쪽 가장자리가 컨테이너의 오른쪽 가장자리에 맞춰집니다.

모드	효과
상단	요소의 상단 가장자리가 컨테이너의 상단 가장자리에 맞춰집니다.
가운데	세로를 기준으로 요소의 가운데가 컨테이너의 가운데에 맞춰집니다.
하단	요소의 하단 가장자리가 컨테이너의 하단 가장자리에 맞춰집니다.

선택 도구 가 활성화되어 있을 때는 속성 패널이나 도구 옵션 막대에서 앵커 모드를 설정할 수 있습니다.

Flexbox(CSS 가변형 상자 레이아웃 모듈)는 컨테이너의 행 또는 열 내에서 항목을 유연하게 정렬할 수 있는 방법입니다. 각 항목은 지정된 순서와 간격을 유지하면서 컨테이너 공간을 최적화하기 위해 늘어나거나 줄어들 수 있습니다.

반응형 패널의 Flexbox 탭에서 Flexbox를 사용 설정하고 Flexbox 속성을 구성할 수 있습니다. Flexbox 사용 방법 자세히 알아보기

어떻게 하면 개선할 수 있을까요?