워드프레스 제너레이트 블록 장점 단점 블록 만들기 방법(+서식)

블로그

BERRYWIKI

updated

워드프레스 제너레이트 블록 장점 단점 블록 만들기 방법(+서식)

특정 주제를 비교하거나 리뷰 글을 작성하는 경우, 장점과 단점의 요소는 글의 핵심 내용 중 하나입니다. 이를 강조하거나 더 명확하고 전달할 수 있는 방법으로 장점 단점 블록을 활용하는 방법이 있습니다. 워드프레스의 경우, 블록 플러그인을 활용하면 어렵지 않게 장단점 블록을 만드실 수 있는데, 그 중 제너레이트 블록을 활용해서 (Pros and Cons) 장점 단점 블록을 만드는 방법에 대해서 알아보겠습니다.

제너레이트 블록(GenerateBlock)

아래 방법을 따라 진행하시려면, 제너레이트 블록 플러그인이 설치되어 있어야 합니다. 제너레이트 블록이 설치되어 있지 않으시거나 처음 사용해보시는 경우, 아래 이전 포스팅을 참고해 주세요.

워드프레스 제너레이트 블록 플러그인 설치 및 사용 방법

제너레이트 블록으로 장점 단점 블록 만드는 방법

제너레이트 블록 플러그인을 활용해서 장단점 블록을 만드는 방법을 단계별로 알아보겠습니다.

  • 처음 시작은 항상 Container 블록으로 시작하는 것이 좋습니다.

블록 편집기에서, 블록 추가 아이콘을 클릭한 Container 블록을 에디터에 추가합니다.

워드프레스 장점 단점 블록 만드는 방법(제너레이트 블록)

다시 블록 추가 아이콘을 클릭해서 Grid 블록을 추가합니다.

제너레이트 블록 그리드 추가

Grid 블록을 생성하면 아래처럼 열(Colume) 개수를 선택할 수 있는 창이 나옵니다. 장단점 블록은 두개의 열이 필요하기 때문에 2번째를 선택합니다.

제너레이트 블록 그리드 열 선택

설명 편의를 위해서 목록을 표시를 활성화한 후 진행하겠습니다. 상단의 ①문서 아이콘을 클릭해서, 목록 창을 활성화합니다. ②Grid 블록을 선택한 후, ③HORIZONTAL GAP을 20으로 설정합니다.

제너레이트 블록 그리드 갭 설정

블록 에디터에서 ①사각형 점선 컨테이너를 클릭한 후 블록 추가 아이콘을 클릭합니다. ②Headline을 검색해서 제목 블록을 추가한 후 ‘장점’으로 입력합니다. 제목의 H2~6 태그는 순서에 맞게 변경하시면 됩니다.(H태그로 지정하고 싶지 않으신 경우, 문단 블록을 추가하시면 됩니다.)

제너레이트 블록 컨테이너 제목 추가

제목을 입력하고 엔터를 누른 후, 블록 추가 아이콘을 클릭해서 목록 블록을 추가합니다. 이 과정까지 완료하시면 기본 뼈대는 완성되었습니다. 우측의 컨테이너도 같은 방식으로 만들어 주시면 됩니다.

목록에서 컨테이너를 선택한 후 복사하여 우측 그리드에 붙여넣기 하면 더 빠르게 작업이 가능합니다.

제너레이트 블록 컨테이너 목록 추가

목록에서 ①과 ②컨테이너 블록 모두 ③Spacing의 PADDING을 10~15로 설정합니다.

PADDING 옆에 (-) 아이콘을 클릭하면 전체 측면을 한번에 조절할 수 있습니다.

제너레이트 블록 패딩 설정

위와 똑같은 방식으로 색상(Colors) 항목의 배경(Background) 색상을 설정합니다. 색상은 굳이 초록색과 빨간색일 필요는 없기 때문에 원하시는 색상으로 설정하시면 됩니다.

제너레이트 블록 배경 색상 석정

