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

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

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

---

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

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

---

2. 컬럼 블록 (Columns)

컬럼이란?

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

🎯 사용 방법

1. 페이지 편집기에서 “+ 블록 추가” 클릭

2. “열(Columns)” 검색 후 선택

3. 2개, 3개, 70/30 비율 등 원하는 형태 선택

4. 각 칸 안에 이미지 / 텍스트 / 버튼 등 원하는 블록 삽입

💡 활용 예시

• 프로필 + 설명

• 서비스 목록

• 버튼 + 이미지 병렬 배치

---

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

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

---

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

1. 페이지 편집기에서 + 버튼 클릭

2. 검색창에 "그리드" 입력

3. "그리드" 블록 클릭하여 추가

---

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

• 블록을 추가하면 2열 / 3열 / 4열 / 사용자 지정 중 선택 가능

• 기본적으로는 3열이 많이 사용됨 (서비스 소개, 기능 목록 등)

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

---

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

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

예시:

넣을 콘텐츠 유형	사용하는 블록
이미지	이미지 블록
아이콘	이모지, 또는 플러그인 블록
제목	단락, 헤딩 블록
설명	단락 블록
버튼	버튼 블록 (링크 연결 가능)

---

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

• 각 열마다 정렬(가운데, 좌측, 우측)을 설정 가능

• 전체 그리드 블록 선택 후 우측에서 여백(padding) 또는 배경색 설정 가능

• 블록을 감싸는 그룹(Group) 블록으로 추가 마진/패딩 줄 수도 있음

---

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

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

┆

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

┆

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

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

---

✅ 5단계. 반응형 확인

• 워드프레스 기본 그리드는 자동 반응형입니다.

• 화면이 좁아질수록 1열, 2열로 자동 전환되므로 모바일에서도 깔끔하게 표시됩니다.

---

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

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

---

📌 마무리 팁

항목	추천 방식
여백 조절	상위 그룹 블록으로 감싸서 padding 추가
아이콘 사용	텍스트 이모지(예: 💡) 또는 SVG 이미지
버튼 넣기	각 칸 하단에 버튼 블록 추가 + 링크 연결
강조 색상	배경색 또는 그림자(shadow)는 고급 설정 or CSS 사용

---

4. 여백 설정 (Padding / Margin)

🎯 방법 A. 블록 자체 설정

• 블록을 클릭하면 우측 설정창에 “고급 → 공백(padding/margin)” 항목 존재

• 숫자(예: 20px) 또는 %, em 단위로 조절 가능

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

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

---

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

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

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

---

✅ 마무리 팁

목적	추천 블록
컬럼 구조	기본 컬럼 블록, 플러그인 Row 블록
반복형 카드	Stackable Grid, Spectra Container
여백 조절	고급 설정 or 플러그인 여백 도구
반응형 대응	플러그인 사용 시 모바일 자동 정렬됨

---

📌 추가 자료

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