크기와 레이아웃

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

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

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

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

픽셀 값

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

함께 보기

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