시작하기무료로 시작하기

box로 와이어프레이밍하기

새로운 행은 fluidRow()로 정의합니다.

또한, 본문에는 내용을 구성하기 위해 box()를 추가할 수 있습니다. 여러 개의 box()를 추가할 수 있고, 각각의 기본 너비는 6이며 width 인자로 조정할 수 있습니다. 한 행의 최대 너비가 12이므로, 기본 설정의 box()는 한 행에 두 개만 놓을 수 있습니다. height도 설정할 수 있어 다양한 크기의 박스를 배치할 수 있습니다.

이러한 box()는 여기서 두 가지 주요 역할을 합니다. 첫째, shinydashboard의 구성 요소를 정리하고, 둘째, 와이어프레이밍을 수행하여 실제 콘텐츠를 넣기 전에 각 객체의 배치를 계획할 수 있게 합니다.

이번 연습에서는 비어 있는 박스로 와이어프레이밍을 해 보겠습니다.

shiny와 shinydashboard 패키지는 이미 로드되어 있습니다. 대시보드 헤더와 사이드바는 각각 header와 sidebar에 저장되어 있습니다.

이 연습은 강의의 일부입니다

shinydashboard로 대시보드 만들기

강의 보기

연습 안내

  • 첫 번째 행에는 너비가 2, 2, 8인 box()를 각각 하나씩 추가하세요.
  • 두 번째 행에는 전체 행을 채우고 높이가 200인 box()를 하나 추가하세요.
  • 세 번째 행에는 너비가 동일한 빈 박스 두 개를 추가하고, 레이블을 각각 "A slider goes here"와 "Some info boxes go here"로 지정하세요.

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

body <- dashboardBody(
  # Add three boxes with widths 2, 2 and 8
  fluidRow(box("Some buttons go here", ___, height = 100), 
           ___("Checkboxes go here", ___, height = 50),
           ___("A chart goes here", ___, height = 150)),
  # Add one box that fills the entire row and has height 200
  fluidRow(___("Data table goes here"), ___, ___),
  # Add a third row containing two boxes with equal widths
  fluidRow(___)
)

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
코드 편집 및 실행