WordPress에서 블록 크기를 조정하는 방법

WordPress 5.0에 공식적으로 도입된 Gutenberg Block Editor는 사용자에게 WordPress 콘텐츠와 사이트를 완전히 사용자화할 수 있는 기회를 제공합니다. 더 이상 TinyMCE Classic Editor와 같은 WYSIWYG 도구에서 생성할 필요가 없도록 Gutenberg는 게시물 또는 페이지 콘텐츠의 각 요소에 대해 개별 블록을 제공합니다. 각 특정 블록에 대한 설정을 제어하여 사용자는 이전보다 훨씬 쉽게 WordPress 콘텐츠를 디자인할 수 있습니다. 디자인을 눈에 띄게 만드는 가장 간단한 방법 중 하나는 기본 설정을 벗어나는 것입니다. 그래서 우리는 WordPress에서 블록 크기를 조정하여 상자 밖에서 생각(및 디자인)을 시작할 수 있도록 하는 방법을 살펴볼 것입니다.

블록 편집기에서 대부분의 크기 조정은 블록의 반응 특성으로 인해 여전히 사이트의 콘텐츠 영역으로 제한됩니다. 페이지의 콘텐츠 영역을 전체 너비로 설정한 경우 해당 공간 내에서 작업하게 됩니다. 예를 들어 게시물 콘텐츠 영역이 580px 또는 1200px로 설정되어 있으면 그곳에서 작업하게 됩니다. WordPress에서 블록 크기를 조정하는 방법을 가르치는 데 사용하는 방법은 모두 특정 블록 컨테이너의 경계 내에 머물 것이라는 아이디어에 기반합니다.

편집기에서 블록 크기를 조정하는 방법

전부는 아니지만 일부 블록에는 크기 조정 옵션이 내장되어 있습니다. 이것은 명백한 이유로 크기를 조정하기 가장 쉬운 것입니다. 그러나 블록에 따라 크기 조정 옵션이 다른 위치에 있습니다.

예제 #1: 이미지 블록

블록을 클릭하면 상황에 맞는 메뉴가 표시되며 여기에서 크기 조정 옵션은 실제로 간격 옵션입니다. 그러나 넓은 너비 및 전체 너비 정렬은 이미지 블록의 크기를 컨테이너 너비(넓음) 또는 전체 페이지 너비(전체)로 변경합니다.

오른쪽 사이드바에 있는 블록 설정을 사용하여 이미지 블록의 크기를 조정할 수도 있습니다. 적절하게 명명된 이미지 크기 섹션에는 블록 크기를 조정할 수 있는 다양한 선택 사항이 있습니다.

WordPress에는 빠른 크기 조정을 위한 드롭다운이 있으며 축소판 , 중간 , 크게 및 전체 크기 에서 사전 설정을 선택할 수 있습니다 . 전체 크기 를 선택하는 것은 테마가 실제로 완전히 표시되는지 또는 콘텐츠 영역에 맞는지 여부에 따라 다릅니다.

너비와 높이를 픽셀 단위로 구체적으로 조정할 수도 있습니다. 그 아래에 백분율로 조정할 수 있습니다. 백분율은 너비 및 높이 필드의 숫자 값을 기반으로 합니다 . 드롭다운 메뉴에서 선택한 사전 설정 이미지 크기가 아닙니다.

마지막으로 이미지 자체를 클릭하여 흰색 원형 앵커가 있는 파란색 테두리를 표시할 수 있습니다. 이들을 끌어 블록의 크기를 조정할 수 있습니다.

앵커를 클릭하고 드래그하여 이미지의 크기를 조정하면 됩니다. 이렇게 하면 블록 설정 메뉴의 높이 및 너비 필드 크기가 조정됩니다.

예제 #2: 이벤트 블록

이벤트 블록의 경우 크기 조정 설정은 편집기 자체의 컨텍스트 메뉴에만 있습니다. (이벤트 블록은 Automattic에서 설치하는 별도의 플러그인으로 구텐베르크 코어 편집기의 일부가 아닙니다.)

일부 이미지 블록 옵션과 마찬가지로 여기의 크기 조정 옵션은 기술적으로 간격 옵션입니다. 그러나 두 가지 옵션은 가운데 맞춤 과 넓은 너비입니다. 컨테이너의 중앙에 배치하거나 화면 전체의 너비가 되도록 선택할 수 있습니다.

편집기 자체에서 블록의 높이를 조정하는 것은 일종의 해킹이지만 작동합니다. 빈 블록 필드에서 엔터/리턴 을 누르기만 하면 빈 단락 블록을 추가로 삽입하여 높이를 확장할 수 있습니다.

이상적이지 않은 솔루션입니다. 그러나 특히 Event Block에 대한 실제 높이 조정 옵션이 없다는 점을 감안할 때 빠르고 신속하게 작동합니다.

예제 3#: WordPress에서 열을 사용하여 블록 크기 조정

크기를 조정해야 하는 블록의 설정 패널이나 상황에 맞는 메뉴에 크기 조정 옵션이 없으면 블록 편집기의 열을 사용하여 블록의 크기를 조정할 수 있는 또 다른 방법입니다. 새 블록을 추가하려면 + 버튼 중 하나를 눌러 열 블록을 검색하기만 하면 됩니다.

