크기와 레이아웃

<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는 여기서 아무 일도 하지 않고 무시됩니다(설정하면 위젯이 경고를 로그에 남깁니다).

<!-- 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는 방문자가 그것을 클릭할 때 열리는 대화 상자와 게임의 크기를 정합니다.

<!-- 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-*를 설정하세요.

좁은 화면에서

게임이 주어진 공간보다 넓으면(휴대폰, 좁은 열 등), 위젯은 게임을 그 공간 안에 유지하므로 페이지를 옆으로 밀어내는 일이 없습니다. 어떻게 맞춰지는지는 게임 작성자가 게임의 caputchin.json에 어떻게 선언했는지에 달려 있습니다.

반응형 게임은 더 좁은 너비를 받아 그에 맞게 다시 그려지며, 높이는 평소와 같습니다.
비반응형으로 표시된 게임(marketplace.support 아래의 "responsive": false)은 형태를 유지합니다. 위젯이 게임 전체를 고르게 축소하므로 모습은 같고 크기만 작아집니다. modal과 fullscreen에서는 휴대폰을 가로로 든 경우를 위해 화면 높이에도 맞게 축소됩니다.

이는 게임이 자기 상자의 크기를 정할 때 적용됩니다. inline에서는 width와 height를 설정하지 않고 두는 것을, modal / fullscreen에서는 overlay-width와 overlay-height가 둘 다 full이 아닌 것을 뜻합니다. 설정하지 않고 둔 축도, 게임 작성자가 게임이 선호하는 자리(caputchin.json)에서 그 축을 full로 정했다면 full로 칩니다. 어떤 축에서 full인 상자는 대신 게임을 늘려 상자를 채웁니다.

픽셀 값

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

함께 보기

게임 위젯 요소: <caputchin-game>의 전체 속성 모음.
위젯 메서드와 이벤트: 위젯을 몰아가고 그것에 반응하기.