Studio Two 에디터: 위치 및 간격 조정하기

세로 간격, 도킹 및 여백을 사용해 섹션이나 컨테이너 안에서 요소가 배치되는 방식을 조정할 수 있습니다. 화면 중단점마다 요소 사이의 간격이 유지되도록 자동으로 설정하거나, 도킹과 여백을 세밀하게 조정하려면 수동으로 전환합니다.

그런 다음 방문자가 페이지를 스크롤할 때 요소가 작동하는 방식을 선택합니다. 기본 위치를 유지하거나 뷰포트에 고정되도록 설정하거나 특정 위치에 핀으로 고정할 수 있습니다.

Studio Two 에디터의 섹션과 컨테이너에는 화면 중단점이 달라져도 내부 요소의 위치를 유지하는 데 도움이 되는 세로 간격 설정이 있습니다. 세로 간격을 자동 또는 수동으로 설정할 수 있습니다.

기본적으로 세로 간격은 자동으로 설정되므로 에디터에서 간격을 자동으로 조정합니다. 각 하위 요소를 상단이나 하단에 도킹하거나 화면 중단점마다 상단 및 하단 여백을 조정하지 않아도 레이아웃을 유지할 수 있습니다.

1. 에디터로 이동합니다.

2. 상단에서 데스크톱 아이콘을 클릭합니다.

3. 해당 상위 요소(예: 섹션, 컨테이너)를 선택합니다.

4. 에디터 오른쪽 상단에서 검사창 열기 아이콘을 클릭합니다.

5. 검사창의 레이아웃 아래에서 세로 간격까지 스크롤합니다.

6. 세로 간격 드롭다운에서 원하는 옵션을 선택합니다.

   • 자동: 모든 화면 크기에서 섹션 또는 컨테이너 내 요소 사이의 세로 간격이 자동으로 유지됩니다.

   • 수동: 모든 화면 크기에서 요소 사이의 간격이 올바르게 유지되도록 섹션 또는 컨테이너에 있는 각 요소의 도킹과 여백을 직접 설정합니다.

페이지에 새 요소를 추가하면 가장 가까운 모서리에 자동으로 도킹됩니다. 따라서 다시 도킹할 필요 없이 캔버스에서 요소를 자유롭게 드래그할 수 있습니다. 도킹 지점을 세밀하게 조정하려면 언제든지 수동 도킹으로 전환할 수 있습니다.

도킹을 설정한 후 여백을 추가해 요소 주변의 공간을 조정하고 상위 요소의 가장자리와 일정한 거리를 유지합니다.

1. 에디터로 이동합니다.

2. 해당 요소를 선택합니다.

3. 에디터 오른쪽 상단에서 속성 검사 패널 열기 아이콘을 클릭합니다.

1. 아직 열려 있지 않은 경우 디자인 탭을 클릭하고 위치까지 아래로 스크롤합니다.

2. 요소의 도킹 설정 방법을 선택합니다.

   • 자동: 요소 자동 도킹 옆의 체크박스를 선택된 상태로 유지합니다.

   • 수동: 요소 자동 도킹 옆의 체크박스를 선택 해제합니다. 그런 다음, 원하는 도킹 지점을 클릭해 요소를 도킹하거나 도킹을 해제합니다. 왼쪽 , 오른쪽, 상단 또는 하단

3. (선택사항) 요소가 도킹된 방향(왼쪽, 오른쪽, 상단 또는 하단)의 여백 값을 입력합니다.
   참고: 요소의 상위 요소(예: 컨테이너, 셀)의 세로 간격이 자동으로 설정된 경우 상단 및 하단 여백이 비활성화됩니다. 이 경우 요소의 세로 여백은 캔버스에서의 위치에 따라 달라집니다.

방문자가 페이지를 위아래로 스크롤할 때 요소 또는 섹션이 표시되는 방식을 선택합니다. 기본 위치를 유지하거나, 뷰포트에 고정하거나, 페이지를 스크롤하는 동안 특정 위치에 머물도록 설정할 수 있습니다.

1. 에디터로 이동합니다.
2. 해당 요소 또는 섹션을 선택합니다.
3. 액션바에서 모든 디자인 옵션 아이콘을 클릭합니다.
4. 속성 검사 패널의 드롭다운에서 위치 유형을 선택한 후 설정합니다.

아래 질문을 클릭해 자세한 내용을 확인하세요.