반응형 레이아웃 개요

반응형 디자인은 여러 표시 영역 방향 또는 크기에 맞게 조정되는 유연한 레이아웃을 사용하므로 여러 레이아웃을 만들 필요가 없으며, Google Web Designer에서 반응형 디자인을 만들 수 있도록 다양한 도구를 제공합니다.

문서에 적어도 반응형 페이지 크기가 있어야 합니다. 객체 크기와 위치를 비율로 정의하여 유동적 레이아웃을 만들 수도 있습니다. 여러 표시 영역 크기 또는 크기 범위에 맞게 각 요소를 맞춤설정하려면 미디어 규칙을 사용하세요.

• 반응형 페이지 크기
• 유동적 레이아웃
• 미디어 규칙

반응형 페이지 크기

전체 문서를 반응형으로 만들기

화면에서 사용 가능한 모든 공간을 채우려면 반응형 문서의 페이지 너비와 높이를 100%로 설정해야 합니다.

• 기존 문서: 반응형 패널에서 반응형 레이아웃 체크박스를 선택합니다.

• 새 파일: 새 파일 대화상자에서 크기를 지정할 때 반응형 레이아웃 체크박스를 선택합니다. 이 옵션은 일부 파일 형식에서만 사용할 수 있습니다.

반응형 페이지에서 콘텐츠를 제작하려면 유동적 레이아웃과 미디어 규칙을 사용하면 됩니다.

유동적 레이아웃

비율 기반 크기 및 위치

비율 작성 개요

페이지 크기 외에, 요소의 크기와 위치를 픽셀 대신 비율을 사용하여 지정할 수도 있습니다. 비율을 사용하면 상위 컨테이너를 변경하더라도 상위 컨테이너에 맞게 요소의 크기와 정렬이 유지됩니다.

요소를 정렬할 때 정렬 및 배포 도구의 유동적 레이아웃 옵션을 사용하면 비율 기반 위치를 쉽게 설정할 수 있습니다.

미디어 규칙

여러 방향과 크기에 맞춰 속성 및 CSS 스타일 재정의하기

미디어 규칙을 사용하면 문서에서 표시 영역 크기 및 방향을 감지하고 그에 따라 여러 스타일과 속성을 적용할 수 있습니다. 예를 들어 스마트폰에서는 하나의 열에 콘텐츠를 표시할 수 있고, 태블릿에서는 두 개의 열에 동일한 콘텐츠를 표시할 수 있습니다. 재정의라고 하는 이러한 변경은 지정된 크기 또는 크기 범위를 대상으로 수행됩니다.

반응형'패널에서 여러 규칙 모음 간에 전환할 수 있습니다.

• 기본 규칙: 기본 스타일 모음을 변경하거나 모든 표시 영역 크기에 적용되는 변경(예: 애셋, 구성요소, 이벤트의 추가 또는 삭제)을 수행하는 경우 기본 문서 수정을 선택합니다.
• 미디어 규칙: 특정 크기 또는 크기 범위를 선택하여 해당 표시 영역 크기의 기본 스타일 및 속성을 재정의합니다.

미디어 규칙을 선택하면 해당 크기 또는 크기 범위에만 적용되는 스타일 및 속성을 설정할 수 있습니다. 예를 들어 요소의 위치, 크기, 소스, 표시 여부 또는 애니메이션을 조정할 수 있습니다. Google Web Designer를 사용하면 텍스트 콘텐츠, 텍스트 맞추기 설정, 구성요소 속성도 재정의할 수 있습니다.

미디어 규칙 및 재정의에 대해 자세히 알아보세요.