> For the complete documentation index, see [llms.txt](https://s-organization-887.gitbook.io/hostyle-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://s-organization-887.gitbook.io/hostyle-web/wordpress-2/undefined.md).

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

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

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

***

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

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

***

##  2. 컬럼 블록 (Columns)

####  컬럼이란?

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

<figure><img src="/files/fzIOagDICTYzNhbzDK61" alt="" width="375"><figcaption></figcaption></figure>

#### 🎯 사용 방법

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

<figure><img src="/files/J614qbNZzndPuscCGpGm" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/DIMiXuT0aQbmgXUrkv4T" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/3DcsnI6jKUDgoqn0WJkO" alt=""><figcaption></figcaption></figure>

#### 💡 활용 예시

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

***

## &#x20;3. 그리드 레이아웃 만들기

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

***

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

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

<figure><img src="/files/OK20cDfh3VzSmZmq6fLs" alt="" width="563"><figcaption></figcaption></figure>

***

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

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

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

<figure><img src="/files/nsiBGHgTvqYxI82eDi16" alt=""><figcaption></figcaption></figure>

***

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

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

예시:

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

***

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

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

***

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

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

┆

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

┆

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

<figure><img src="/files/Kr085uANbEzQFjEjQ9UR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
그리드 줄 추가 : 그리드 생성 후 그리드 공간 안에서 엔터 누르면 줄이 증가합니다.
{% endhint %}

<figure><img src="/files/WZ4bBeNdPAZERuductA1" alt=""><figcaption></figcaption></figure>

***

### ✅ 5단계. 반응형 확인

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

<figure><img src="/files/ILxHQSMbAJFgYDIntsLr" alt="" width="295"><figcaption></figcaption></figure>

***

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

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

<figure><img src="/files/53IFuc7BT0iwNs4P7gv2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YW5VwqavqpnWv3boaiRQ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PWifYmIACEsCi6nYVCka" alt="" width="364"><figcaption></figcaption></figure>

***

### 📌 마무리 팁

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

***

## &#x20;4. 여백 설정 (Padding / Margin)

#### 🎯 방법 A. 블록 자체 설정

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

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

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

<figure><img src="/files/lNe6bd37uqBAYTlvMn1q" alt=""><figcaption></figcaption></figure>

***

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

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

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

***

### ✅ 마무리 팁

<table><thead><tr><th width="189">목적</th><th>추천 블록</th></tr></thead><tbody><tr><td>컬럼 구조</td><td>기본 컬럼 블록, 플러그인 Row 블록</td></tr><tr><td>반복형 카드</td><td>Stackable Grid, Spectra Container</td></tr><tr><td>여백 조절</td><td>고급 설정 or 플러그인 여백 도구</td></tr><tr><td>반응형 대응</td><td>플러그인 사용 시 모바일 자동 정렬됨</td></tr></tbody></table>

***

### 📌 추가 자료

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