OPEN GRID CSS Builder — A Type · B Type

그리드 생김새를 화면에서 고쳐 보고, 고친 값만 담은 CSS 파일로 내려받는 도구를 올렸습니다. 화면은 두 벌입니다 — A Type과 B Type.

라이브러리 판은 1.5.2 그대로입니다. 이번에 올린 것은 도구와 문서라 설치한 것을 갈아 끼울 일은 없습니다.

두 화면

들어가는 문은 데모 첫 화면에 있습니다. 두 화면의 썸네일과 단추를 나란히 놓았습니다.

A Type — 개별설정

표에서 고치고 싶은 자리를 마우스로 고릅니다. 행 바탕을 누르면 행 바탕만, 헤더를 누르면 헤더만 나옵니다. 고른 자리의 값만 옆에 뜨니 한 번에 한 곳씩 손봅니다.

B Type — 일괄설정

값을 한 판에 늘어놓습니다. 색·모서리·선·글자를 위에서 아래로 훑으며 고칩니다. 어디를 만졌고 어디를 안 만졌는지 한눈에 보입니다.

내려받으면 무엇이 나오나

실제로 눌러 받아 본 것입니다. 아무 것도 안 고쳤으면 내려받기 단추가 잠겨 있습니다 — 손으로 정한 값이 없으면 담을 것도 없습니다.

파일 이름 가운데 <이름> 자리에는 화면에서 적은 이름이 그대로 들어갑니다. 이름을 dispatch로 두고 받으면 og-dispatch.css가 나옵니다.

og-allowed.md는 짝꿍 문서입니다. 손으로 정한 값이 무엇이고, 안 만진 자리를 무엇이 채웠는지 표로 적혀 나옵니다. 팀에 그대로 돌려도 되게 만들었습니다.

받은 CSS 파일 속

A Type에서 행 바탕 하나만 고쳐 받은 파일입니다. 고친 값만 들어가고, 원래 값이 무엇이었는지 옆에 같이 적힙니다.

/* OPEN GRID · 손으로 정한 값만 담은 파일 · 2026-09-11
   예시 데이터 배차 목록

   넣는 법
   (1) open-grid 스타일 뒤에 이 파일을 한 줄 더 겁니다
   (2) 그리드를 만들 때 theme 에 이 이름을 적습니다 — theme: 'dispatch'
       이미 만든 그리드에 얹으려면 이 한 줄을 부릅니다 — grid.setTheme('dispatch')

   HTML 에 data-og-theme="dispatch" 를 미리 적지 마십시오.
   OpenGrid 가 그리드를 세울 때 그 자리에 default 를 씁니다. */

[data-og-theme="dispatch"] {
  /* 색 */
  --og-row-bg:       #ffeedd;  /* 원래 #ffffff */
  --og-row-hover-bg: #c3d1e2;  /* 원래 #e3f2fd */
}

넣는 법이 파일 머리에 같이 실립니다. 문서를 다시 찾아볼 일이 없게 했습니다.

한 가지 못 하는 것 — 행 높이

행 높이는 CSS만으로 안 바뀝니다. 그리드가 행 높이를 자바스크립트로 직접 박기 때문에, CSS에 값을 적어도 화면의 행은 그대로입니다. 감추지 않고 받는 파일에 그 자리 바로 옆에 적어 둡니다.

/* 가상 스크롤에서는 이 값이 안 먹습니다. grid.setOptions({ rowHeight: N }) 를 함께 부르십시오. */

그러니 행 높이를 고쳤으면 받은 CSS와 함께 저 한 줄을 코드에 같이 부르십시오. 나머지 값(색·모서리·선·글자·간격)은 CSS만으로 그대로 먹습니다. 이 한계는 그리드 안쪽 일이라 다음 판에서 고칠 것으로 적어 두었습니다.

쓰는 법 문서

개발가이드 「시작하기」 아래에 두 편을 새로 넣었습니다.

• CSS Builder — A Type (개별설정)
• CSS Builder — B Type (일괄설정)

같이 고친 것

가이드 항목을 전수로 열어 ?section=을 건 링크를 모두 훑고, 실제로 있는 데모 목록과 맞대어 셌습니다.

정리

색을 고르고, 눌러 보고, 파일로 받아 프로젝트에 그대로 겁니다. 그 사이에 손으로 CSS를 짤 일을 없앴습니다.

• CSS Builder — A Type (개별설정)
• CSS Builder — B Type (일괄설정)
• 데모 첫 화면 · 개발가이드
• npm — open-grid (판 1.5.2 그대로)

OPEN GRID는 MIT 라이선스입니다. 상용에도 자유롭게 쓰십시오.