레이아웃

OJS 콘텐츠의 레이아웃은 여러 방식으로 제어할 수 있습니다.

page-layout: full

이 예제는 page-layout: full을 사용해 콘텐츠가 페이지 전체 너비를 차지하도록 합니다.

---
title: "Layout"
format: 
  html: 
    page-layout: full
---

입력은 사이드바 패널에, 출력은 탭셋 패널에 넣었습니다(오른쪽 상단의 “Code” 버튼을 클릭하면 전체 소스 코드를 확인할 수 있습니다).

viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "부리 길이(최소):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "섬:"
  }
)

그래프

Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)

데이터

Inputs.table(filtered)

사용자 입력을 기반으로 데이터를 읽고 필터링합니다.

data = FileAttachment("palmer-penguins.csv").csv({typed: true})
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})

width와 layoutWidth: 세밀한 레이아웃 추적

ObservableHQ와 마찬가지로 ojs 셀은 메인 HTML 요소의 clientWidth를 추적하는 반응형 width를 지원합니다.

width

또한 레이아웃의 특정 부분 너비가 필요하다면 div에 ojs-track-layout CSS 클래스를 사용하세요. Quarto의 OJS 런타임은 이런 div를 모두 layoutWidth에서 추적합니다. 이 예제에서는 위의 탭셋에 penguins-tabset id가 있으며, 아래에서 해당 clientWidth를 반응형으로 확인할 수 있습니다. 웹페이지가 충분히 넓다면 사이드바가 일부 공간을 차지하므로 결과 탭셋의 너비는 더 작아집니다.

layoutWidth