스위프트 스택

Swift Stack 구성 요소는 간단하고 복잡하며 적응 가능한 디자인을 위한 프레임워크를 제공합니다. 그리드 표시 속성을 사용하고 div로 구성된 셀을 포함하며 자동으로 flex로 설정됩니다. 이 구성 요소는 8가지 변형으로 구성되어 있어 콘텐츠를 다양한 레이아웃으로 배치할 수 있습니다. 또한 각 Swift Stack 변형 및 Swift Stack 셀 크기를 수동으로 수정하여 콘텐츠 표시를 보다 정확하게 제어할 수 있는 옵션이 있습니다. Swift Stack은 눈에 띄는 섹션부터 제품 디스플레이에 이르기까지 다양한 유형의 콘텐츠를 구성하는 데 다목적이며 가치가 있습니다.

이 튜토리얼 전체에서 다음 사항을 파악하게 됩니다.

1. Swift Stack을 통합하는 방법
2. Swift Stack을 설계하는 방법
3. Swift Stack 셀의 스타일을 지정하는 접근 방식

Swift Stack을 통합하는 방법

다음을 통해 Swift Stack을 도입할 수 있습니다. 패널 추가 > 구조 영역. Swift Stack을 Webflow 캔버스에 끌어다 놓습니다. 8개의 Swift Stack 변형 중 하나를 선택할 수 있는 사전 설정 메뉴가 캔버스에 나타납니다.

스위프트 스택 변형

Swift Stack은 각각 독특한 셀 구조를 특징으로 하는 8가지 사전 설정 변형을 제공합니다.

• 단일 열 — 1개 열과 1개 행에 걸쳐 있는 1개 셀 
• 이중 기둥— 셀 2개(각각 열 1개와 행 1개 포함)
• 트리플 컬럼— 3개의 셀(각각 1열과 1행에 걸쳐 있음)
• 4중 열— 4개의 셀(각각 1열과 1행에 걸쳐 있음) 
• 2 + 1— 3셀. 왼쪽 열의 2개 셀은 각각 1열과 1행에 걸쳐 있습니다. 오른쪽 열의 셀 1개, 열 1개와 행 2개에 걸쳐 있음
• 1 + 2— 3셀. 왼쪽 열의 셀 1개(열 1개와 행 2개에 걸쳐 있음) 각각 1열과 1행에 걸쳐 있는 오른쪽 열의 2개 셀
• 더블 2×2— 4셀. 왼쪽 열의 셀 2개, 각 셀은 열 1개와 행 1개로 구성됩니다. 오른쪽 열의 2개 셀(각각 1열과 1행에 걸쳐 있음)
• Double 2 x 2 형식 — 4셀. 맨 위 행에 2개의 셀이 있습니다. 왼쪽 셀은 2열 1행에 걸쳐 있고 오른쪽 셀은 1열 1행에 걸쳐 있습니다. 맨 아래 행의 셀 2개(왼쪽 셀은 1열 1행, 오른쪽 셀은 2열 1행)

각 Swift Stack 변형은 서로 다른 목적으로 사용됩니다. 예를 들어 눈에 잘 띄는 섹션에 이중 열 변형을 활용하여 텍스트 콘텐츠를 오른쪽 열에 배치하고 이미지를 왼쪽 열에 배치할 수 있습니다. 또는 Double 2 x 2 변형을 선택하여 반응형 제품 시각적 전시를 만들 수도 있습니다.

Swift Stack 설계 방법

Swift Stack의 그리드 레이아웃, 셀 사이의 간격, 프레젠테이션을 유연하게 조정할 수 있습니다. 기본적으로 Swift Stacks에는 각 셀과 Swift Stack의 상위 요소 사이에 20px의 여백이 있습니다.

• Swift Stack에서 행이나 열을 통합하거나 제거하는 절차
• Swift Stack에서 셀 사이의 간격을 사용자 정의하는 방법
• Swift Stack의 표시를 조정하는 방법
• 행 및 열 차원을 규제하는 방법
• 다양한 중단점에서 Swift Stack의 스타일을 지정하는 절차

Swift Stack에 행이나 열을 포함하거나 제거하는 방법

Swift Stack에 행이나 열을 추가하거나 제거할 수 있는 위치는 4곳입니다.

• 캔버스 메뉴 내에서
• 스타일 패널에서
• 편집 모드 내에서
• 스위프트 스택 내부

Swift Stack에 행이나 열을 추가하면 셀 수가 기존 행 및/또는 열 수에 맞춰 정렬됩니다. 예를 들어, Swift Stack이 2개의 행과 1개의 열로 구성된 셀로 구성되어 있고 새 열을 추가하는 경우 기존 셀 오른쪽에 2개의 셀이 추가되어 별도의 열을 형성합니다.

