본문으로 건너뛰기

스킨

dhtmlxGantt는 Gantt 차트의 전반적인 모양을 변경하는 데 사용할 수 있는 미리 정의된 여러 스킨을 제공합니다:

  1. Terrace (default)
  2. Dark
  3. Material
  4. Contrast Black
  5. Contrast White
  6. Skyblue
  7. Meadow
  8. Broadway

v9.0부터 모든 스킨은 메인 파일인 dhtmlxgantt.css에 번들로 포함됩니다. 스킨은 gantt.skin 속성을 설정하여 활성화할 수 있습니다:

gantt.skin = "dark";

또는 gantt.setSkin() 메서드를 호출하여:

gantt.setSkin("dark");

Gantt v8.0 및 이전 버전에서는 스킨이 각각의 CSS 파일로 정의되어 있습니다.

글꼴 사용​

기본적으로 스킨은 Inter 글꼴을 https://fonts.googleapis.com에서 가져옵니다. Google Fonts에 대해 더 자세히 알아보려면 여기를 참조하세요.

@import (css) url(
'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'
);

필요한 경우, codebase/sources/less/ 폴더에 있는 .less 파일에서 글꼴을 직접 제거한 후, Skins Customization 문서에 설명된 대로 스킨을 다시 빌드할 수 있습니다.

'Terrace' skin​

기본 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

gantt-default-skin

기본 스킨

'Dark' skin​

'D​ark' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "dark";

gantt_dark_skin

Dark skin

'Material' skin​

'Material' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "material";

gantt_material_skin

Material theme

v6.3부터 Material 스킨에서 Roboto 글꼴의 임포트가 제거되었습니다. 필요하면 수동으로 Roboto 글꼴을 추가할 수 있습니다. 예시는 다음과 같습니다:

<link rel="stylesheet" href="'https://fonts.googleapis.com/css?'+
    +'family="Open+Sans|Roboto:regular,medium,thin,bold"'">

'Contrast Black' skin​

'Contrast Black' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "contrast-black";

gantt_contrast_black_skin

High contrast theme - Black

'Contrast White' skin​

'Contrast White' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "contrast-white";

gantt_contrast_white_skin

High contrast theme - White

'Skyblue' skin​

'Skyblue' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "skyblue";

gantt-skyblue-skin

'Skyblue' skin

'Meadow' skin​

'Meadow' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "meadow";

gantt-meadow-skin

'Meadow' skin

'Broadway' skin​

'Broadway' 스킨을 적용하려면 기본 CSS 파일을 포함합니다:

  • dhtmlxgantt.css

그리고 gantt.skin 속성으로 스킨을 설정합니다:

gantt.skin = "broadway";

gantt-broadway-skin

'Broadway' skin

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support