아웃라이너는 문서에 있는 요소와 클립의 트리 보기를 제공합니다. 아웃라이너 패널은 창 메뉴에서 전환할 수 있습니다.
아웃라이너의 요소 목록에는 스테이지의 요소와 동일한 기능이 일부 포함되어 있습니다. 예를 들어 아웃라이너의 요소를 클릭하여 선택하고 요소를 마우스 오른쪽 버튼으로 클릭하여 그 요소에 해당하는 명령의 팝업 메뉴를 볼 수 있으며, 수정 대화상자가 있는 구성요소를 더블클릭하여 대화상자를 열 수 있습니다.
정리
페이지가 있는 HTML5 광고와 HTML 문서의 경우 아웃라이너는 문서의 각 페이지 아래에 요소를 정리해 놓습니다. 그룹 수정 모드에서는 그룹의 요소만 볼 수 있습니다.
기본적으로 아웃라이너는 고급 모드 타임라인의 레이어와 같은 순서로 요소를 나열합니다. 디자인 보기 환경설정에서 DOM 순서로 전환할 수 있습니다.
요소 펼치기 또는 접기: 아웃라이너의 요소 옆에 있는 화살표를 클릭하면 중첩된 요소를 표시하거나 숨길 수 있습니다.
중첩된 모든 요소를 펼치기 또는 접기: 요소 옆에 있는 화살표를 더블클릭하면 요소 아래 나열된 모든 요소를 펼치거나 접을 수 있습니다. Ctrl(Windows) 키 또는 ⌘ 키나 Alt(Mac) 키를 누른 상태에서 화살표를 클릭해도 같은 효과가 나타납니다.
요소 재정렬: 요소를 목록 내에서 원하는 위치로 드래그합니다. 요소가 이동할 위치에 노란색 선이 표시됩니다. 하위 요소를 다른 상위 요소로 드래그할 수도 있습니다.
요소 중첩: 요소를 새 상위 요소 위로 드래그하여 다른 요소 안에 중첩할 수 있습니다. 가능한 상위 요소 주위에 노란색 상자가 표시됩니다.
선택 항목
선택 항목은 스테이지, 고급 모드 타임라인, 아웃라이너에서 미러링되며 한곳에서 요소를 선택하면 다른 곳에서도 요소가 선택됩니다. 필요한 경우 Google Web Designer는 중첩된 요소 내의 다양한 수준이나 페이지로 전환됩니다. 현재 상위 요소의 라벨은 노란색으로 표시됩니다.
요소 선택: 요소를 클릭하여 선택합니다.
여러 요소 선택: 같은 상위 요소를 공유하는 경우 여러 개의 요소를 선택할 수 있습니다.
- Ctrl(Windows) 또는 ⌘(Mac) 키를 누른 상태에서 선택 항목에 추가하려는 요소를 클릭합니다.
- 요소의 범위를 선택하려면 첫 번째 요소를 클릭한 다음 Shift 키를 누른 상태에서 마지막 요소를 클릭합니다.
요소 선택 취소: Ctrl(Windows) 또는 ⌘(Mac) 키를 누른 상태에서 선택 항목에서 제거하려는 요소를 클릭합니다.
요소 내 탐색: 요소를 더블클릭하고 내부를 탐색하면 이는 현재의 상위 요소가 됩니다. 기존 하위 요소를 수정하거나 새 요소를 상위 요소 아래에 중첩할 수 있습니다. 요소가 수정 대화상자를 포함한 구성요소인 경우 더블클릭하면 대화상자가 열립니다.
요소 유형 및 상태
각 요소의 아웃라이너에는 요소 ID, 이름 또는 텍스트 콘텐츠와 함께 요소 유형을 나타내는 아이콘이 표시됩니다(있는 경우). 아웃라이너에는 다음과 같은 상태 아이콘도 표시됩니다.
- 요소에 동적 데이터 결합이 있으면 다이아몬드 아이콘이 표시됩니다.
- 가이드 레이어는 클릭하여 가이드 레이어를 다시 일반 요소로 변환할 수 있는 아이콘을 표시합니다.
- 숨겨졌거나 잠긴 요소는 상태 아이콘으로 표시되며, 이 아이콘을 클릭하여 요소의 숨김 또는 잠금을 해제할 수 있습니다. 표시되거나 잠금 해제된 요소 위로 마우스를 가져가면 요소를 숨기거나 잠글 수 있는 아이콘이 표시됩니다.
각 요소 유형의 아이콘
페이지
| 기본 페이지 | |
| 페이지 |
요소
| 그룹 | |
| Div | |
| 이미지 | |
| amp-img(AMP 문서의 이미지) | |
| 동영상 요소 | |
| 텍스트 컨테이너 | |
| 숫자가 지정된 목록 | |
| 글머리 기호 목록 | |
| 링크 |
도형
| 펜 도구로 그린 경로 | |
| 직사각형 | |
| 타원 | |
| 선 |
구성요소
| 동작 구성요소 | |
| 이미지 버튼 구성요소 | |
| Parallax 구성요소 | |
| 탭 영역 구성요소 | |
| 탭하여 통화/문자 구성요소 | |
| 360° 갤러리 구성요소 | |
| 회전 갤러리 구성요소 | |
| 갤러리 탐색 구성요소 | |
| 스와이프할 수 있는 갤러리 구성요소 | |
| 전환 갤러리 구성요소 | |
| amp-carousel 구성요소 | |
| 오디오 구성요소 | |
| 동영상 요소 | |
| YouTube 구성요소 | |
| 3D 모델 뷰어 구성요소 | |
| 이미지 효과 구성요소 | |
| 입자 효과 구성요소 | |
| 스프라이트 시트 구성요소 | |
| 소용돌이 구성요소 | |
| 버튼 구성요소 | |
| 체크박스 구성요소 | |
| 드롭다운 구성요소 | |
| 라벨 구성요소 | |
| 숫자 입력 구성요소 | |
| 라디오 버튼 구성요소 | |
| 슬라이더 구성요소 | |
| 텍스트 입력란 구성요소 | |
| 캘린더에 추가 구성요소 | |
| 날짜 대체 구성요소 | |
| 지도 구성요소 | |
| 스트리트 뷰 구성요소 | |
| iFrame 구성요소 | |
| 별표 평점 구성요소 |
배경화면 요소
| 직사각형 배경화면 모양 | |
| 타원형 배경 모양 | |
| 다각형 배경화면 모양 |
클립
| 오디오 클립 | |
| 동영상 또는 이미지 클립 |
상태 아이콘
| 동적 또는 변형 결합 있음 | |
| 가이드 레이어 | |
| 숨겨짐/표시됨(마우스 오버 시 표시됨) | |
| 잠김/잠금 해제됨(마우스 오버 시 표시됨) |
필터링
아웃라이너에 표시되는 요소의 목록을 필터링할 수 있습니다. 요소가 필터와 일치하면 상위 요소와 다른 상위 요소도 표시되므로 일치하는 요소가 문서 구조에서 어디에 위치하는지 알 수 있습니다.
요소를 필터링하려면 아웃라이너 패널 상단의 돋보기 옆에 있는 공간을 클릭하고 요소 ID, 이름 속성 값, 태그 이름 또는 그룹 이름의 일부를 입력합니다. 텍스트 요소는 텍스트 콘텐츠를 기반으로도 일치 항목이 표시됩니다. 애셋의 이름을 입력하면 해당 애셋을 사용하는 구성요소가 표시됩니다.
또한 요소 유형 필터를 사용할 수도 있습니다.
요소 유형 필터
아웃라이너는 텍스트나 도형과 같은 특정 요소 유형만을 표시하기 위한 필터를 포함하고 있습니다. 패널 상단에서 아웃라이너에 표시하려는 요소 유형의 아이콘을 클릭합니다. 여러 요소 유형 필터가 활성 상태인 경우 활성 필터와 일치하는 모든 요소를 볼 수 있습니다.
요소 유형 필터 아이콘
| 이미지 및 동영상 표시 | |
| 구성요소 표시 | |
| 텍스트 표시 | |
| 도형 표시 |