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

3 분 분량
페이지 메뉴
  • 요소 간의 상위-하위 관계
  • 페이지 구조 생성하기
  • 페이지의 레이어
  • 요소 상위 변경하기
  • 계층 구조에서 요소 위치 찾기
  • 형제 요소 구조화하기
  • 중단점에서의 구조 변경
사이트 페이지 구성 시에는 기본적으로 섹션 및/또는 컨테이너와 레이아웃 도구 내에 요소를 중첩하게 됩니다. 예를 들어, 컨테이너 상자 안에 텍스트를 배치하면 Modern HTML 및 CSS 개념에서 유래한 텍스트와 컨테이너 사이에 관계가 생성됩니다. 
이 도움말을 사용해 요소, 페이지 레이어 등의 상위-하위 관계를 포함해 페이지 구조에 대한 자세한 내용을 확인하세요.

요소 간의 상위-하위 관계

컨테이너 또는 레이아웃 도구 내부에 요소를 배치하면, 해당 도구 또는 컨테이너에 추가됩니다. 이는 상위-하위 관계를 생성합니다. 예를 들어, 머리글에 로고를 추가하면 로고가 '하위', 머리글이 '상위' 요소가 됩니다.  
CSS와 마찬가지로 상위 컨테이너의 디자인(예: 크기, 위치, 여백 등)은 하위 요소에 영향을 미칩니다. 예를 들어, 컨테이너에 여백을 추가하면 변경 사항을 수용하기 위해 내부의 요소가 더 작아집니다. 요소 크기 조정에 대한 자세한 도움말을 확인하세요.
참고:
  • 추가하는 새 요소는 자동으로 상위 요소의 상단과 왼쪽/오른쪽에 도킹됩니다. Studio 에디터에서 자동 도킹을 비활성화해 하위 요소의 위치를 수동으로 조정할 수 있습니다.
  • 요소를 스택할 경우, 상위 요소 역할을 하는 플렉스박스 내부에 배치됩니다.

페이지 구조 생성하기

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

페이지의 레이어

Studio 에디터에서 생성한 구조는 레이어 패널에 반영됩니다. 다음 레이어는 사이트의 구조를 구성합니다.
  • 페이지: 레이어 패널에서 페이지 배경 색상을 편집하고 여백을 추가할 수 있습니다. 페이지 이름 옆 추가 작업 아이콘을 클릭해 설정을 제어하세요.
  • 섹션: 모든 페이지는 하나 이상의 섹션으로 구성되어 있으며, 클라이언트가 필요로 하는 만큼 섹션을 추가할 수 있습니다. 대부분의 섹션에는 레이아웃 도구와 컨테이너가 포함되어 있습니다(예: 셀, 스택 등).
  • 컨테이너 및 레이아웃 도구: 컨테이너 내에 요소를 중첩해 반응형 구조를 쉽게 생성하고 제자리에 유지되도록 합니다. 컨테이너를 추가하거나 반복 레이아웃 또는 플렉스박스 등과 같은 레이아웃 도구를 추가하세요.
  • 요소: 요소 추가 패널에서 추가하는 요소(예: 텍스트, 버튼, 미디어 등)입니다. 단일 요소를 도킹하거나 여러 요소를 스택해 화면 크기 전체에서 일관된 순서와 간격을 보장하세요.
에디터의 레이어 패널. 환영 섹션이 선택되어 있습니다.

요소 상위 변경하기

하위 요소를 새 상위 요소로 이동하는 것을 "상위 변경"이라고 합니다. 요소의 상위 요소를 변경하려면, 새 상위 요소 내부로 끌어다 놓으세요. 

계층 구조에서 요소 위치 찾기

페이지의 모든 섹션, 컨테이너 및 요소에는 계층 구조에서의 위치를 나타내는 사이트 이동 경로가 있습니다. 캔버스에서 사이트 이동 경로를 클릭해 이러한 레이어 간을 쉽게 탐색할 수 있습니다. 
캔버스의 햄버거 메뉴 버튼. 사이트 이동 경로가 강조 표시되어 있습니다.

형제 요소 구조화하기

형제 요소란 동일한 직계 상위 요소를 공유하는 요소입니다. 예를 들어, 아래 이미지의 텍스트와 벡터아트는 형제 요소이며, 컨테이너는 상위 요소입니다. 
Studio 에디터의 텍스트 및 벡터아트와 같은 여러 형제 요소가 있는 컨테이너
형제 요소가 특정 레이아웃 도구(예: 스택, 반복 레이아웃 등)에 있는 경우, 서로의 크기 및 위치에 영향을 미칠 수 있습니다. 이 관계를 디자인하면 작은 화면 크기에서 요소가 겹치는 것을 방지할 수 있으므로 반응형 사이트를 제작할 때 유용할 수 있습니다.  
아래 예제에서는 형제 요소 사이에 자동으로 생성되는 여백을 확인할 수 있습니다.
에디터에서 컨테이너를 드래그하는 것을 보여주는 GIF. 첨부된 벡터아트도 함께 이동하고 있습니다.

중단점에서의 구조 변경

레이어 패널은 페이지 콘텐츠(섹션, 컨테이너 / 레이아웃 도구 및 요소)의 계층 구조를 표시하며 필요에 따라 조정할 수 있습니다.
페이지 계층 구조는 사이트의 HTML 구조의 일부이므로 변경 사항이 모든 중단점에 반영됩니다. 예를 들어, 상위 요소와 하위 요소(예: 텍스트 및 컨테이너)를 분리하면, 해당 분리는 모든 중단점에 적용됩니다. 중단점 전반에 걸친 디자인에 대한 자세한 도움말을 확인하세요.