목록에서 컨테이너 블록을 선택한 후 Sizing 항목의 WIDTH를 90~100%사이로 설정하고 값 단위를 퍼센트(%)로 변경합니다. 마지막으로 아래 Margin 항목에 Left, Right를 auto로 둘다 설정해서 컨테이너를 중간으로 위치를 조절합니다.

제너레이트 블록 마진 너비 및 마진 설정

서식(패턴)으로 저장하기

장단점 블록 생성이 완료되었습니다. 생성을 완료한 후 필요할 때 마다 불러와서 사용할 수 있게 패턴 블록으로 저장해 놓으시는 것을 추천드립니다. 자세한 사용 방법은 이전 포스팅을 참고해 주세요.

워드프레스 패턴(서식, 재사용 가능 블록) 만들기 및 사용 방법
제너레이트 블록 패턴 생성 방법

장점 단점 블록 서식 모음 및 적용 방법

제너레이트 블록을 사용 방법이 익숙하지 않으신 분들을 위해 기본적인 레이아웃 템플릿을 만들었습니다. 블록 템플릿 적용 방법을 먼저 확인하신 후, 아래 미리보기 이미지를 참고하셔서 블록을 복사하시면 됩니다.

블록 복사 및 적용 방법

아래 예시 장단점 블록을 에디터에 복사하는 방법에 대해서 알아보겠습니다.

글 편집기로 이동한 후, 우측 상단의 더 보기를 클릭하여 코드 편집기로 들어갑니다.

제너레이트 블록 템플릿 복사 방법

①입력란에 복사한 코드를 붙여넣기 한 후, ②코드 편집기 나가기를 클릭해서 비주얼 모드로 진입합니다.

제너레이트 블록 비주얼 모드 html 편집 모드 진입 방법

비주얼 모드로 진입 시, 아래처럼 블록이 정상적으로 복사된 것을 확인하실 수 있습니다.

제너레이트 블록 장던점 블록 서식

장단점 블록 예시 모음

제너레이트 블록 플러그인이 설치되어 있어야만 정상적으로 블록을 복사하실 수 있씁니다. 코드를 확인하시려면, 아래 [코드 보기]를 클릭하여 확인하실 수 있습니다.

예시1 – 디자인 요소 최소화한 기본 블록

장단점 블록 예시 1

⚙️ 코드 보기

