스타일링

막대는 테마 색으로 그려져요. 작업에 color를 주면 원하는 색으로 막대를 그리고, className을 주면 직접 만든 CSS를 붙일 수 있어요.

상태에 따라 막대 색 지정하기Copy Anchor Link

color는 Task의 선택 필드예요. var(--brand)나 rgb(255 0 0 / 50%)를 비롯해 CSS 색상 값이면 무엇이든 받고, 앞뒤 공백만 없앤 뒤 그대로 전달해요. 나머지 필드는 작업 데이터에서 확인해요.

const tasks: Task[] = [
  { id: 'audit', name: 'Security audit', parentId: null, sequence: '1',
    startDate: '2026-04-06', endDate: '2026-04-10', progress: 40,
    color: '#2563eb' },
];

막대와 호버 음영, 진행률 채움, 라벨이 모두 이 값 하나에서 나와요. 그래서 색을 지정한 막대에는 테마 회색이 섞이지 않아요. 라벨은 막대 색이 감당할 수 있는 쪽으로 검정이나 흰색이 돼요.

옅은 막대에서는 검정 라벨이 더 어두운 진행률 채움 위에서 대비가 낮아져요.

color는 모든 테마 토큰보다 우선해요. 토큰은 폴백이라서 --gantt-bar-bg를 차트 전체에 지정해도 색을 지정한 작업은 그대로예요.

요약 막대는 요약 토큰으로 폴백하므로, 요약 행과 일반 작업의 색 차이는 색을 지정하지 않은 막대에서만 보여요. 토큰 목록은 테마에서 확인해요.

color가 undefined이거나 ''이거나 공백뿐이면 아무 값도 설정하지 않아요. 그 막대는 색을 지정하지 않은 막대처럼 그려져요.

color는 막대만 바꿔요. 모서리 반경과 그림자, 선택 외곽선과 의존성 화살표는 스타일시트와 테마가 정해요. 작업 목록은 color를 읽지 않아요.

폭이 56px보다 좁은 막대는 이름을 오른쪽 가장자리 바깥에 그려요. 이때 이름은 color와 상관없이 테마의 흐린 색을 써요.

작업에 직접 만든 CSS 붙이기Copy Anchor Link

작업에 준 className은 그 작업의 막대와 작업 목록 행에 함께 붙어요. 두 곳 모두 클래스 문자열 맨 뒤에 붙어요.

{ id: 'audit', name: 'Security audit', parentId: null, sequence: '1',
  startDate: '2026-04-06', endDate: '2026-04-10', className: 'blocked' }

.gantt-task-bar.blocked {
  background: repeating-linear-gradient(
    45deg,
    #b45309,
    #b45309 6px,
    #92400e 6px,
    #92400e 12px
  );
}

.gantt-grid-row.blocked .gantt-grid-cell {
  font-style: italic;
}

class 속성 안의 순서는 캐스케이드에 영향을 주지 않아요. 직접 쓴 규칙은 명시도로 이겨요. .gantt-task-bar.blocked는 .gantt-task-bar보다 명시도가 높고, 명시도가 같으면 뒤에 선언한 쪽이 이겨요.

한 레인에 여러 작업이 있는 행은 첫 번째 작업의 className을 받아요. 각 막대는 자기 것을 그대로 써요.

툴팁 끄기Copy Anchor Link

showTooltip의 기본값은 true예요. 마우스를 올렸을 때 뜨는 카드와 진행률 핸들을 드래그하는 동안 표시되는 % 값을 제어하고, false로 두면 둘 다 사라져요.

false는 포인터 드래그가 만드는 라이브 영역 알림도 없애요. 키보드와 스크린 리더에서 확인해요.

이동과 크기 조절은 어느 쪽이든 카드를 띄우지 않아요. 드래그 중인 가장자리의 눈금 셀에 쓰이는 날짜가 그 표시이고, 헤더의 일부라서 showTooltip의 영향을 받지 않아요. 로케일과 날짜 형식에서 확인해요.

적용 전에 확인하기Copy Anchor Link

• color는 직접 지정하는 값이에요. 팔레트나 범례가 없으므로 작업을 넘기기 전에 상태를 색으로 매핑해요.
• 파생되는 음영 두 개에는 color-mix가, 계산되는 라벨 색에는 상대 색상 문법이 필요해요. 상대 색상 문법은 지원하는 브라우저가 더 적어요. 둘 중 하나라도 없으면 막대는 지정한 color를 그대로 쓰고 라벨은 테마의 막대 글자색으로 폴백해요.
• 작업 목록은 작업 이름을 그리고, showRowNumbers를 켜면 행의 sequence를 더해요. 나머지 필드는 상세 패널에 두고, 작업 목록과 계층 구조에서 확인해요.
• 헤더 셀에는 텍스트만 들어가고 마크업은 넣을 수 없어요. renderDetail은 차트의 유일한 렌더 prop이고 스타일링용 훅은 아니에요. 나머지 화면 요소는 CSS로만 바꿔요.

prop 정의는 GanttProps, color와 className 필드는 Task에서 확인해요.