---
type: reference
title: 크기와 레이아웃
summary: width, height, overlay-width, overlay-height 속성이 inline, modal, fullscreen 레이아웃에서 caputchin-game 요소의 크기를 어떻게 정하는지.
---

`<caputchin-game>`는 세 가지 레이아웃으로 렌더링할 수 있습니다(`layout` 속성으로 설정): `inline`, `modal`, `fullscreen`. 크기를 어떻게 정하느냐는 레이아웃에 달려 있는데, modal과 fullscreen 레이아웃은 **두 개의 별개 상자**를 보여 주기 때문입니다.

- **페이지 안 요소**: 당신의 페이지 흐름에 자리 잡는 것. `inline`에서는 게임 패널 전체이고, `modal` / `fullscreen`에서는 방문자가 게임을 열려고 클릭하는 작은 체크박스입니다.
- **게임 상자**: `modal` / `fullscreen`에서 위로 열리는 대화 상자로, 그 안에 게임이 들어 있습니다. (`inline`에는 별도의 대화 상자가 없습니다. 패널이 곧 게임입니다.)

네 개의 속성이 이 두 상자의 크기를 정합니다. 각 값은 `auto`(기본값), `full`(가용 공간을 채움), 또는 `480` 같은 양의 픽셀 수 중 하나입니다.

| 속성 | 크기를 정하는 대상 | 적용되는 곳 |
|---|---|---|
| `width` / `height` | 페이지 안 요소 | 모든 레이아웃 |
| `overlay-width` / `overlay-height` | 게임 상자(대화 상자 + 게임) | `modal`, `fullscreen` |

## Inline

inline은 상자가 하나라서 `width` / `height`가 패널 전체의 크기를 정합니다. `overlay-width` / `overlay-height`는 여기서 아무 일도 하지 않고 무시됩니다(설정하면 위젯이 경고를 로그에 남깁니다).

```html
<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>
```

## Modal과 fullscreen

여기서는 두 상자가 독립적입니다. `width` / `height`는 당신의 페이지에 있는 **입구 체크박스**의 크기를 정하고, `overlay-width` / `overlay-height`는 방문자가 그것을 클릭할 때 열리는 **대화 상자와 게임**의 크기를 정합니다.

```html
<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>
```

`overlay-width="full"`는 게임이 그 축을 따라 대화 상자를 채우게 합니다. 픽셀 값은 게임을 그 크기로 고정합니다(모달이 그 둘레를 꼭 맞게 감쌉니다). `fullscreen`에서는 대화 상자가 이미 뷰포트를 덮고 있으므로, `overlay-*`는 게임이 늘어나 그것을 채울지, 아니면 자기 크기로 가운데에 놓일지를 제어합니다.

## 게임 상자를 설정하지 않은 채로 둘 때

`overlay-width` / `overlay-height`를 설정하지 않으면, 게임 상자는 **게임 작성자**가 게임을 위해 고른 크기를 씁니다(그것이 선호하는 자리이며, 게임의 `caputchin.json`에 선언됩니다). 그래서 대개는 당신의 페이지 레이아웃을 위해 `width` / `height`만 있으면 되고, 게임은 알아서 합리적으로 크기를 정합니다. 그것을 덮어쓰고 싶을 때만 `overlay-*`를 설정하세요.

## 픽셀 값

밋밋한 숫자는 CSS 픽셀입니다: `width="500"`과 `width="500px"`는 같습니다. 0, 음수, 비숫자 값은 거부됩니다(속성은 기본값으로 되돌아가고 위젯이 경고를 로그에 남깁니다).

## 함께 보기

- [게임 위젯 요소](/docs/getting-started/add-a-game): `<caputchin-game>`의 전체 속성 모음.
- [위젯 메서드와 이벤트](/docs/references/widget-methods-and-events): 위젯을 몰아가고 그것에 반응하기.