선택 도구를 사용하여 요소를 선택, 이동 및 변환할 수 있습니다.
요소 선택
툴바의 선택 도구 를 사용하여 스테이지의 요소를 선택합니다.
특정 패널의 요소를 선택할 수도 있습니다.
- 고급 모드 타임라인에서 요소 레이어를 선택합니다.
- 아웃라이너 패널에서 아웃라이너의 구조화된 트리 보기에서 요소를 선택합니다.
- 이벤트 패널에서 이벤트를 마우스 오른쪽 버튼으로 클릭하여 수신자 또는 타겟 요소를 선택합니다.
- 동적 패널에서 결합을 마우스 오른쪽 버튼으로 클릭하여 결합된 요소를 선택합니다.
단일 요소를 선택하는 방법:
- 선택하고 싶은 요소를 클릭합니다.
여러 요소를 선택하는 방법:
- 선택하려는 요소 주변의 스테이지에서 선택 마키를 드래그합니다.
추가 요소를 현재 선택 항목에 추가하는 방법:
- Shift 키를 누른 상태에서 각 개별 요소를 클릭하여 선택 항목에 추가합니다.
- Shift 키를 누른 상태에서 선택하려는 추가 요소 주변의 스테이지에서 선택 마키를 드래그할 수도 있습니다.
요소를 선택 해제하는 방법:
- Shift 키를 누른 상태에서 각 개별 요소를 클릭하여 선택 항목에서 제거합니다.
- Shift 키를 누른 상태로 선택 취소하려는 요소 주변의 스테이지에서 선택 마키를 드래그할 수도 있습니다.
요소 이동
스테이지에서 요소를 이동하는 방법:
- 이동하고 싶은 요소를 하나 이상 선택합니다.
- 선택한 요소를 새 위치로 드래그합니다.
- Shift 키를 누른 상태에서 드래그하여 가로 또는 세로 방향으로만 움직이도록 제한할 수 있습니다.
스테이지에서 요소를 조금씩 이동하는 방법:
- 조금씩 이동하고 싶은 요소를 하나 이상 선택합니다.
- 화살표 키를 누릅니다. 키를 누를 때마다 선택 항목이 화살표 키 방향으로 1픽셀씩 이동합니다.
- Shift 키를 누른 상태에서 화살표 키를 눌러 선택 항목을 10픽셀씩 이동할 수 있습니다.
요소 크기 조절
도구 옵션 패널에서 변환 컨트롤 체크박스가 선택되어 있으면 선택 도구에서 선택한 요소의 크기를 조절할 수 있습니다.
선택한 요소의 크기를 조절하는 방법:
- 툴바에서 선택
도구를 클릭합니다.
- 도구 옵션 패널에서 변환 컨트롤 체크박스가 선택되어 있는지 확인합니다.
- 개체를 선택합니다. 선택한 요소 주변에 파란색 상자가 표시됩니다.
- 선택 상자의 측면 및 모서리에 있는 제어점 중 하나를 드래그합니다.
- Shift 키를 누른 상태에서 드래그하여 선택 항목의 가로세로 비율을 원래대로 유지할 수 있습니다.
요소 회전
도구 옵션 패널에서 변환 컨트롤 체크박스가 선택되어 있으면 선택 도구에서 선택한 요소를 회전할 수 있습니다.
선택한 요소를 회전하는 방법:
- 툴바에서 선택
- 도구 옵션 패널에서 변환 컨트롤 체크박스가 선택되어 있는지 확인합니다.
- 개체를 선택합니다. 회전 컨트롤(고리 두 개가 중첩된 모양)이 선택한 요소의 중간에 나타납니다.
- 원하는 경우 회전 컨트롤의 안쪽 고리를 드래그하여 회전의 피봇 포인트를 이동합니다.
- 회전 컨트롤의 바깥쪽 고리를 드래그하여 선택 항목을 회전합니다.
- Shift 키를 누른 상태에서 드래그하여 45° 단위로 회전하도록 제한할 수 있습니다.
- Shift 키를 누른 상태에서 드래그하여 45° 단위로 회전하도록 제한할 수 있습니다.
다른 요소를 기준으로 요소 배치
도구 옵션 바의 컨트롤을 사용하여 스테이지에서 여러 개의 요소를 정렬하고 배치할 수 있습니다.
| 아이콘 | 컨트롤 | 설명 |
|---|---|---|
| 정렬: 상단 | 선택한 각 요소를 가장 상단에 있는 요소에 정렬합니다. | |
| 정렬: 세로 가운데 | 선택한 각 요소의 세로 가운데를 선택한 요소 전체의 세로 중점에 정렬합니다. | |
| 정렬: 하단 | 선택한 요소를 가장 하단에 있는 요소에 정렬합니다. | |
| 정렬: 왼쪽 가장자리 | 선택한 각 요소를 가장 왼쪽에 있는 요소에 정렬합니다. | |
| 정렬: 가로 가운데 | 선택한 각 요소의 가로 가운데를 선택한 요소 전체의 가로 중점에 정렬합니다. | |
| 정렬: 오른쪽 가장자리 | 선택한 각 요소를 가장 오른쪽에 있는 요소에 정렬합니다. | |
| 배치: 상단 | 선택한 각 요소를 직사각형 선택 영역 내에서 상단 가장자리 간격이 균등하도록 배치합니다. | |
| 배치: 세로 가운데 | 선택한 각 요소를 직사각형 선택 영역 내에서 세로 중점 간격이 균등하도록 배치합니다. | |
| 배치: 하단 | 선택한 각 요소를 직사각형 선택 영역 내에서 하단 가장자리 간격이 균등하도록 배치합니다. | |
| 배치: 왼쪽 | 선택한 각 요소를 직사각형 선택 영역 내에서 왼쪽 가장자리 간격이 균등하도록 배치합니다. | |
| 배치: 가로 가운데 | 선택한 각 요소를 직사각형 선택 영역 내에서 가로 중점 간격이 균등하도록 배치합니다. | |
| 배치: 오른쪽 | 선택한 각 요소를 직사각형 선택 영역 내에서 오른쪽 가장자리 간격이 균등하도록 배치합니다. | |
| 간격: 세로 | 선택한 각 요소를 요소 간의 세로 간격이 동일하도록 배치합니다. 선택한 요소의 총 세로 크기가 직사각형 선택 영역의 세로 크기보다 큰 경우 간격이 음수로 적용됩니다. | |
| 간격: 가로 | 선택한 각 요소를 요소 간의 가로 간격이 동일하도록 배치합니다. 선택한 요소의 총 가로 크기가 직사각형 선택 영역의 가로 크기보다 큰 경우 간격이 음수로 적용됩니다. |
컨테이너에 정렬
컨테이너에 정렬 체크박스를 선택하면 정렬, 배치 및 간격 컨트롤에서 요소 위치가 직사각형 선택 영역이 아니라 포함 요소를 기준으로 지정됩니다. 즉, 선택한 요소가 컨테이너 가장자리 또는 중앙을 기준으로 정렬되고, 컨테이너 전체에 걸쳐 균일하게 배치되며, 컨테이너 내에서 균일하게 간격이 지정됩니다.
여기서 선택한 요소가 중첩되지 않은 경우 스테이지가 컨테이너 역할을 합니다.
레이어 재정렬
Google Web Designer의 각 요소는 스택에 쌓인 레이어처럼 동작합니다. 스택에서 더 상단에 있는 요소는 자신보다 아래에 있는 요소를 가립니다. 요소를 앞뒤로 옮기려면 선택 도구로 요소를 선택하고 다음 레이어 버튼을 사용합니다.
| 아이콘 | 레이어 재정렬 | 설명 |
|---|---|---|
| 앞으로 가져오기 | 선택한 요소를 한 단계 앞으로 가져옵니다(다른 요소 1개 위로). | |
| 뒤로 보내기 | 선택한 요소를 한 단계 뒤로 보냅니다(다른 요소 1개 아래로). | |
| 맨 앞으로 가져오기 | 선택한 요소를 맨 앞으로 가져옵니다(다른 모든 요소보다 위로). | |
| 맨 뒤로 보내기 | 선택한 요소를 맨 뒤로 보냅니다(다른 모든 요소보다 아래로). |
고급 모드의 타임라인을 사용하여 레이어를 재정렬할 수도 있습니다.