페이지 레이아웃 (컬럼,그리드,여백)

WordPress 페이지 레이아웃 구성 가이드

컬럼, 그리드, 여백 구성으로 레이아웃을 자유롭게 디자인하는 방법

✅ 1. 레이아웃 구성의 기본: 블록 에디터

WordPress는 기본적으로 **블록 기반 에디터(Gutenberg)**를 사용합니다. 페이지나 글 작성 시 다양한 레이아웃 블록을 활용해 구성할 수 있습니다.

2. 컬럼 블록 (Columns)

컬럼이란?

콘텐츠를 좌우로 나눠 배치하는 방식 예: 왼쪽에 이미지, 오른쪽에 텍스트

🎯 사용 방법

페이지 편집기에서 “+ 블록 추가” 클릭
“열(Columns)” 검색 후 선택
2개, 3개, 70/30 비율 등 원하는 형태 선택
각 칸 안에 이미지 / 텍스트 / 버튼 등 원하는 블록 삽입

💡 활용 예시

프로필 + 설명
서비스 목록
버튼 + 이미지 병렬 배치

3. 그리드 레이아웃 만들기

Gutenberg(블록 에디터)에서 제공하는 기본 그리드 블록을 사용하여 콘텐츠를 가로로 배치하거나, 카드 형태의 그리드 레이아웃을 만드는 방법

✅ 1단계. 그리드 블록 추가

페이지 편집기에서 + 버튼 클릭
검색창에 "그리드" 입력
"그리드" 블록 클릭하여 추가

✅ 2단계. 열(Column) 개수 선택

블록을 추가하면 2열 / 3열 / 4열 / 사용자 지정 중 선택 가능
기본적으로는 3열이 많이 사용됨 (서비스 소개, 기능 목록 등)

✅ 예: 3열 그리드 선택 → 좌우 3개의 칸이 생성됨

✅ 3단계. 각 칸 안에 콘텐츠 추가

각 열(컬럼) 안에 원하는 콘텐츠를 자유롭게 넣을 수 있습니다.

예시:

넣을 콘텐츠 유형

사용하는 블록

이미지

이미지 블록

아이콘

이모지, 또는 플러그인 블록

제목

단락, 헤딩 블록

설명

단락 블록

버튼

버튼 블록 (링크 연결 가능)

✅ 4단계. 여백 및 정렬 조정

각 열마다 정렬(가운데, 좌측, 우측)을 설정 가능
전체 그리드 블록 선택 후 우측에서 여백(padding) 또는 배경색 설정 가능
블록을 감싸는 그룹(Group) 블록으로 추가 마진/패딩 줄 수도 있음

🧩 실전 예시: 3열 카드형 서비스 소개

[그리드: 3열]
 ├─ [이미지]
 ├─ 제목: "빠른 설치"
 └─ 설명: "1분만에 워드프레스 설치 완료"

┆

 ├─ [이미지]
 ├─ 제목: "자동 백업"
 └─ 설명: "매일 백업으로 안심 운영"

┆

 ├─ [이미지]
 ├─ 제목: "쉬운 관리"
 └─ 설명: "초보자도 쉽게 설정 가능"

그리드 줄 추가 : 그리드 생성 후 그리드 공간 안에서 엔터 누르면 줄이 증가합니다.

✅ 5단계. 반응형 확인

워드프레스 기본 그리드는 자동 반응형입니다.
화면이 좁아질수록 1열, 2열로 자동 전환되므로 모바일에서도 깔끔하게 표시됩니다.

※추가 - 분리자 선 (구분자) 사용

분리자 을 이용하면 페이지의 각 영역을 시각적으로 분리하는 효과를 주며, 보다 깔끔한 페이지 구분선이 됩니다.

📌 마무리 팁

항목

4. 여백 설정 (Padding / Margin)

🎯 방법 A. 블록 자체 설정

블록을 클릭하면 우측 설정창에 “고급 → 공백(padding/margin)” 항목 존재
숫자(예: 20px) 또는 %, em 단위로 조절 가능

🎯 방법 B. 플러그인 이용 시 더 쉬움

예: Kadence Blocks → 각 블록마다 시각적으로 마진/패딩 설정 가능

📝 실전 예시: 2단 컬럼 + 버튼 + 여백 구성

css복사편집[컬럼 블록 - 2개]
 ├ 왼쪽: 이미지
 └ 오른쪽:
     ├ 제목 (헤딩 블록)
     ├ 설명 텍스트
     ├ 버튼 블록 (링크 연결)
     └ 여백: 아래 패딩 40px 적용

이렇게 구성하면 대표 소개 섹션으로도 훌륭하게 사용 가능

✅ 마무리 팁

목적

📌 추가 자료

더 고급 디자인을 원하는 경우 Elementor 같은 페이지 빌더도 고려 가능 그러나 블록 에디터 + Kadence Blocks만으로도 90% 구현 가능

PreviousKBoard 게시판 만들기 Next버튼 생성

Last updated 3 months ago