# 웹 컴포넌트 <label-82>

> 태그 하나로 미리보기와 인쇄 버튼. 속성, 프로퍼티, 이벤트.

Source: https://82label.app/docs/element/

CDN 스크립트를 넣으면 `<label-82>` 가 등록됩니다. 첫 번째 행으로 미리보기를 그리고, 버튼을 누르면 모든 행을 인쇄합니다. 프레임워크 없이 서버에서 HTML 을 만드는 화면(PHP, JSP, ASP)에 잘 맞습니다.

```html
<link rel="stylesheet" href="https://82label.app/cdn/v0.2.0/82label.css">
<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>

<label-82
  template="lbl_a1b2c3d4e5"
  data='[{"name":"무선 이어폰 프로","price":"39,000원","sku":"EP-2026-0412"}]'
  button="라벨 인쇄">
</label-82>
```

## 속성

| 속성 | 설명 |
| --- | --- |
| `template` | 서식 ID(`lbl_…`) 또는 서식 JSON 문자열. |
| `data` | JSON 객체 하나 또는 배열. 배열의 항목마다 라벨 한 장. |
| `printer` | 출력 프로그램의 프린터 이름. |
| `mode` | `auto`(기본) · `agent` · `browser` |
| `start-at` | 시트: 몇 번째 칸부터. |
| `button` | 버튼 글자. 기본 "인쇄". |
| `preview` | `false` 면 미리보기를 숨기고 버튼만. |
| `frames` | `false` 면 미리 인쇄된 틀(`layer: 'frame'`)을 빼고 인쇄. |
| `base` | 서식 ID 를 받을 서버(기본 https://82label.app). |

## 스크립트에서

```js
const el = document.querySelector('label-82');
el.template = template;        // 객체를 그대로
el.data = orders.map(toRow);   // 배열
el.addEventListener('printed', (e) => console.log(e.detail)); // PrintResult
el.addEventListener('error', (e) => console.error(e.detail));
await el.print();              // 버튼 없이 바로
```

## 모양 바꾸기

`82label.css` 가 미리보기 틀과 버튼을 꾸밉니다. CSS 변수로 바꾸세요. 라벨 그림 자체는 종이라서 늘 흰 바탕입니다.

```css
label-82 {
  --l82-accent: #d9431f;   /* 버튼 */
  --l82-accent-ink: #fff;
  --l82-bg: #fafaf9;       /* 미리보기 틀 */
  --l82-border: #e4e4e0;
  --l82-radius: 8px;
  --l82-font: Pretendard, sans-serif;
}
```

안내 문구(허용 대기, 구독 필요 등)는 버튼 아래 `.l82-notice` 에 나옵니다. 다른 이름의 태그가 필요하면 `Label82.defineLabelElement('shop-label')`.