HTML5를 이용하여 요소의 위치와 크기를 변경하는 데에는 크게 두 가지 방법이 있습니다. 첫 번째 방법은 요소의 왼쪽 및 상단의 좌표를 이용하여 위치를 지정하고, 요소의 너비와 높이를 이용하여 크기를 지정하는 것입니다. 두 번째 방법은 요소를 변환하고 크기를 조절하는 데 CSS transform 속성을 사용하는 것입니다.
Google Web Designer는 두 가지 방법 모두를 사용합니다. 요소 레이아웃의 경우 Google Web Designer에서는 왼쪽 및 상단의 값을 사용하여 요소의 위치를 지정하고, 너비와 높이 값을 사용하여 크기를 설정합니다. CSS transform 속성은 더 높은 프레임 속도와 매끄러운 애니메이션을 제공하므로, Google Web Designer는 CSS 기반 애니메이션을 만들 때 이 방법을 기본으로 사용합니다.
변환 도구에 기본 설정을 사용하면 레이아웃과 애니메이션 모두에서 올바르게 작동합니다. 하지만 원하는 경우 요소의 크기를 조절하고 위치를 지정하는 방법을 변경할 수 있습니다.
제한사항
- 상단/왼쪽 위치의 경우 모션 경로가 작동하지 않습니다.
- AMPHTML 광고의 애니메이션은 상단/왼쪽 위치 또는 너비/높이 크기를 기반으로 할 수 없습니다.
위치 지정 스타일 변경
위치 지정 스타일을 변경하는 방법:
- 툴바에서 선택 도구
를 클릭합니다.
- 위치 지정 스타일 옵션 버튼
을 클릭합니다.
- 팝업 메뉴에서 위치 지정 스타일을 선택합니다.
위치 지정 스타일 설명 기본 위치 지정 사용
레이아웃의 경우 왼쪽/상단 위치 지정을, 위치에 애니메이션을 적용하는 경우 transform:translate3d()선호왼쪽/상단 위치 지정 사용
키프레임에서 요소의 위치를 지정하는 경우 왼쪽/상단 값 사용 3D 변환 사용
키프레임에서 요소의 위치를 지정하는 경우 transform:translate3d()값 사용
을 클릭합니다.
기본 위치 지정 사용
왼쪽/상단 위치 지정 사용
3D 변환 사용크기 조정 스타일 변경
크기 조정 스타일을 변경하는 방법:
- 툴바에서 선택 도구
- 크기 조정 스타일 옵션 버튼
을 클릭합니다.
- 팝업 메뉴에서 크기 조정 스타일을 선택합니다.
크기 조정 스타일 설명 기본 크기 조정 사용
레이아웃의 경우 너비 및 높이 크기 조정을, 크기에 애니메이션을 적용하는 경우 transform:scale3d()선호너비 및 높이 사용
키프레임에서 요소의 크기를 조정하는 경우 너비/높이 값 사용 3D 크기 조절 사용
키프레임에서 요소의 크기를 조정하는 경우 transform:scale3d()값 사용
을 클릭합니다.
기본 크기 조정 사용
너비 및 높이 사용
3D 크기 조절 사용변환 컨트롤
도구 옵션 메뉴에 변환 컨트롤 체크박스 
선택 항목을 회전하는 방법:
- 툴바에서 선택 도구를 클릭합니다.
- 도구 옵션 막대에서 변환 컨트롤 체크박스가 선택되어 있는지 확인합니다.
- 개체를 선택합니다. 회전 컨트롤(고리 두 개가 중첩된 모양)이 선택 항목 중간에 나타납니다.
- 원하는 경우 회전 컨트롤의 안쪽 고리를 드래그하여 회전 중심을 변경합니다.
- 회전 컨트롤의 바깥쪽 고리를 드래그하여 선택 항목을 회전합니다.
- Shift 키를 누른 상태에서 드래그하여 45° 단위로 회전하도록 제한할 수 있습니다.
선택 항목의 크기를 조절하는 방법:
- 툴바에서 선택 도구를 클릭합니다.
- 도구 옵션 막대에서 변환 컨트롤 체크박스가 선택되어 있는지 확인합니다.
- 개체를 선택합니다. 선택한 요소 주변에 파란색 상자가 표시됩니다.
- 경계 상자의 측면 또는 모서리에 있는 제어점 중 하나를 드래그합니다.
- Shift 키를 누른 상태에서 드래그하여 선택 항목의 가로세로 비율을 원래대로 유지할 수 있습니다.
SVG 크기 조절
SVG 이미지 또는 도형의 크기를 조절하여 더 크게 만들려는 경우 3D 크기 조절 대신 너비 및 높이 속성을 사용하세요. 선택 도구를 사용하여 컨트롤을 변환하는 경우 크기 조절 스타일을 변경해야 할 수 있습니다.