탐색기 사이드바

Explorer는 Designer에서 진행 중인 페이지의 콘텐츠를 구조화된 트리 형식으로 표시합니다. 캔버스에서 선택하기 어려운 구성 요소를 포함하여 특정 페이지의 모든 구성 요소를 선택할 수 있습니다. Explorer에서는 요소를 재정렬하고 구성 요소의 구조. 구조의 변화는 캔버스에 즉시 반영됩니다.

이 튜토리얼을 통해 다음 내용을 알아볼 수 있습니다. 

1. Explorer 사이드바에 액세스하고 고정하고 크기를 조정하는 방법
2. Explorer를 통해 구성 요소를 선택하는 기술
3. Explorer에서 고유한 구성 요소를 구별하는 전략
4. 탐색기를 사용하여 구성 요소를 재배치하는 방법

Explorer 사이드바 액세스, 고정 및 크기 조정

Explorer 사이드바는 측면 도구 모음에 있습니다. 측면 패널에 있는 아이콘을 클릭하거나 키보드에서 Z를 눌러 탐색기를 전환할 수 있습니다. 고정 해제된 경우 요소를 측면 패널의 해당 아이콘으로 드래그하여 탐색기를 열 수도 있습니다.

1440px보다 작은 화면에서는 위치를 변경할 요소를 드래그하는 동안 Explorer가 오른쪽(오른쪽 패널 위)을 확장합니다.

Explorer 고정

1440px보다 넓은 브라우저에서는 Explorer를 고정하여 항상 표시되도록 하는 옵션이 있습니다. 이를 통해 내부에 요소를 쉽게 배치하고 요소와 신속하게 상호 작용할 수 있습니다.

Explorer를 고정하려면 Explorer의 상단 도구 모음에 있는 앵커 아이콘을 클릭하세요. 앵커를 해제하려면 탐색기 도구 모음에서 앵커 해제 아이콘을 선택하세요.

탐색기 크기 조정

고정되면 탐색기 패널의 너비를 조정할 수 있습니다.

Explorer의 크기를 조정하려면 고정되어 있는지 확인한 다음 오른쪽 가장자리 위로 마우스를 가져간 후 나타나는 파란색 선을 드래그하세요.

현재 페이지의 요소 보기

Explorer는 또한 페이지 계층 구조를 시각화하고 어떤 구성 요소가 다른 구성 요소 내에 중첩되어 있는지 식별하는 수단으로도 작동합니다.

상위 구성 요소를 확장하거나 축소할 수 있습니다. 상위 구성 요소를 확장하면 그 안에 있는 하위 구성 요소가 표시되고 들여쓰기됩니다. 모두 축소를 선택하여 최상위 상위 구성 요소만 보거나 모두 확장을 선택하여 페이지의 모든 요소를 표시할 수도 있습니다.

상위 구성요소를 확장하거나 축소하려면 '비녀장” 아이콘 ▸ 구성 요소 왼쪽에 있습니다.

모든 구성 요소를 확장하거나 축소하려면 탐색기 도구 모음에서 확장/축소 아이콘을 클릭하세요.

내부자 팁: 누르다 대체/옵션 + 지 키보드에서 모든 항목을 빠르게 확장하거나 축소하려면 탐침 구성 요소.

Explorer를 통해 구성 요소 선택

Explorer에서 다양한 구성 요소 위로 마우스를 가져가면 캔버스에서 해당 구성 요소가 강조 표시됩니다. 반대로 캔버스 요소 위로 마우스를 가져가면 탐색기에서 요소가 강조 표시됩니다.

탐색기에서 구성 요소를 클릭하여 선택합니다. Explorer에서 오프스크린 구성 요소를 선택하면 캔버스가 해당 구성 요소로 자동 스크롤됩니다. 구성 요소를 선택한 후에는 스타일 패널에서 스타일을 지정하거나 구성 요소 설정 패널에서 해당 설정을 구성할 수 있습니다. 또한 상호작용 패널을 통해 상호작용을 생성할 수도 있습니다.

Explorer를 통해 구성 요소를 선택하면 구성 요소의 계층 구조, 상위 및 형제 항목을 인식하는 데 도움이 됩니다. 이 지식은 상호 작용을 만들 때 매우 중요할 수 있습니다.

캔버스를 통해 액세스할 수 없는 구성 요소 선택

Explorer는 캔버스에서 선택하기 어렵거나 불가능한 구성 요소를 선택할 때 특히 유용합니다. 여기에는 Display 속성이 없음으로 설정된 요소나 음수 Z-색인이 있는 구성 요소가 포함됩니다.

Explorer에서 고유 구성 요소 식별

Explorer에서 일부 구성 요소의 왼쪽에는 컬러 아이콘이 있고 다른 구성 요소의 오른쪽에는 아이콘이 있는 것을 볼 수 있습니다. 이는 고유한 지표 역할을 합니다. 이는 정적 구성요소와 동적 구성요소 또는 자동 위치 지정 및 고정된 그리드 하위 항목을 신속하게 구별하는 데 도움이 됩니다. 또한 이러한 아이콘을 사용하면 상호 작용을 트리거하는 구성 요소나 캔버스에 숨겨진 구성 요소를 즉시 식별할 수 있습니다.

탐색기의 아이콘은 구성 요소에 대한 중요한 세부 정보를 전달합니다. 

• 녹색 "상자" 아이콘(왼쪽) — 구성 요소가 모듈입니다.
• 녹색 "상자" 아이콘(오른쪽) — 구성 요소가 편집 모드에서 열린 모듈입니다.
• 보라색 아이콘(왼쪽) — 구성 요소가 컬렉션 목록이거나 컬렉션 필드에 연결되어 있거나 조건이 적용되어 있습니다.
• "해시" 아이콘 #(오른쪽) — 요소가 그리드의 셀이나 영역에 고정된 그리드 하위 요소입니다.
• "눈 슬래시" 아이콘(오른쪽) — 구성 요소의 표시가 숨김으로 설정되어 있으며 캔버스에 표시되지 않습니다.
• 번개 아이콘(오른쪽) — 구성 요소에 상호 작용 트리거가 있습니다.
• “지구본” 아이콘(오른쪽) — 구성 요소가 현재 로케일 보기에서 현지화되었습니다.

탐색기를 사용하여 구성 요소 이동

구성 요소는 캔버스에서 직접 이동할 수 있지만 때로는 탐색기에서 구성 요소를 이동할 때 구조를 시각화하는 것이 도움이 되는 경우가 있습니다. 예를 들어, 탐색기 내에서 구성 요소를 끌어 형제 구성 요소(동일한 상위를 공유하는 구성 요소)를 다시 정렬할 수 있습니다. 페이지의 섹션은 그 안에 있는 모든 하위 구성 요소와 함께 이동할 수도 있습니다.

Explorer는 페이지 계층 구조 변경을 단순화합니다. 이 작업은 캔버스에서 어려울 수 있으며, 특히 비슷한 크기의 중첩된 구성 요소의 경우 더욱 그렇습니다. 그러나 Explorer에서는 즉시 하위 구성 요소를 가져와 상위 구성 요소 외부에 배치할 수 있습니다. 마찬가지로 구성 요소를 클릭하고 다른 요소로 끌어서 구성 요소를 중첩할 수 있습니다.