Studio Two 에디터: 요소 스택하기

스택을 사용하면 요소를 그룹으로 묶어 하나의 단위처럼 함께 정렬된 상태를 유지할 수 있습니다. 텍스트와 이미지를 나란히 배치하거나, 사이트가 화면 크기에 맞게 조정되어도 레이아웃을 유지해야 하는 동적 콘텐츠에 특히 유용합니다.

스택을 생성하면 관련 요소를 함께 유지하고 그룹 전체의 간격을 조정할 수 있습니다. 요소를 나란히 배치하고 일관된 레이아웃을 유지해야 할 때 특히 유용합니다.

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

2. 스택에 추가할 첫 번째 요소를 선택합니다.

3. Shift 키를 누른 상태에서 스택에 추가할 다른 요소를 클릭합니다.

4. 액션바에서 추가 작업 아이콘을 클릭합니다.

5. 스택에 마우스오버한 후 세로 또는 가로를 선택합니다.

디자인을 변경할 때 언제든지 요소를 더 추가하거나, 기존 요소의 순서를 변경하거나, 스택에서 아이템을 제거하거나, 전체 스택을 해제해 레이아웃을 업데이트할 수 있습니다.

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

2. 해당 스택을 클릭합니다.

3. 다음 작업을 선택합니다.

스택 레이아웃을 설정해 요소의 배치, 간격 및 정렬을 조정합니다. 디자인을 변경하거나 콘텐츠가 바뀔 때 언제든지 세부 설정을 조정할 수 있습니다.

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

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

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

1. 아직 열려 있지 않다면 디자인 탭을 클릭합니다.

2. 레이아웃으로 스크롤합니다.

3. 다음 작업을 선택합니다.

   • 스택 레이아웃: 가로 스택과 세로 스택 간에 전환합니다. 새 레이아웃에 맞게 요소가 자동으로 재배치됩니다.

   • 아이템 간격: 스택 요소(즉, 스택 아이템) 사이에 동일한 간격을 추가합니다.
     도움말: 캔버스에서 간격을 직접 조정해 간격이 일정하지 않으면 속성 검사에서 이 설정 옆에 '혼합'이 표시됩니다. 값을 입력하면 간격을 일정하게 맞출 수 있습니다.

   • 아이템 정렬: 스택의 경계 상자 안에서 요소를 정렬합니다. 세로 스택에서는 요소를 왼쪽, 가운데 또는 오른쪽으로 정렬하거나 너비를 채우도록 늘릴 수 있습니다. 가로 스택에서는 요소를 위쪽, 가운데 또는 아래쪽으로 정렬할 수 있습니다.

   • (가로 스택에만 해당) 방향: 요소를 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 표시할지 선택합니다.

스택에 테두리, 모서리 또는 음영을 추가해 시각적인 컨테이너로 만들 수 있습니다. 페이지에서 그룹화된 요소를 더욱 돋보이게 할 수 있습니다.

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

2. 해당 스택을 클릭합니다.

3. 액션바에서 모든 디자인 옵션 아이콘을 클릭합니다.

4. (검사창에서) 이용 가능한 옵션을 사용해 스택을 디자인합니다.

   • 테두리: 스택이 돋보이도록 테두리를 추가하고 색상, 두께 및 스타일을 선택합니다. 스택의 각 면에 서로 다른 테두리를 적용하려면 개별 테두리 편집 아이콘을 클릭합니다.

   • 모서리: 모서리를 둥글거나 각지게 설정합니다.

   • 음영: 스택 뒤에 입체감을 더할 음영을 추가합니다.

   • 채우기: 스택의 배경(예: 색상, 그라데이션, 이미지, 동영상)을 선택하고 투명도를 설정합니다.