행 블록과 스택 블록은 행(또는 스택 블록이 있는 열)에 여러 블록을 삽입하고 공간을 균등하게 나눌 수 있는 디자인 블록 유형입니다. 행 또는 스택 블록을 사용하여 구분자를 생성하거나 마치 열에 포함된 것처럼 같은 줄에 다양한 요소를 추가할 수 있습니다.
+ 블록 삽입기 아이콘을 클릭하여 행 블록을 추가하고 행(행 블록의 경우) 또는 스택(스택 블록의 경우)을 검색합니다. 클릭하여 블록을 글 또는 페이지에 추가합니다.
💡
키보드를 사용하여 /row라고 새 줄에 입력하고 Enter 키를 눌러 새 행 블록을 추가하거나 /stack이라고 입력하여 새 스택 블록을 추가할 수 있습니다.
블록 추가에 대한 자세한 안내는 여기에서 확인하세요.
블록을 클릭하면 옵션 도구 모음이 표시됩니다.
행 블록의 도구 모음에는 다음과 같은 옵션이 있습니다.
- 블록 유형 또는 스타일 변경
- 블록 끌어오기
- 위 또는 아래로 블록 이동
- 항목 양쪽 맞춤 변경(왼쪽, 가운데, 오른쪽 및 항목 간 공백)
- 정렬 변경(없음, 넓은 폭, 전체 폭)
- 추가 옵션
스택 블록의 도구 모음에는 다음과 같은 옵션이 있습니다.
- 블록 유형 또는 스타일 변경
- 블록 끌어오기
- 위 또는 아래로 블록 이동
- 항목 양쪽 맞춤 변경(왼쪽, 가운데, 오른쪽)
- 정렬 변경(없음, 넓은 폭, 전체 폭)
- 추가 옵션
📌
블록 폭을 와이드 또는 전체 폭으로 변경하는 옵션이 표시되지 않고 테마에서 이러한 옵션이 지원되는 경우 블록을 블록 그룹 지정에 추가할 수 있습니다. 여기에서 블록 그룹 지정에 대해 자세히 알아볼 수 있습니다.
블록을 선택하면 오른쪽 사이드바에 추가 블록 설정이 표시됩니다. 사이드바가 표시되지 않으면 오른쪽 상단의 설정 아이콘을 클릭하여 설정을 가져와야 할 수도 있습니다. 이 아이콘은 일정하지 않은 열 2개가 있는 정사각형 모양입니다.
행 블록은 그룹 블록 또는 스택 블록으로 변환할 수 있습니다. 스택 블록은 그룹 블록 또는 행 블록으로 변환할 수 있습니다.
레이아웃 섹션에서는 행 또는 스택 블록의 양쪽 맞춤을 설정할 수 있습니다. 왼쪽, 가운데, 오른쪽 또는 양쪽 맞춤을 선택하여 행 정렬을 설정합니다. 방향 옵션에서는 행에서 스택으로 전환할 수 있습니다.
스택 블록에는 콘텐츠를 양쪽 맞춤으로 설정하는 옵션이 포함되어 있지 않습니다. 이 옵션은 행 블록에 행을 균등하게 정렬하는 방법으로 표시됩니다.
콘텐츠를 여러 줄로 줄바꿈할 수 있는지 여부도 설정 또는 해제할 수 있습니다.
위치 섹션에서는 기본과 붙박이 중에서 선택할 수 있습니다.
- 기본: 블록 너머로 스크롤하면 페이지의 다른 섹션으로 이동할 때 블록이 사라집니다.
- 붙박이: 원래 추가된 위치 너머로 스크롤하더라도 블록이 떠다니며 페이지에 계속 표시됩니다.
고급
고급 탭에서는 블록에 CSS 클래스를 추가하여 블록 스타일을 정하는 사용자 정의 CSS를 작성할 수 있습니다.
블록 설정 사이드바에서 스타일 아이콘을 클릭하여 블록의 디자인 설정에 액세스합니다. 스타일 아이콘은 절반이 채워진 원 모양입니다.
색상 섹션에서는 행 블록 또는 스택 블록의 텍스트, 배경 및 링크 색상을 수정할 수 있습니다.
색상 섹션의 점 3개를 클릭하여 링크를 추가하는 옵션을 추가합니다.
텍스트와 링크는 바둑판 모양의 영역을 클릭하여 사용자 정의 색상을 선택하거나 아래의 테마 또는 기본 섹션에 미리 선택되어 있는 색상 중 하나를 선택할 수 있습니다.
배경은 텍스트의 경우와 비슷한 색상 설정(위) 외에 단색 또는 그라데이션(특정 패턴(밝은 색상에서 어두운 색상으로 또는 하나의 색상을 다른 색상에 혼합)을 통해 표시되는 두 가지 이상의 색상 혼합) 중에서 선택할 수 있습니다.
다음 설정을 통해 블록의 텍스트 디자인을 조정합니다.
설정이 표시되지 않으면 타이포그래피 오른쪽에 있는 세 점을 클릭합니다(오른쪽에 표시됨). 그런 다음, 접근하려는 옵션을 선택할 수 있습니다.
- 글꼴 크기
- 글꼴 패밀리
- 디자인
- 줄 높이
- 장식
- 대/소문자
- 글자 간격
글꼴 크기로 텍스트의 크기를 조정할 수 있습니다. 작게, 중간, 크게와 같은 사전 설정된 크기 중에서 선택할 수 있습니다.
아래 스크린샷에서 1로 표시된 기본 선택 바로 위에 있는 슬라이더 아이콘을 클릭하여 특정 값을 설정할 수도 있습니다. 아래 스크린샷에서 숫자 2가 표시된 곳을 클릭하여 단위를 변경할 수 있습니다. 선택 사항은 픽셀, em 또는 rem입니다.
글꼴 패밀리는 사용된 글꼴 스타일을 변경할 수 있는 옵션을 제공합니다. 드롭다운 메뉴의 글꼴 목록에서 선택합니다.
디자인을 사용하면 가는 것에서 매우 굵은 것까지 일반 및 기울임꼴 사이에서 텍스트 스타일을 변경할 수 있습니다.
줄 높이에서는 텍스트 위/아래 간격을 설정합니다. 0을 선택하는 경우 모바일 장치에서 사이트를 확인해야 합니다.
장식에는 밑줄 및 취소선 옵션이 포함됩니다.
대/소문자를 사용하면 텍스트를 모두 대문자로 설정하거나 첫 글자를 대문자로 설정하거나 모두 소문자로 설정하는 데 사용할 수 있습니다.
글자 간격은 텍스트의 각 문자 사이의 간격을 설정합니다. 단위를 기본값(픽셀)에서 백분율, em, rem, vw 및 vh로 변경할 수 있습니다. 여기에서 상대 단위에 대해 자세히 알아보세요.
규격에서는 열 블록의 요소 주위 공간인 안쪽 여백을 설정할 수 있습니다. 이 옵션은 배경 색상을 사용할 때 특히 적절합니다.
안쪽 여백 아래 필드에서 값을 추가하여 4면 모두에 하나의 안쪽 여백 값을 지정할 수 있습니다.
각 면의 안쪽 여백 값을 구분할 수도 있습니다. 링크 아이콘을 클릭하여 안쪽 여백 추가 옵션을 각 면에 개별적으로 표시합니다. 여기의 그림에서는 위쪽, 오른쪽, 아래쪽, 왼쪽의 시계 방향으로 실행됩니다. 이전 이미지에 표시된 파란색 링크 아이콘을 클릭하여 이 보기에 접근할 수 있습니다.
스택 블록은 내부의 블록이 스택형이고 개별 블록을 통하거나 여백 도구 블록을 사용하여 규격을 설정할 수 있어서 규격을 설정하는 옵션이 포함되어 있지 않습니다.
콘텐츠 주위에 테두리 선을 추가하려면 테두리 설정을 사용합니다. 색상, 크기 및 크기 단위(px, %, em, rem, vw, vh)를 선택할 수 있습니다.
기본적으로 이러한 설정을 통해 네 면 모두의 테두리가 제어됩니다. 상단, 오른쪽, 하단, 왼쪽 면을 특정하여 조정하려면 링크 아이콘을 클릭합니다.
반경에서는 이미지 경계선을 둥글게 디자인할 수 있습니다. 0으로 설정하면 이미지의 모서리가 예각을 이룹니다.
📌
클래식 테마를 사용하는 경우에는 경계선과 반경 설정이 사이트에 표시되지 않을 수 있습니다. 이미지 경계선을 사용자 정의하는 등 아주 많은 기능이 제공되는 새로운 사이트 편집기 테마를 조금 둘러보면 좋습니다.
먼저 행 블록에 추가할 블록을 하나 이상 선택합니다. 각 블록에서 클릭하여 끌기 또는 “Shift” 키 누르면서 클릭하기를 통해 여러 블록을 선택할 수 있습니다(블록이 나란히 있어야 함).
블록 도구 모음이 표시됩니다. 도구 모음에서 행 또는 스택 아이콘을 선택합니다. 아래의 이미지에서는 스택 블록 아이콘 바로 오른쪽에 있는 아이콘인 행 블록 아이콘을 가리키고 있습니다.
개별 블록의 정렬을 수정하려면 기존 블록의 그룹을 해제하는 것이 좋습니다.
- 편집기 상단의 목록 보기를 클릭하고 행 블록 또는 스택 블록을 선택합니다.
- 블록 도구 모음에서 추가 옵션 아이콘을 클릭합니다.
- 그룹 해제 옵션을 선택합니다.
지원 