시작하기무료로 시작하기

앱의 모양을 바꾸기 위해 CSS 추가하기

CSS는 브라우저가 페이지의 요소를 어떻게 표시할지 지시하는 데 쓰이는 매우 널리 사용되는 마크업 언어예요. Shiny의 기본 모양에서 벗어나 앱의 다양한 항목을 원하는 스타일로 꾸미려면 CSS가 필요합니다.

CSS는 페이지의 각 요소와 연결된 property: value 쌍으로 이루어진 규칙들의 집합으로 구성되어 있다는 점을 기억하세요. CSS를 별도의 파일에 작성하고 includeCSS()로 가져와 앱에 포함할 수도 있지만, 이 강의에서는 UI에서 tags$style() 안에 CSS 코드를 직접 넣는 더 간단한 방법을 사용하겠습니다.

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

사례 연구: R의 Shiny로 웹 애플리케이션 만들기

강의 보기

연습 안내

  • 다음과 같이 앱을 수정하는 CSS 규칙을 작성하세요:
    • 다운로드 버튼의 배경색을 주황색으로 바꾸세요(5행).
    • 다운로드 버튼의 글자 크기를 20픽셀로 바꾸세요(8행).
    • 테이블의 글자 색을 빨간색으로 바꾸세요(13행).
  • 이 CSS 규칙들을 Shiny 앱에 추가하세요(20행).

실습형 인터랙티브 연습

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

my_css <- "
#download_data {
  /* Change the background color of the download button
     to orange. */
  background: ___;

  /* Change the text size to 20 pixels. */
  font-size: ___px;
}

#table {
  /* Change the text color of the table to red. */
  color: ___;
}
"

ui <- fluidPage(
  h1("Gapminder"),
  # Add the CSS that we wrote to the Shiny app
  tags$style(___),
  tabsetPanel(
    tabPanel(
      title = "Inputs",
      sliderInput(inputId = "life", label = "Life expectancy",
                  min = 0, max = 120,
                  value = c(30, 50)),
      selectInput("continent", "Continent",
                  choices = c("All", levels(gapminder$continent))),
      downloadButton("download_data")
    ),
    tabPanel(
      title = "Plot",
      plotOutput("plot")
    ),
    tabPanel(
      title = "Table",
      DT::dataTableOutput("table")
    )
  )
)

server <- function(input, output) {
  filtered_data <- reactive({
    data <- gapminder
    data <- subset(
      data,
      lifeExp >= input$life[1] & lifeExp <= input$life[2]
    )
    if (input$continent != "All") {
      data <- subset(
        data,
        continent == input$continent
      )
    }
    data
  })
  
  output$table <- DT::renderDataTable({
    data <- filtered_data()
    data
  })

  output$download_data <- downloadHandler(
    filename = "gapminder_data.csv",
    content = function(file) {
      data <- filtered_data()
      write.csv(data, file, row.names = FALSE)
    }
  )

  output$plot <- renderPlot({
    data <- filtered_data()
    ggplot(data, aes(gdpPercap, lifeExp)) +
      geom_point() +
      scale_x_log10()
  })
}

shinyApp(ui, server)
코드 편집 및 실행