Studio 에디터: 요소 배치하기
5 분 분량
끊임없이 변화하는 기기의 세계에서 다양한 화면 크기에서 원하는 대로 표시되도록 요소의 위치를 제어하는 것이 중요합니다. Studio 에디터에서는 이를 위해 요소를 자동으로 도킹합니다.
이는, 중단점 간에 배치하는 것에 대해 걱정할 필요 없이 요소를 자유롭게 이동할 수 있도록 합니다. 하지만, 언제든지 속성 패널에서 위치, 도킹 및 여백을 직접 설정할 수 있습니다.
다음 도움말을 참고하세요.
캔버스에 요소 배치하기
드래그-앤-드롭을 사용해 각 중단점에서 개별적으로 캔버스에서 직접 요소의 위치를 설정할 수 있습니다. 이를 통해 요소가 모든 화면에서 제자리에 정확하게 표시되도록 할 수 있습니다.
요소가 동일한 상위 요소(예: 섹션, 셀)에 유지되는 한, 다른 중단점에 영향을 미치지 않고 요소를 이동할 수 있습니다. 요소를 다른 상위 요소(상위 변경)로 이동하면 모든 중단점에 적용됩니다.
속성의 X 및 Y 좌표
요소의 X 및 Y 좌표를 확인해 현재 캔버스 크기에서 정확한 위치를 확인할 수 있습니다.
- X: 상위 요소(예: 섹션, 컨테이너, 스택)의 왼쪽 가장자리에서 오른쪽 가장자리까지의 수평면
- Y: 상위 요소의 상단에서 하단으로 수직면
아래 예제에서는 텍스트 요소를 상위 요소인 셀 외부로 이동함에 따라 px* 값이 음수로 바뀌는 것을 볼 수 있습니다.
px*란?
px*은 Studio 에디터의 측정 단위로, "캔버스의 픽셀"을 표시합니다. 표시되는 px* 값은 현재 캔버스 크기와 관련된 픽셀 값입니다. 다른 중단점으로 전환해 px* 값이 어떻게 자동으로 변경되는지 확인하세요.
자동 도킹
새 요소를 추가하면, 자동으로 다음 두 곳에 자동으로 도킹됩니다.
- 상위 요소의 상단(예: 섹션, 컨테이너, 스택)의 상단
- 상위 요소의 왼쪽 또는 오른쪽 가장자리 중 가장 가까운 모서리
자동 도킹은 요소가 모든 화면과 기기에서 제자리에 유지될 수 있도록 합니다. 요소를 자유롭게 이동할 수 있으며, 도킹 포인트가 자동으로 조정되므로 "다시 도킹"할 필요가 없습니다.
도킹 위치는 요소의 점선과 속성 패널의 위치 섹션 아래에 도킹 포인트로 표시됩니다. 아래 예제에서 텍스트 요소는 셀의 위쪽과 오른쪽에 자동으로 도킹됩니다.
도움말:
기본적으로 요소 자동 도킹 체크 상자가 선택되어 있습니다. 언제든지 선택을 해제하고 도킹을 수동으로 조정할 수 있습니다.
요소 도킹 수동으로 조정하기
속성 패널에서 자동 도킹을 재정의하고 수동으로 위치를 설정할 수 있습니다. 예를 들어, 요소를 상단이 아닌 하단에 도킹하려는 경우에 유용합니다.
위, 아래, 왼쪽, 오른쪽 또는 섹션, 컨테이너 또는 그리드 셀의 중앙까지 원하는 쪽에 요소를 도킹하세요.
요소를 수동으로 도킹하려면:
- 해당 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다. - 위치로 스크롤합니다.
- 해당 도킹 포인트(위, 아래, 오른쪽 또는 왼쪽)를 클릭합니다. 또는, 중앙에 정렬 아이콘
을 클릭해 요소가 항상 중앙에 위치하도록 합니다.
참고:
이는 요소 자동 도킹 체크 상자를 자동으로 선택 해제합니다.
요소 도킹 시 여백 사용하기
요소가 도킹되어 있는 경우, 여백은 요소와 상위 요소 가장자리 사이에 설정된 거리를 유지하는 데 도움이 됩니다. 도킹되어 있지 않은 면에도 여백을 추가할 수 있습니다. 여백은 버퍼 역할을 해 다른 요소와의 겹침을 방지합니다.
아래 예제에서 텍스트 요소는 셀의 위쪽과 오른쪽에 도킹되어 있습니다. 속성 패널에서 여백에 마우스오버하면 캔버스에서 여백이 강조 표시됩니다.
여백을 추가하거나 편집하려면:
- 해당 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
- 위치로 스크롤합니다.
- 도킹, 바깥 및 안쪽 여백 아래에서 여백(예: 위쪽, 왼쪽)을 클릭합니다.
- 여백 값을 입력합니다.
도움말: 측정값(예: px, %)을 클릭해 변경합니다.요소를 모든 화면 크기에 일관되게 배치하려면 퍼센트(%)를 사용할 것을 권장합니다. - (선택사항) 전체 적용
아이콘을 클릭해 모든 면에 동일한 여백을 설정합니다.
여백 단위:
여백은 픽셀(px), 백분율(%), 뷰포트 높이(vh), 뷰포트 너비(vw) 단위로 설정할 수 있습니다. 화면 크기를 조정하면 각 단위마다 다른 결과가 나타납니다. 캔버스를 끌어 크기를 조정해 단위 동작의 차이점을 확인하세요.
요소 겹치기 방지하기
요소 배치 시에는 더 작은 중단점에서 겹치지 않도록 하는 것이 중요합니다. 이러한 문제를 방지하려면, 아래 도움말을 확인하세요.
상단에 도킹하기
일반적으로 요소가 첨부되어 있는 컨테이너, 섹션 또는 그리드 셀의 맨 위에 요소를 도킹하는 것이 좋습니다. 이는 페이지에 더 많은 콘텐츠가 추가될 때 요소와 컨테이너/섹션 사이에 항상 정의된 공간이 있는지 확인합니다.
셀을 추가해 레이아웃 구성하기
더 복잡한 레이아웃의 경우, 셀을 추가해 섹션을 구성합니다. 요소를 셀 안에 배치하고 그리드 선에 고정해 모든 화면 크기에서 완벽하게 배치되도록 하세요.
스택 적용하기
요소 그룹을 가로 또는 세로 스택에 배치할 경우, 요소가 겹치지 않습니다. 스택은 다양한 화면 크기에 자동으로 조정되는 플렉스 컨테이너로, 요소 사이의 여백을 설정하기만 하면 됩니다.
음수 여백을 사용하면 스택에서 요소를 겹칠 수 있습니다. 이렇게 하면 요소를 다른 요소 앞에 배치해 보다 복잡한 디자인을 만들 수 있습니다.
도움이 되었나요?
|