HTML의 global attribute란 무엇인가요?

Question

Accepted Answer

**Global attribute**는 element의 종류와 관계없이 *어떤* HTML element에도 붙일 수 있는 attribute입니다. 식별, 스타일링 훅, accessibility 정보, 메타데이터를 제공합니다. ```html ``` ## 가장 많이 쓰이는 것들 - **`id`** — CSS(`#hero`), JS(`getElementById`), 페이지 내 링크(`href="#hero"`)를 위한 고유 앵커입니다. - **`class`** — 주된 스타일링/스크립팅 훅이며, 여러 element에서 재사용할 수 있습니다. - **`data-*`** — element에 커스텀 데이터를 붙이고, JS에서 `element.dataset`으로 읽습니다. - **`tabindex`** — 포커스 가능 여부와 키보드 탭 순서를 제어합니다(`0` = 순서대로 포커스 가능, `-1` = 스크립트로만 포커스 가능). - **`hidden`**, **`title`**, **`lang`**, **`role`**, **`aria-*`** — 가시성, 툴팁, 언어, accessibility를 담당합니다. ## 실전에서의 data-* ```html ``` ```js button.dataset.action; // "delete" button.dataset.id; // "7" (항상 문자열) ``` ## 왜 중요한가 Global attribute는 거의 모든 element에서 사용하는 공통 도구 모음입니다. 스타일링과 스크립팅을 위한 `class`/`id`, JS로 데이터를 전달하기 위한 `data-*`, accessibility를 위한 `tabindex`/`role`/`aria-*`가 그것입니다. 이들을 알아두면 마크업이 깔끔하게 유지되고 동작이 일관성을 갖습니다.