Google Web Designer의 모든 요소에는 크기, 위치, 스타일과 같은 여러 속성이 있습니다. 많은 요소가 유사한 속성을 가지고 있지만 구성요소와 같은 일부 요소에는 고유한 속성이 있습니다.
속성 패널에서 속성을 확인하고 수정할 수 있습니다.
일반 속성
많은 요소가 이러한 일반 속성을 공유합니다. 전체 일반 속성 중 일부만 있는 요소도 존재합니다.
요소 ID
속성 설명 요소 요소 유형을 표시합니다. 요소 유형은 각 시각 요소나 구성요소에 대해 기본으로 생성됩니다. 맞춤 요소를 생성할 수도 있습니다. ID 요소 ID입니다. ID가 있는 요소만 이벤트의 타겟 또는 수신자가 될 수 있습니다. 위치 및 크기
속성 설명 왼쪽 스테이지(또는 상위 요소) 왼쪽에서부터의 거리(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 전체 너비에 대한 백분율입니다. 상단 스테이지(또는 상위 요소) 상단에서부터의 거리(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 총 높이에 대한 백분율입니다. 너비 요소의 너비(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 전체 너비에 대한 백분율입니다. 높이 요소의 높이(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 총 높이에 대한 백분율입니다. 픽셀이나 백분율을 선택하는 방법:
측정 단위(
px또는%)를 클릭한 다음 사용할 단위를 팝업 메뉴에서 선택합니다.백분율 사용
버튼을 클릭하여 모든 위치 및 크기 속성을 백분율로 변경할 수도 있습니다.
일부 요소 유형에 대해서는 이 옵션이 제공되지 않을 수 있습니다.
너비와 높이 비율을 유지하는 방법:
가로세로 비율 제한
버튼을 클릭합니다. 너비 또는 높이가 변경되면 다른 측정기준이 그에 비례하여 자동으로 조정됩니다.
다른 측정기준에 영향을 주지 않고 너비 또는 높이를 변경하려면
버튼을 다시 클릭합니다.
앵커
앵커를 사용하면 요소 또는 컨테이너의 크기, 패딩 또는 테두리 너비가 변경되더라도 컨테이너 내에서 요소를 영구적으로 맞출 수 있습니다. 위치 또는 변환 속성을 설정하면 앵커 포인트의 요소가 상쇄됩니다.
가로 앵커 모드와 수직 앵커 모드를 선택할 수 있으며, 기본값은 '왼쪽 상단'입니다.
가로 앵커 모드
모드 효과 왼쪽 요소의 왼쪽 가장자리가 컨테이너의 왼쪽 가장자리에 맞춰집니다. 가운데 가로를 기준으로 요소의 가운데가 컨테이너의 가운데에 맞춰집니다. 오른쪽 요소의 오른쪽 가장자리가 컨테이너의 오른쪽 가장자리에 맞춰집니다. 수직 앵커 모드
모드 효과 상단 요소의 상단 가장자리가 컨테이너의 상단 가장자리에 맞춰집니다. 가운데 세로를 기준으로 요소의 가운데가 컨테이너의 가운데에 맞춰집니다. 하단 요소의 하단 가장자리가 컨테이너의 하단 가장자리에 맞춰집니다. 크기 제한
크기 제한은 지정된 크기가 제약 조건을 벗어나는 경우에도 요소의 크기를 제한합니다. 크기 제한을 삭제하려면 필드가 비어 있도록(---) 값을 삭제하세요.
속성 설명 최소 너비 요소의 최소 너비(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 전체 너비에 대한 백분율입니다. 최소 높이 요소의 최소 높이(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 총 높이에 대한 백분율입니다. 최대 너비 요소의 최대 너비(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 전체 너비에 대한 백분율입니다. 최대 높이 요소의 최대 높이(픽셀로 표시) 또는 스테이지(또는 상위 요소)의 총 높이에 대한 백분율입니다. 변환, 회전 및 배율
3D 값 유형
유형 설명 델타 현재 값을 기준으로 객체의 3D 위치, 회전 또는 배율을 변경할 수 있습니다. 조정 사이마다 값은 0으로 재설정됩니다. 절댓값 스테이지를 기준으로 객체의 3D 위치, 회전, 배율을 3D로 표시합니다. 변환, 회전, 배율의 X, Y, Z 값
속성 설명 번역 X, Y, Z 값으로 이루어진 상단 행은 요소의 3D 변환값을 나타냅니다. 회전 두 번째 행은 각 축 주변의 회전을 나타냅니다. 크기 조절 세 번째 행은 배율을 나타냅니다. 균일하게 크기 조절 스타일
채우기
속성 설명 불투명도 요소의 불투명도로, 0(완전히 투명)에서 1(완전히 불투명) 사이의 값으로 표시됩니다. 채우기 색상 상자를 클릭하여 요소의 채우기 색상을 선택합니다. 오버플로 컨테이너 오버플로 시 콘텐츠가 처리되는 방법을 설정합니다.
visible- 콘텐츠가 컨테이너 외부에 표시됩니다.hidden- 스크롤바 없이 컨테이너 가장자리에서 콘텐츠가 잘립니다.scroll- 컨테이너 가장자리에서 콘텐츠가 잘립니다. 오버플로가 없더라도 스크롤바가 항상 표시됩니다.auto- 컨테이너 가장자리에서 콘텐츠가 잘리며 필요한 경우 스크롤바가 표시됩니다.initial- 콘텐츠가 초기 오버플로 동작으로 설정됩니다.inherit- 컨테이너가 상위 컨테이너의 오버플로 규칙을 상속합니다.공개 상태 요소의 공개 상태입니다.
visible- 요소가 표시됩니다. (기본값)hidden- 요소가 숨겨지지만 레이아웃에 여전히 영향을 줍니다.collapse- 요소가 숨겨지며 테이블 행이 접힙니다.initial- 요소가 초기 공개 상태로 설정됩니다.inherit- 요소가 상위 컨테이너의 공개 상태 규칙을 상속합니다.테두리
속성 설명 테두리 색상 색상 견본을 클릭하여 요소 테두리 색상을 선택합니다. 테두리 너비 테두리 너비는 픽셀 또는 포인트로 설정됩니다. 스타일 테두리 스타일입니다. 다음 중 하나를 선택할 수 있습니다.
nonesolidhiddendotteddasheddoublegrooveridgeinsetoutset모서리 반경 모서리 반경을 픽셀, 포인트 또는 백분율로 설정합니다. 기본적으로 모서리는 동일한 반경으로 설정됩니다. 각 모서리를 개별적으로 설정하려면 동일하게 유지 여백
요소의 여백은 픽셀 또는 백분율로 설정할 수 있습니다. 기본적으로 여백은 동일한 값으로 설정됩니다. 각 측면을 개별적으로 설정하려면 동일하게 유지
패딩
요소의 패딩은 픽셀 또는 백분율로 설정할 수 있습니다. 기본적으로 패딩 수치는 동일한 값으로 설정됩니다. 각 측면을 개별적으로 설정하려면 동일하게 유지
모션 경로 속성
모션 경로를 포함하는 요소의 경우, 앵커 포인트를 추가하거나 모션 경로 모양을 곡선으로 변경하면 속성 패널에 모션 경로 속성도 표시됩니다.
페이지 속성
각 페이지에는 요소가 선택되지 않은 경우에 보거나 변경할 수 있는 고유한 속성 모음이 있습니다.
동영상 광고 및 애니메이션 GIF 속성
동영상 광고 및 애니메이션 GIF를 사용하면 요소가 선택되지 않은 경우에 동영상 광고 크기와 프레임 속도를 변경할 수 있습니다.
요소 속성
공통 속성 외에도 각 구성요소는 고유한 속성을 가지고 있습니다. 각 구성요소의 고유한 속성은 도움말 페이지에서 확인할 수 있습니다.