에디터 X: 페이지 구조 정보 (상위, 하위 및 형제 요소)

사이트에서 페이지를 구성할 때에는 기본적으로 컨테이너 내부에 요소를 중첩하게 됩니다. 예를 들어, 컨테이너 상자 안에 텍스트를 배치할 수 있습니다. 이는 Modern HTML 및 CSS 개념에서 파생된 요소와 상위 컨테이너 간의 관계를 생성합니다. 

이 도움말에서는 이러한 관계와 이를 활용해 반응형 사이트를 제작하는 방법을 알아봅니다.

요소가 컨테이너(예: 섹션, 컨테이너 상자, 레이아웃터 등) 내부에 배치되면, 요소를 첨부하고 상위-하위 관계를 생성합니다. 예를 들어, 머리글에 로고를 추가하면 로고는 자동으로 가장 가까운 모서리에 고정되어 머리글의 "하위"가 됩니다.  

CSS와 마찬가지로 상위 컨테이너의 디자인(예: 크기, 위치, 여백 등)은 하위 요소에 영향을 미칩니다. 예를 들어, 컨테이너에 여백을 추가하면 변경 사항을 수용하기 위해 내부의 요소가 더 작아집니다.

사이트 디자인을 계획할 때에는 레이어 구조부터 시작하는 것이 중요합니다. 상위 컨테이너를 먼저 생성한 후 하위 요소를 올바른 위치에 끌어다 놓아 추가하는 것이 좋습니다.

에디터 X에서 생성한 구조는 레이어 패널에 반영됩니다. 다음 레이어는 사이트 구조를 구성합니다.

하위 요소를 새 상위 컨테이너로 이동할 때 이를 "상위 변경"이라고 합니다. 요소의 상위 요소를 변경하려면, 새 상위 요소 내부로 끌어다 놓습니다. 

페이지의 모든 섹션, 컨테이너, 요소에는 계층 구조 내에서의 위치를 나타내는 사이트 경로가 있습니다. 사이트 경로를 클릭해 페이지 레이어를 쉽게 탐색할 수 있습니다. 

형제 요소란 동일한 직계 상위 요소를 공유하는 요소입니다. 예를 들어, 이 컨테이너 내부의 텍스트와 버튼은 컨테이너가 상위 요소이므로 형제 요소가 됩니다. 

형제 요소가 플렉스박스 컨테이너에 있는 경우(예: 스택, 레이아웃터, 반복 레이아웃), 서로의 크기와 위치에 영향을 줄 수 있습니다. 이 관계를 디자인하면 더 작은 화면 크기에서도 요소가 겹치는 것을 방지할 수 있으므로 반응형 사이트를 제작할 때 유용할 수 있습니다.  

아래 예제에서는 형제 요소 사이에 자동으로 생성되는 여백을 확인할 수 있습니다.

레이어 패널을 사용하면 페이지의 요소, 컨테이너 및 섹션 간의 관계(계층 구조)를 확인하고 필요에 따라 이동할 수 있습니다.

페이지 계층 구조는 사이트의 HTML 구조의 일부이므로 변경 사항이 모든 중단점에 반영됩니다. 예를 들어, 상위 요소와 하위 요소(예: 텍스트 및 컨테이너)를 분리하면, 해당 분리는 모든 중단점에 적용됩니다.