이 섹션에서는 Bubble 편집기의 Design 탭에서 찾을 수 있는 요소 트리에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
요소에 관한 섹션에서 살펴본 것처럼 페이지에 배치하는 모든 객체는 해당 페이지의 계층 구조의 일부가 됩니다. 다른 방법으로 설명하면 부모-자식 관계입니다. 그룹 내에 배치하는 모든 요소는 해당 그룹의 하위 항목이 됩니다.
요소 트리는 현재 페이지에 있는 모든 요소를 부모-자식 관계로 구성하여 표시합니다. 최상위 부모 요소는 페이지이며 해당 페이지에 배치한 모든 그룹 및 요소는 해당 페이지의 자식입니다.
Element tree modes
요소 트리에는 두 가지 모드가 있습니다. 페이지의 모든 요소를 부모 및 자식으로 표시하는 트리 뷰 또는 숨길 수 있는 요소만 표시하는 옵션입니다. 숨길 수 있는 요소는 해당 요소의 속성 편집기에서 '이 요소는 페이지 로드 시에 표시되지 않습니다'란 체크 박스를 선택한 요소입니다.
Only show hideable elements 확인란을 선택하면 숨겨진 요소를 빠르게 식별할 수 있습니다.
다른 말로하면 'only show hideable elements' 옵션이 선택된 경우 이 요소만 목록에서 볼 수 있습니다. 이 기능은 페이지를 편집할 때 유용하며, 편집 목적으로 표시되지 않는 요소를 빠르게 표시할 수 있습니다. 다른 모드는 페이지의 전체 뷰를 얻는 데 유용합니다.
Moving elements in the hierarchy
요소 트리는 요소의 계층 구조에서의 위치를 표시합니다. 요소가 그룹 내에 배치된 경우 해당 그룹의 하위 요소로 표시됩니다.
파란색 선은 계층 구조에서 어디에 있는지를 보여줍니다.
요소 트리에서 요소를 드래그하여 계층 구조에서 위치를 변경할 수 있습니다. 예를 들어 한 그룹에서 다른 그룹으로 드래그할 수 있습니다. 다른 요소를 포함하는 그룹을 드래그하면 해당하는 모든 요소가 함께 이동합니다.
