CSS 서식으로 커스터마이즈하기

shinydashboard로 대시보드 만들기

Png Kee Seng

Researcher

shinydashboard를 더 맞춤화하려면?

어두운 테마는 "black" 스킨으로 설정할 수 있습니다
개별 객체의 모양을 바꿀 수 있을까요?
CSS(계단식 스타일시트) 코드로 가능합니다
다음은 CSS 초압축 강의입니다
- 세부사항은 너무 걱정하지 마세요

CSS 소개: 주석 추가

CSS는 스타일 언어입니다
- 각 객체의 표시를 제어합니다
CSS 코드는 선택자 블록들로 구성됩니다
- 속성, 하위 속성 등이 있습니다
- 각 기능의 표시를 기록하는 사전 역할을 합니다
CSS 코드는 문자열로 저장합니다
- 작은따옴표 '...'를 사용합니다
CSS에는 주석을 넣을 수 있습니다

css_code <- '
/* This is a comment */
'

CSS 소개: 선택자

블록에는 선택자가 있습니다
- 특정 기능에 대응합니다
.selector는 CSS 클래스입니다

css_code <- '
/* This is a selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* This is a selector class */
.selector {
  property1: value1;
  property2: value2;
}
`

CSS 소개: 선택자 조합

두 선택자 .class1와 .class2는 .class1 .class2로 결합할 수 있습니다
- .class1 내에서 .class2 하위 클래스를 선택합니다
공백이 중요합니다
- 없으면 코드가 올바르게 동작하지 않습니다

css_code <- '
.class1 .class2 {
  property1: value1;
  property2: value2;
  property3: value3;
}
`

더 구체적인 예시

shinydashboard 헤더의 글꼴 설정 변경
- .main-header .logo가 필요합니다
- .main-header 클래스를 선택 후 .logo 하위 클래스를 찾습니다
배경색을 검정으로 변경
- .skin-blue .main-header .logo가 필요합니다

css_code <- '
/* Format the text in the main header */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Change the background-color to black */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

전체 예시

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
이외에도 많은 선택자 조합이 있습니다

css_code <- '
.main-header .logo {
  font-family: "helvetica",  serif, Times, "Times New Roman";
  font-weight: bold;
  font-size: 24px;
}
.skin-blue .main-header .logo {
          background-color: #000000; 
}

.skin-blue .main-header .logo:hover {
          background-color: blue; 
}

.skin-blue .main-header .navbar {
          background-color: #999999;
}
'

shinydashboard에 CSS 서식 적용

CSS 코드는 dashboardBody()에 넣어야 합니다

CSS가 적용된 shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

연습해 봅시다!

shinydashboard로 대시보드 만들기