Studio 에디터: 도킹, 바깥 및 안쪽 여백 사용하기

끊임없이 변화하는 기기의 세계에서 다양한 화면 크기에서 원하는 대로 표시되도록 요소의 위치를 제어하는 것이 중요합니다. Studio 에디터에서는 이를 위해 요소를 자동으로 도킹합니다.

이는, 중단점 간에 배치하는 것에 대해 걱정할 필요 없이 요소를 자유롭게 이동할 수 있도록 합니다. 하지만, 언제든지 속성 패널에서 위치, 도킹 및 여백을 직접 설정할 수 있습니다.

드래그-앤-드롭을 사용해 각 중단점에서 개별적으로 캔버스에서 직접 요소의 위치를 설정할 수 있습니다. 이를 통해 요소가 모든 화면에서 제자리에 정확하게 표시되도록 할 수 있습니다. 

요소가 동일한 상위 요소(예: 섹션, 셀)에 유지되는 한, 다른 중단점에 영향을 미치지 않고 요소를 이동할 수 있습니다. 요소를 다른 상위 요소(상위 변경)로 이동하면 모든 중단점에 적용됩니다. 

요소의 X 및 Y 좌표를 확인해 현재 캔버스 크기에서 정확한 위치를 확인할 수 있습니다. 

아래 예제에서는 텍스트 요소를 상위 요소인 셀 외부로 이동함에 따라 px* 값이 음수로 바뀌는 것을 볼 수 있습니다. 

에디터에서 새 요소를 추가하면 모든 화면과 기기에서 제자리에 유지될 수 있도록 자동으로 도킹됩니다. 하지만, 언제든지 자동 도킹을 비활성화하고 도킹 지점을 수동으로 선택할 수 있습니다.

아래 주제를 클릭해 자세한 내용을 확인하세요.

요소가 도킹되어 있는 경우, 여백은 요소와 상위 요소 가장자리 사이에 설정된 거리를 유지하는 데 도움이 됩니다. 도킹되어 있지 않은 면에도 여백을 추가할 수 있습니다. 여백은 버퍼 역할을 해 다른 요소와의 겹침을 방지합니다.

아래 예제에서 텍스트 요소는 셀의 위쪽과 오른쪽에 도킹되어 있습니다. 속성 패널에서 여백에 마우스오버하면 캔버스에서 여백이 강조 표시됩니다. 

컨테이너에 여백을 추가해 가장자리(위, 아래 또는 측면)와 내부 콘텐츠 사이에 공간을 만드세요.  여백은 기본 컨테이너, 스택, 플렉스박스, 반복 레이아웃, 셀, 섹션 및 페이지를 포함한 모든 유형의 반응형 컨테이너에 추가할 수 있습니다. 

요소 배치 시에는 더 작은 중단점에서 겹치지 않도록 하는 것이 중요합니다. 이러한 문제를 방지하려면, 아래 도움말을 확인하세요. 

요소 간에 원치 않는 겹침이 발생한다면 아래의 동영상 자습서(영문)를 시청해 문제를 해결하세요.