참고: Swift Stack에 행이나 열을 도입할 때 추가된 셀의 수는 행과 열의 합계에 해당합니다. ~ 아니다 세포의 수 - 현재 존재합니다. 예를 들어, 1행에 2개의 셀이 포함된 Swift Stack이 있고, 한 셀은 2열에 걸쳐 있고 다른 셀은 1열에 걸쳐 있는 경우 다른 행을 추가하면 Swift Stack에 3개의 셀이 포함됩니다.

행이나 열을 제거하면 행/열 셀 내부의 내용도 지워집니다.

캔버스 메뉴의 Swift Stack에 행 또는 열 추가

Swift Stack을 마우스 오른쪽 버튼으로 클릭하고 열 추가 또는 행 추가을 클릭하고 열이나 행을 포함할 위치를 선택합니다(예: 왼쪽, 오른쪽, 위 또는 아래).

스타일 패널의 Swift 스택에 행 또는 열 포함 또는 제거

Swift Stack을 선택하고 다음으로 이동하여 행이나 열을 통합하거나 제외할 수 있습니다. 스타일 패널 > 공들여 나열한 것 > 그리드. 그런 다음 "잠금" 및 "잠금 해제" 아이콘을 클릭하여 Swift Stack에서 열과 행을 삽입하거나 삭제할 수 있습니다.

Swift Stack에서 행을 제거하면 가장 낮은 행의 셀이 Swift Stack에서 제거됩니다. Swift Stack에서 열을 제거하면 가장 오른쪽 열의 셀이 Swift Stack에서 제거됩니다.

편집 모드 내 Swift Stack에서 행 또는 열 추가 또는 지우기

행이나 열을 추가하거나 삭제할 수 있습니다. 편집 모드 캔버스에. Swift Stack 요소를 선택하고 스위프트 스택 편집 편집 모드를 시작하려면 Swift Stack의 오른쪽 상단 모서리에 있습니다. 새로운 행과 열을 추가하려면 오른쪽 상단 또는 왼쪽 하단 셀 옆에 있는 "+" 기호를 클릭하세요. 행과 열은 셀 헤더를 탭한 다음 선택하여 제거할 수 있습니다. 열 삭제 또는 행 삭제 캔버스 메뉴에서

나가기 위해서 편집 모드, 때리다 Esc 또는 완료 캔버스에.

Swift Stack 내부의 Swift Stack에 행 또는 열 통합

캔버스의 Swift Stack 내에 직접 행이나 열을 삽입할 수 있습니다. 행이나 열을 추가하려면 Swift Stack 셀을 선택하고 셀의 위쪽, 아래쪽, 왼쪽 또는 오른쪽에 있는 “파란색 점” 위로 마우스를 가져간 후 “+” 기호를 탭하세요.

Swift Stack에서 셀 사이의 간격을 사용자 정의하는 접근 방식

Swift Stack의 셀 사이의 여백(즉, 요소의 외부 공간)을 늘리거나 줄이는 기능이 있습니다. 각 셀 사이의 초기 간격이 20px이므로 이 간격을 수정할 수 있습니다.

이 격차를 조절하려면 스타일 패널 > 공들여 나열한 것 > 갭. "잠금" 아이콘이 활성화되면 간격 값은 열과 행 셀에 대해 균일합니다. 열과 행 셀의 간격 크기를 구분하려면 "잠금" 아이콘을 잠금 해제하고 각각의 값을 사용자 정의하세요.

기호를 입력하고 필요에 따라 간격 값을 변경합니다.

액세스하여 셀 사이의 거리를 수정할 수도 있습니다. 편집 모드, 두 셀 사이의 공간 위로 마우스를 가져간 다음 클릭하고 드래그하여 간격을 늘리거나 줄입니다. 만약 “잠그다" 기호는 스타일 패널 > 공들여 나열한 것 > 갭를 사용하면 드래그하는 동안 행과 열 간격 값이 모두 동일한 값으로 조정됩니다. “잠그다” 기호가 잠금 해제되어 있으면 현재 클릭하고 드래그하는 간격만 조정하면 됩니다(예: 행 또는 열 간격 값).

Quick Stack의 모양을 사용자 정의하기 위한 지침

Quick Stack을 선택하고 다음으로 이동하여 Quick Stack의 모양을 사용자 정의할 수 있습니다. 스타일 패널 > 공들여 나열한 것 >  표시하다. 여기에서 다음을 선택할 수 있습니다. 현재의 또는 숨기다 퀵 스택:

• 현재의 - 퀵 스택 표시
• 은폐 — 퀵 스택 숨기기

숨겨진 Quick Stack을 선택해야 하는 경우 탐색기에서 찾을 수 있습니다.

행 및 열 차원 스타일 지정 기술

