42. The element hierarchy, the element tree (초급) : 버블 element(요소) 계층구조의 이해, element(요소) tree 보기

이 섹션에서는 페이지에 element(요소)를 추가할 때 페이지에서 구조화되는 계층구조의 원리에 대해 알아보고 디자인 탭의 element tree에 대해 다룹니다.

 

(1) 버블의 element 계층 구조

Bubble 페이지는 세 가지 유형의 component(구성요소)로 구성되어 있습니다.

 

1. 페이지(html page)

• 페이지는 웹 페이지의 최상위 구성 요소이며 페이지의 Group(그룹)과 element(요소)의 구성으로 이루어져 있습니다.
• 페이지는 모든 요소의 최상위 컨테이너(Container)입니다.

 

2. 컨테이너(Container)인 그룹(Group)

Group(그룹)은 element(요소)들을 서로 묶고 해당 레이아웃을 제어하는 데 사용됩니다.

• 다른 element(요소)를 포함하는 "상자"로 생각할 수 있습니다.
• 스타일을 지정하거나 사용자에게 보이지 않게 설정 할 수 있으며 element(요소) 및 다른 Group(그룹)을 포함하여 계층 구조를 만들 수 있습니다.
• 다른 element(요소)의 동작 방식을 결정하므로 페이지 디자인의 주요 부분입니다.
• Group(그룹)은 element(요소) 및 하위 그룹의 Container(컨테이너)입니다.

 

3. element(요소)

element(요소)는 버튼, 링크, 이미지, 아이콘 및 입력 필드와 같이 사용자가 앱에서 작업하기 위해 직접 보고 상호작용하는 실제 콘텐츠입니다. 

• 사용자가 페이지에서 상호 작용하는 것이 element(요소)입니다.
• 이러한 components(구성요소)를 조합하고 스타일을 지정하는 방식에 따라 전체 레이아웃과 디자인이 결정됩니다. 기술적인 관점으로 보면, 이들은 페이지의 계층구조를 구성합니다.
• 계층구조란 웹브라우저가 결과를 화면에 렌더링하기 전에 페이지를 보는 방법이라고 생각할 수 있습니다.

 

(2) 버블의 Element Tree

element(요소)에 대한 섹션에서 살펴본 것처럼 page(페이지)에 배치한 모든 개체는 해당 페이지 계층 구조의 일부가 됩니다. 이를 설명하는 또 다른 방법은 parent-children(부모-자식) 관계로, 그룹 내에 배치하는 모든 element(요소)는 해당 그룹의 자식이 됩니다.

 

• element 트리는 parent-children(부모-자식) 관계로 구성된 현재 페이지의 모든 element(요소)를 표시합니다.
• 맨 위 최상위 요소는 page(페이지)이고 해당 페이지에 배치하는 모든 Group(그룹)과 element(요소)는 해당 페이지의 하위 요소입니다.

 

1. element tree mode

elemet 트리에는 두 가지 모드가 있습니다.

1) 전체보기 모드 : 부모 - 자식 element와 함께 페이지의 모든 요소를 트리 보기로 표시

• 전체 보기 모드는 페이지 전체를 보는 데 유용합니다.

숨길 수 있는 요소만 보기

2) 숨길 수 있는 요소만 보기 모드 ( 체크박스 only show hideable elements 선택)

• 숨길 수 있는 요소는 페이지 로드 시 숨겨지는 요소입니다.
• 해당 element의 property 편집기에서 보면 ‘This is element is visible on page load(페이지 로드 시 이 요소가 표시됨)' 체크박스를 선택 취소한 경우
• only show hideable element (*숨길 수 있는 요소만 보여줌 )*표시를 선택하면 숨겨진 요소를 빠르게 식별할 수 있습니다. 즉, 이 옵션을 선택하면 목록에 이러한 요소만 표시됩니다.
• 이 기능은 편집 목적으로 보이지 않는 요소를 빠르게 표시할 수 있기 때문에 페이지를 편집할 때 유용합니다.

 

2. 계층 구조에서 element 이동

element(요소) 트리는 계층구조에서 element(요소)의 위치를 보여줍니다. element(요소)가 그룹 내에 배치되면 해당 Group의 하위 항목으로 트리에 표시됩니다.

 

• 파란색 선은 계층구조에서 현재위치를 보여줍니다.
• element(요소) 트리에서 element(요소)를 끌어서 놓아 계층 구조에서 해당 위치를 변경할 수 있습니다.
• 예를 들어 한 그룹에서 다른 그룹으로 드래그할 수 있습니다.
• 다른 element(요소)가 포함된 그룹을 드래그하면 모든 해당 element(요소)가 함께 이동됩니다.

트리구조에서 요소 이동