그룹 레이아웃 사용자 정의

그룹 블록은 하나의 단위로 스타일과 위치를 지정할 수 있는 컨테이너에 콘텐츠를 정리하는 데 도움이 됩니다. 이 가이드에서는 레이아웃 설정을 사용하여 잘 정렬된 반응형 페이지 섹션을 그룹 블록으로 생성하는 방법을보여줍니다.

기본적으로 그룹 블록에서는 서로 겹쳐서 표시되도록 내부 블록을 정리합니다. 그룹 내부에 블록이 정렬되는 방식을 변경하면 콘텐츠가 나란히(가로) 또는 스택형(세로)으로 표시되는지를 제어할 수 있으므로 디자인의 레이아웃을 더 유연하게 적용할 수 있습니다. 다음과 같은 단계에 따라 그룹의 콘텐츠 정렬을 사용자 정의할 수 있습니다.

1. 편집 화면 상단의 목록 보기를 선택합니다.
2. 그룹 블록을선택합니다.
3. 오른쪽의 블록 설정 사이드바에서 다음과 같은 옵션 중 하나를 선택합니다.
   • 그룹:그룹 블록의 기본배열입니다.
   • 스택:블록을 하나씩 겹쳐서 세로로 정렬합니다. 계단 또는 특징적인 아이템과 같이 명확하고 연속적인 콘텐츠를 생성하는 데 적합합니다.
     • 양쪽 맞춤에서위쪽, 가운데 또는 아래쪽과 같은 옵션으로 세로 정렬을 변경합니다.
   • 행:가로로 나란히 블록을 배치합니다. 특징 비교 또는 이미지 갤러리 생성에 알맞습니다.
     • 양쪽 맞춤에서왼쪽, 가운데, 오른쪽 또는 빈칸과 같은 옵션으로 가로 정렬을 조정합니다.
   • 그리드:사용자가 정의할 수 있는 그리드 레이아웃으로 블록을정리합니다. 상품 디스플레이 또는 팀 조직도에 유용합니다.
4. ‘저장’ 또는 ‘발행’을 클릭하여 변경 사항을 저장합니다.

그룹 블록의 전체 폭 제어는 페이지에 시각적 계층 구조를 생성하고 콘텐츠가 다양한 화면 크기에 반응하는 방식을 조정하는 데 도움이 됩니다. 그룹 블록에 사용되는 공간을 다음과 같은 단계에 따라 콘텐츠 폭, 넓은 폭, 전체 폭으로 변경할 수 있습니다.

1. 편집 화면 상단의 목록 보기를 선택합니다.
2. 그룹 블록을선택합니다.
3. 표시되는 도구 모음에서‘정렬’ 아이콘을선택하고 다음 중에서 선택합니다.
   • 콘텐츠(또는 ‘없음’): 블록의 폭을 콘텐츠 영역의 기본 폭으로설정합니다. 일반 콘텐츠 섹션에 적합합니다.
   • 넓은 폭: 블록의 폭을 더 넓은(전체 아님) 폭으로 설정합니다. 화면 전체를 차지하지 않고 중요한 콘텐츠로 관심을 끌기에 좋습니다.
   • 전체 폭: 사용 가능한 영역의 전체 폭을 채우도록 블록을 설정합니다. 배너 또는 대형 이미지 갤러리와 같은 몰입형 콘텐츠 섹션을 생성하기에 좋습니다.
4. ‘저장’ 또는 ‘발행’을 클릭하여 변경 사항을 저장합니다.

콘텐츠 폭 변경에 대해 자세히알아보세요.

모바일과 데스크톱 화면에서 모두 잘 작동하는 반응형 디자인을 생성할 때 도움이 되도록 그룹 내에서 콘텐츠가 차지하는 공간을 제어할 수 있습니다. 그룹 블록 내 콘텐츠의 폭 설정을 변경하는 단계는 다음과같습니다.