기본적으로 각 열의 차원은 1 FR(분수 단위)로 설정됩니다. 각 행의 크기는 자동으로 구성되어 포함된 콘텐츠에 따라 크기가 조정됩니다.

FR 치수 또는 최소/최대 치수를 수정하려면 다음으로 이동하세요. 편집 모드에서 행 헤더 또는 열 헤더를 선택하고 캔버스 메뉴에서 크기를 조정합니다. 또한 편집 모드. 편집 모드 외에도 셀을 선택하고 셀 경계에 있는 크기 조정 핸들을 드래그하여 치수를 조정할 수 있습니다.

다양한 중단점에서 Quick Stack을 스타일링하는 단계

Quick Stack 요소를 선택하고 중단점을 전환할 때(기본 데스크탑 중단점에서) 행 매개변수 스타일 패널 > 공들여 나열한 것 > 그리드 회색으로 표시되고 새로운 "자동" 값이 도입됩니다. Webflow는 자동으로 열 가치 — 기준 열 이미 존재하는 값 - 퀵 스택 내의 셀 수에 맞게 조정됩니다.

때때로 Quick Stack의 표시하다 그리고 그리드 스타일은 핑크색 단서를 보여줍니다. 스타일 패널 > 공들여 나열한 것 — 이러한 스타일이 관련됨을 나타냅니다. 혼자서 현재 중단점에서 선택한 요소로 이동합니다.

Quick Stack 셀 스타일링 기술

데스크톱 중단점 외에도 캔버스에서 셀을 선택하고 다음을 방문하여 Quick Stack의 셀 스타일을 지정할 수 있습니다. 스타일 패널 > 셀 크기. 1개 또는 여러 개의 행과 열에 걸쳐 셀을 조정할 수 있습니다. 크기. 또한 순서 세포의. 에 관하여 순서, '에 액세스하여 셀을 첫 번째, 마지막으로 배치하거나 사용자 정의 순서를 설정할 수 있습니다.세 개의 공개 점”를 입력하고 값을 입력합니다. 순서 필드. 셀에 사용자 정의 순서 값을 설정하려면 퀵 스택 내의 다른 모든 셀에 0보다 큰 순서 값을 할당해야 합니다.

데스크탑 중단점으로 작업할 때 셀을 병합하고 병합 해제하여 셀 크기를 관리할 수 있습니다.

때로는 세포의 크기 그리고 순서 스타일은 분홍색 표시를 표시합니다. 스타일 패널 > 셀 크기 — 이러한 스타일이 적용됨을 나타냅니다. 독점적으로 현재 중단점에서 선택한 셀로 이동합니다.

메모: Quick Stack 셀은 기본적으로 flexbox를 활용합니다.

Quick Stack 셀 간격 조정 방법

패딩을 통합할 수 있지만 Quick Stack 셀에 여백은 통합할 수 없습니다. 셀과 상위 Quick Stack 요소 사이에 간격을 도입하려는 경우 Quick Stack의 셀 사이 간격을 구성할 수 있습니다.

Quick Stack 셀 병합 방법

Quick Stack 셀을 왼쪽, 오른쪽, 위 또는 아래에 있는 셀과 병합할 수 있습니다. 셀을 병합하면 셀 내의 내용도 병합된다는 점에 유의하는 것이 중요합니다. ~ 안으로 제거됩니다.

Quick Stack 셀을 병합하는 방법에는 두 가지가 있습니다.

• 캔버스 메뉴를 통해— 병합하려는 셀을 마우스 오른쪽 버튼으로 클릭하고 위에 마우스를 올려 놓습니다. 셀 병합 캔버스 메뉴에서 셀 병합 방향(예: 위, 아래, 오른쪽, 왼쪽)을 선택합니다.
• 캔버스 내 컨트롤 활용  — 병합할 셀을 선택하고 셀의 오른쪽, 왼쪽, 위 또는 아래(원하는 병합 방향에 따라)에 인접한 파란색 점 위로 마우스를 가져간 다음 셀 병합 상

메모: 셀 병합은 병합되는 셀과 비교하여 크기가 같거나 더 큰 경우에만 가능합니다.

Quick Stack 셀 병합 해제 절차

Quick Stack 셀 병합을 해제하는 방법에는 두 가지가 있습니다.

• 캔버스 메뉴를 통해— 병합을 취소하려는 셀을 마우스 오른쪽 버튼으로 클릭하고 선택하세요. 셀 병합 취소 캔버스 메뉴에서
• 스타일 패널을 통해 — 병합 해제할 셀을 선택하고 다음으로 이동하세요. 스타일 패널 > 셀 크기을 클릭하고 셀 병합 취소

메모: 셀 병합을 취소하면 병합한 원래 셀의 내용은 복원되지 않습니다.