기둥 블록 내에서 원하는 다른 블록을 추가할 수 있습니다. 검색 옵션에는 블록 편집기 패턴도 나타납니다. 이미 크기가 조정되고 배치된 콘텐츠가 있는 게시물이나 페이지에 삽입할 수 있는 템플릿으로 콘텐츠가 자리 표시자를 대체하기를 기다립니다.

처음부터 열 블록을 사용하여 열 자체의 크기를 선택할 수 있습니다. 6개의 다른 방향으로 나뉘며 각 방향은 개별 열에 사용되는 페이지 비율이 다릅니다.

이러한 구성만 사용할 수 있는 것은 아닙니다. 블록 내부의 파란색 + 버튼을 사용하여 언제든지 새 열을 추가할 수 있습니다. 각 개별 열에는 백분율로 너비만 조정할 수 있는 자체 설정 패널이 있습니다.

디자인에 맞는 크기를 얻으려면 약간의 실험이 필요할 수 있습니다. 그러나 완료되면 첫 페이지에 잘 디자인되고 적절한 간격의 콘텐츠를 가질 수 있습니다. 블록 편집기에 있는 모든 빈 열은 프런트 엔드에서도 비어 있는 것으로 표시됩니다.

너비, 배치 및 다른 열의 수를 조정하여 블록의 크기를 조정하고 거의 모든 방식으로 배치할 수 있습니다.

더 많은 크기 옵션이 필요하십니까? 고급 페이지 빌더 고려

블록 크기를 조정하는 이러한 방법 중 일부는 제한적으로 느껴질 수 있습니다. 너무 제한적이라고 생각되면 더 고급 페이지 빌더를 살펴봐야 할 때일 수 있습니다.

예를 들어, 당사의 Divi에는 각 모듈(블록)에 대한 크기 조정 및 변형 옵션이 있어 구텐베르크에서 가능한 것보다 모양, 크기 및 간격을 훨씬 더 잘 제어할 수 있습니다. 대부분의 고급 페이지 빌더도 마찬가지이므로 Gutenberg의 옵션이 너무 제한적이라면 Divi와 같은 것을 확인하는 것이 가장 좋은 다음 단계일 수 있습니다.

CSS를 사용하여 WordPress에서 블록 크기를 조정하는 방법

각 블록에는 고급 설정 아래의 설정 패널에 CSS 섹션이 있습니다. 다른 블록별 고급 설정과 함께 각각에는 추가 CSS 클래스에 대한 필드가 있습니다. 이 개별 블록에 원하는 선택기를 할당할 수 있습니다. 선택기가 사이트에 이미 존재하거나 이 블록을 위해 특별히 생성한 경우입니다.

일반적으로 개별 블록에 대해 클래스 대신 CSS ID를 사용하는 것이 좋지만 블록 편집기에서 지원하지 않습니다(적어도 기본적으로). 따라서 ID가 아닌 개별 블록을 따라잡기 위해 여러 클래스를 사용하고 싶을 것입니다. 클래스는 실제로 큰 범주의 요소 유형을 포괄하는 반면 ID는 개별 요소를 위한 것입니다. 이 경우 명확한 이름 지정 규칙을 사용하여 코드에서 일을 똑바로 유지하는 것이 좋습니다.

그럼에도 불구하고 클래스를 텍스트 필드에 입력하기만 하면 됩니다. 이 필드에서 클래스 이름 앞에 마침표/점을 포함하지 마십시오 .

이제 모양 – 사용자 정의로 이동하여 맨 아래에서 추가 CSS 섹션을 찾아야 합니다. 원하는 대로 블록 크기를 조정하려면 CSS 코드를 작성하거나 붙여넣습니다.

픽셀(px) 단위 는 절대적이므로 사용하지 않는 것이 좋습니다. 바람직하게는 vw (뷰포트 너비) , vh (뷰포트 높이) 또는 % (백분율)를 사용하여 블록을 조정합니다. 이들은 각각 장치 및/또는 주변의 기타 콘텐츠를 참조하여 확장됩니다.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

% 와 vw/vh 도 기능은 비슷하지만 다릅니다. 그것들은 모두 백분율로 작동하지만 다른 앵커에 상대적입니다.

백분율 측정은 요소가 들어 있는 컨테이너와 관련이 있습니다. 따라서 요소가 있는 섹션이나 행이 화면 가장자리로 이동하지 않으면 width:100%로 설정해도 경계에 도달하지 않습니다.

그러나 vh/vw를 사용하면 사이트의 요소가 아니라 장치 자체의 뷰포트에 상대적이기 때문입니다. height:80vh 를 사용하면 모바일 장치, 데스크톱 또는 태블릿에 표시되는지 여부에 관계없이 항상 이 블록이 화면 높이의 80%를 차지하도록 할 수 있습니다.

결론

WordPress의 블록 편집기는 이전에 사용할 수 없었던 수많은 사용자 정의 옵션을 사용자에게 제공합니다(편집기 자체 내에서). WordPress에서 블록 크기를 조정하는 방법을 아는 것은 블록 편집기를 최대한 활용하는 데 필수적입니다. 이제 전체 사이트 편집이 레퍼토리에 포함되어 시간이 지남에 따라 더 유용하게 될 기술 중 하나입니다.

WordPress에서 블록 크기 조정에 대해 공유할 수 있는 몇 가지 팁과 트릭은 무엇입니까?

기사 특집 이미지 제공: 3rieart / shutterstock.com