1. 편집 화면 상단의 목록 보기를 선택합니다.
2. 그룹 블록을선택합니다.
3. 블록 설정 사이드바에서‘내부 블록’섹션을찾습니다. ‘내부 블록에서 콘텐츠 폭 사용’ 설정 전환:
   • 켜기:콘텐츠에서 사이트의 콘텐츠 폭 설정을 따르거나 폭 컨트롤을 사용하여 특정 폭 값을 조정합니다.
   • 끄기:전체 그룹 블록 폭이 채워지도록 콘텐츠가 확장됩니다.
4. ‘저장’ 또는 ‘발행’을 클릭하여 변경 사항을 저장합니다.

‘내부 블록에서 콘텐츠 폭 사용’ 설정에 따라 그룹 블록 내부의 콘텐츠가 표시되는 폭이 제어됩니다.

켜기의 경우:그룹 블록 내부의 콘텐츠에서 사이트의 전체적인 콘텐츠 폭 설정을 따릅니다(일반적으로 약 700~800px의 폭). 그러면 그룹 블록이 페이지의 전체 폭에 걸쳐 있더라도 가운데에 정렬된 컨테이너형 콘텐츠 열이 생성됩니다. 따라서 매력적인 레이아웃이 유지되면서 더 큰 화면의 가독성이 향상됩니다.

끄기의 경우:그룹 블록 내부의 콘텐츠가 확장되어 그룹 블록 자체의 폭 전체를 채웁니다. 그룹 블록이 전체 폭이라면 콘텐츠도 전체 폭을 다 차지합니다. 전체 폭 이미지 갤러리처럼 가장자리까지 다 차지하는 디자인을 생성하거나 콘텐츠가 그룹 블록의 배경 폭과 일치하기를 바랄 때 유용합니다.

모범 사례: 색상이 지정된 배경이 전체 페이지 폭에 걸쳐 있는 그룹 블록이 있는 경우 ‘내부 블록에서 콘텐츠 폭 사용’을 켜면 색상이 지정된 배경이 가장자리까지 확장되는 가운데 정렬 콘텐츠 열이 생성되어 시각적 흥미를 유발하면서도 중요한 정보를 강조 표시할 수 있습니다.

규격을 조정하면 콘텐츠와 레이아웃의 필요성에 더 알맞도록 그룹 블록의 높이, 폭, 간격을 제어할 수 있습니다. 시각적으로 균형 잡힌 섹션을 생성하는 데 도움이 되어 콘텐츠에 여유를 줄 수 있습니다. 다음에 같은 단계에 따라 그룹 블록 주위에 정밀한 간격을 설정합니다.

1. 편집 화면 상단의 목록 보기를 선택합니다.
2. 그룹 블록을선택합니다.
3. 블록 설정 사이드바에서규격 섹션을 찾습니다.
4. 값 설정 대상:
   • 안쪽 여백:콘텐츠와 그룹 블록 테두리 사이의 공간입니다. 안쪽 여백이 많을수록 콘텐츠 주변에 여유가 생깁니다.
   • 여백:그룹 블록 바깥쪽 공간입니다. 이 섹션을 다른 콘텐츠와 구분하는 데 도움이 됩니다.
5. 링크 아이콘을 사용하여 균일 또는 개별 측면 조정 사이를 전환합니다.

블록 규격 사용자 정의에 대해 자세히알아보세요.

이 간격을 조정하면 그룹 블록 내에 표시되는 콘텐츠의 원근감을 제어할 수 있어요소 사이에 합당한 시각적 관계가 생성됩니다. 섹션의 응집성을 유지하면서 방문자가 관련 콘텐츠를 구별하는 데 도움이 됩니다. 그룹 내부 블록 간 간격 관리:

1. 편집 화면 상단의 목록 보기를 선택합니다.
2. 그룹 블록을선택합니다.
3. 블록 설정 사이드바에서블록 간격 섹션을 찾습니다.
4. 컨트롤을 사용하여 설정:
   • 블록 간격:개별 블록 사이의 공간입니다. 간격이 넓으면 구분이 명확해지고, 간격이 좁으면 콘텐츠가 연결된 것처럼 느껴집니다.
   • 최소 높이:그룹 블록의 최소 높이입니다. 일관된 섹션을 생성하거나 시각적 균형을 위해 공백을 추가하는 데 유용합니다.

블록 간 공간 조정에 대해 자세히알아보세요.