라벨 시트
시판 라벨 용지에 맞춰 한 장에 여러 칸을 채우는 시트를 만듭니다. 여백을 용지 규격에 맞추는 법, 격자 표로 칸을 잡는 법, 칸별 여백과 세로 정렬을 배웁니다.
여기서 배우는 것
편집기로 만들기
- 먼저 쓰는 라벨 용지의 규격을 확인합니다. 위·아래 여백과 칸 크기가 정해져 있으므로, 우리가 맞춰야 할 것은 그 숫자입니다.
- 페이지 여백을 그 숫자로 넣습니다. 단위는 px 이고 96dpi 기준이므로, mm 는 96 ÷ 25.4 를 곱해 바꿉니다.
- 격자 표를 넣고 행과 열을 라벨 칸 수에 맞춥니다. 행 높이를 라벨 높이로 두면 칸이 그대로 라벨이 됩니다.
- 칸 안 여백을 넉넉히 줍니다. 라벨은 가장자리가 잘려 붙으므로, 글이 가장자리에 붙으면 잘립니다.
- 세로 정렬을 가운데로 두면 한 줄짜리와 두 줄짜리가 섞여도 시선이 흔들리지 않습니다.
- 격자선은 인쇄하지 않는 것이 보통입니다 — 선 없음으로 두고, 시안을 볼 때만 잠깐 켜십시오.
스키마 · API 로 만들기
- page.margin 은 t · r · b · l 넷을 px 로 받습니다. 노드 좌표는 이 여백 안쪽에서 시작합니다.
- 격자 표의 rowHeight 가 라벨 높이입니다. 칸 내용이 그보다 크면 늘어나므로, 글자 크기와 여백을 함께 잡으십시오.
- cells[].padY 와 padX 로 칸마다 다른 여백을 줄 수 있습니다. -1 이 "표를 따른다" 는 표시입니다 — 0 은 "여백 없음" 이라는 진짜 값입니다.
- 선을 지우려면 표의 stroke 를 비웁니다. 특정 칸만 지우려면 cells[].border 를 "none" 으로 둡니다.
완성 문서
아래 JSON 이 위 두 순서가 만드는 바로 그 문서입니다. 저희 테스트가 이 문서를 검증하고 경고 없이 렌더되는지 확인하므로, 그대로 붙여 넣어 쓰셔도 됩니다.
{
"v": 1,
"unit": "px",
"page": {
"size": "a4",
"orientation": "portrait",
"margin": {
"t": 49,
"r": 26,
"b": 49,
"l": 26
},
"header": "",
"footer": ""
},
"fonts": [],
"styles": [
{
"id": "s_tbl",
"fontFamily": "Liberation Sans",
"fontSize": 11,
"fontWeight": 400,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "middle",
"lineHeight": 1.35,
"border": "none",
"radius": 0,
"opacity": 1
}
],
"nodes": [
{
"id": "n_sheet",
"parent": "",
"order": 0,
"type": "table",
"x": 0,
"y": 0,
"w": 697,
"h": 800,
"show": "",
"styleId": "s_tbl",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 10,
"padX": 12,
"align": "",
"valign": "middle",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 160,
"max": 0,
"columns": [
{
"header": "",
"cell": "",
"width": 232,
"align": "left"
},
{
"header": "",
"cell": "",
"width": 232,
"align": "left"
},
{
"header": "",
"cell": "",
"width": 233,
"align": "left"
}
],
"rows": 5,
"cells": [
{
"r": 0,
"c": 0,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 0,
"c": 1,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "center",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 0,
"c": 2,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 1,
"c": 0,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 1,
"c": 1,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "center",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 1,
"c": 2,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
}
],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Label sheet"
}
]
}요청 본문입니다. template 자리에 위 문서를, data 자리에 아래 데이터를 넣습니다.
{
"template": "(the document above)",
"data": {
"name": "brewmypdf",
"line1": "118 Seongsui-ro, Seongdong-gu, Seoul"
}
}