스킨(Skins)

dhtmlxGantt는 Gantt 차트의 전체적인 외관을 손쉽게 변경할 수 있도록 다양한 기본 스킨을 제공합니다:

버전 9.0부터는 모든 스킨이 메인 dhtmlxgantt.css 파일에 포함되어 있습니다. 스킨을 활성화하려면 gantt.skin 속성을 설정하면 됩니다:

gantt.skin = "dark";

또는 gantt.setSkin() 메서드를 사용할 수도 있습니다:

gantt.setSkin("dark");

버전 8.0 및 이전 버전에서는 스킨이 별도의 CSS 파일로 제공됩니다.

기본적으로 스킨은 https://fonts.googleapis.com에서 Inter 폰트를 로드합니다. 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 파일에서 폰트 import를 직접 제거하고, 스킨 커스터마이제이션 문서의 안내에 따라 스킨을 다시 빌드할 수 있습니다.

'Terrace' 스킨

기본 스킨을 사용하려면 기본 CSS 파일을 포함하세요:

DHTMLX Gantt - Light Theme

'Dark' 스킨을 적용하려면 기본 CSS 파일을 포함하세요:

그런 다음 gantt.skin 속성을 사용하여 스킨을 설정하세요:

gantt.skin = "dark";

DHTMLX Gantt - Dark Theme

'Material' 스킨을 사용하려면 기본 CSS 파일을 포함하세요:

gantt.skin 속성으로 스킨을 설정하세요:

gantt.skin = "material";

버전 6.3부터 Material 스킨은 더 이상 Roboto 폰트를 자동으로 import하지 않습니다. 필요하다면 다음과 같이 Roboto 폰트를 수동으로 추가할 수 있습니다:

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

'Contrast Black' 스킨을 사용하려면 기본 CSS 파일을 포함하세요:

그런 다음 gantt.skin 속성으로 스킨을 설정하세요:

gantt.skin = "contrast-black";

'Contrast White' 스킨을 적용하려면 기본 CSS 파일을 포함하세요:

gantt.skin 속성으로 스킨을 설정하세요:

gantt.skin = "contrast-white";

'Skyblue' 스킨을 사용하려면 기본 CSS 파일을 포함하세요:

gantt.skin 속성을 통해 스킨을 설정하세요:

gantt.skin = "skyblue";

'Meadow' 스킨을 적용하려면 기본 CSS 파일을 포함하세요:

gantt.skin 속성을 사용하여 스킨을 설정하세요:

gantt.skin = "meadow";

'Broadway' 스킨을 적용하려면 기본 CSS 파일을 포함하세요:

gantt.skin 속성으로 스킨을 설정하세요:

gantt.skin = "broadway";