<!-- wp:generateblocks/grid {"uniqueId":"406a9155","columns":2,"horizontalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"d4514ddb","isGrid":true,"gridId":"406a9155","backgroundColor":"#a3ebb8","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"5px","borderTopRightRadius":"5px","borderBottomLeftRadius":"5px","borderBottomRightRadius":"5px","borderTopWidth":"","borderTopStyle":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"eb791af4","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"25px"},"spacing":{"marginLeft":"10px"},"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-eb791af4 gb-headline-text"><strong>장점</strong></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"ba621798","isGrid":true,"gridId":"406a9155","backgroundColor":"#ffcece","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"5px","borderTopRightRadius":"5px","borderBottomLeftRadius":"5px","borderBottomRightRadius":"5px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"12745e76","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"25px"},"spacing":{"marginLeft":"10px"},"borders":{"borderTopWidth":"","borderRightWidth":"","borderBottomWidth":"","borderLeftWidth":"","borderTopStyle":"","borderRightStyle":"","borderBottomStyle":"","borderLeftStyle":"","borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""},"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-12745e76 gb-headline-text"><strong>단점</strong></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

예시2 – 테두리 및 아이콘 추가

장단점 블록 예시 2

⚙️ 코드 보기

<!-- wp:generateblocks/container {"uniqueId":"096f96d1","isDynamic":true,"blockVersion":4,"sizing":{"width":"90%"},"spacing":{"marginLeft":"AUTO","marginRight":"AUTO"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"f0656181","columns":2,"horizontalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"ee4ccea8","isGrid":true,"gridId":"f0656181","backgroundColor":"#a3ebb8","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"5aa1677a","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"25px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-5aa1677a"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span><span class="gb-headline-text"><strong>장점</strong></span></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"e8f6bf74","isGrid":true,"gridId":"f0656181","backgroundColor":"#ffcece","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"9cd574ef","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"25px"},"borders":{"borderTopWidth":"","borderRightWidth":"","borderBottomWidth":"","borderLeftWidth":"","borderTopStyle":"","borderRightStyle":"","borderBottomStyle":"","borderLeftStyle":"","borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-9cd574ef"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"></path></svg></span><span class="gb-headline-text"><strong>단점</strong></span></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

예시3 – 색상 강조

장단점 블록 예시 3

⚙️ 코드 보기

<!-- wp:generateblocks/container {"uniqueId":"269556d3","isDynamic":true,"blockVersion":4,"sizing":{"width":"90%"},"spacing":{"marginLeft":"auto","marginRight":"auto"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"f9869846","columns":2,"horizontalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"533cd5b8","isGrid":true,"gridId":"f9869846","backgroundColor":"#0a8c6c","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"703dc1e9","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"25px"},"textColor":"var(\u002d\u002dbase-3)","hasIcon":true,"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-703dc1e9"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span><span class="gb-headline-text"><strong>장점</strong></span></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list {"textColor":"base-3"} -->
<ul class="has-base-3-color has-text-color"><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2a65dc99","isGrid":true,"gridId":"f9869846","backgroundColor":"#c33a3a","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"c491e45f","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"25px"},"borders":{"borderTopWidth":"","borderRightWidth":"","borderBottomWidth":"","borderLeftWidth":"","borderTopStyle":"","borderRightStyle":"","borderBottomStyle":"","borderLeftStyle":"","borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""},"textColor":"var(\u002d\u002dbase-3)","hasIcon":true,"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-c491e45f"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"></path></svg></span><span class="gb-headline-text"><strong>단점</strong></span></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list {"textColor":"global-color-9"} -->
<ul class="has-global-color-9-color has-text-color"><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

예시4 – 심플한 색상

장단점 블록 예시 4

⚙️ 코드 보기

<!-- wp:generateblocks/container {"uniqueId":"980991a9","backgroundColor":"#f1f1f1","isDynamic":true,"blockVersion":4,"sizing":{"width":"90%"},"spacing":{"marginLeft":"AUTO","marginRight":"AUTO","paddingTop":"15px","paddingLeft":"25px","paddingRight":"25px","paddingBottom":"15px"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"1a8001b6","columns":2,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"42a300bd","isGrid":true,"gridId":"1a8001b6","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"aa47e23a","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"28px"},"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-aa47e23a gb-headline-text"><strong>장점</strong></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"359ce403","isGrid":true,"gridId":"1a8001b6","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"},"borders":{"borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""}} -->
<!-- wp:generateblocks/headline {"uniqueId":"7c37c63b","element":"p","blockVersion":3,"display":"flex","alignItems":"center","columnGap":"0.5em","typography":{"fontSize":"28px"},"borders":{"borderTopWidth":"","borderRightWidth":"","borderBottomWidth":"","borderLeftWidth":"","borderTopStyle":"","borderRightStyle":"","borderBottomStyle":"","borderLeftStyle":"","borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""},"iconStyles":{"height":"1em","width":"1em"}} -->
<p class="gb-headline gb-headline-7c37c63b gb-headline-text"><strong>단점</strong></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>내용</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

마치며

워드프레스에서 제너레이트 블록을 활용해서 장점 단점 블록을 만드는 방법에 대해서 알아봤습니다. 워드프레스 블록 플러그인들 대부분이 마우스로 조작 가능한 커스터마이징 기능들을 제공하기 때문에 어렵지 않게 블록을 만드실 수 있습니다. 아직 직접 만들어 보지 않으셨다면, 위 방법을 따라 커스텀 블록을 만들어서 포스팅을 꾸며 보시기를 바랍니다.

제너레이트프레스: 테마 템플릿 적용 방법(Site Library)
제너레이트 블록 홈페이지 바로가기

워드프레스 보안 강화: 로그인 시도 횟수 제한 설정(플러그인 )

워드프레스 텍스트 에디터 자리 표시자 ‘입력/블록 선택’ 변경 방법

You cannot copy content of this page

목차

→ 목차