전역 속성

전역 속성 (Global Attributes)

특정 태그(예: a 태그의 href, img 태그의 src)에만 쓸 수 있는 깐깐한 전용 속성이 있는가 하면, HTML의 모든 태그에 어디든 자유롭게 달아줄 수 있는 공통 속성들이 있습니다.
이를 전역 속성(Global Attributes)이라고 부르며, CSS로 화장을 시키거나 Javascript로 동적인 마법을 부릴 때 필수적인 연결 고리(식별자) 역할을 합니다.

1. 모든 태그의 기본 장착 아이템

HTML 태그들이 학교의 학생이라면, 전역 속성은 학교에서 나누어주는 기본 아이템과 같습니다.

📛

id=""

전교에 단 한 명뿐인
나만의 유일한 학번

👔

class=""

디자인을 통일하기 위해
무리가 맞춰 입는 교복

👻

hidden

입으면 아무에게도
보이지 않는 투명 망토

2. 주요 전역 속성 핵심 정리

속성명	값 예시	설명 및 역할
`id`	`id="header"`	하나의 문서 내에서 절대 중복될 수 없는 고유한 식별자입니다. 자바스크립트에서 특정 요소 하나를 콕 집어낼 때 사용합니다.
`class`	`class="btn primary"`	여러 요소에 중복해서 부여할 수 있는 그룹명입니다. (띄어쓰기로 여러 개 지정 가능) CSS로 똑같은 디자인을 한꺼번에 입힐 때 사용합니다.
`style`	`style="color: red;"`	외부 CSS 파일 없이, HTML 태그에 직접 인라인으로 즉석 디자인을 입힙니다.
`title`	`title="안내 문구"`	요소 위에 마우스를 가만히 올리고 있으면 조그만 툴팁 말풍선을 띄워줍니다.
`data-*`	`data-user-id="1"`	화면에 보이지 않는 나만의 커스텀 데이터를 요소에 몰래 심어두고, 나중에 자바스크립트로 꺼내 쓸 수 있습니다.
`hidden`	(속성명만 단독 작성)	이 속성을 추가하면 해당 요소가 화면에서 흔적도 없이 사라집니다. (CSS의 `display: none`과 같은 효과)

<div class="attr-container">
  <!-- 1. 스타일과 식별자 (id, class) -->
  <div id="header-main" class="box shadow">
      이 박스는 고유한 학번(id)과 공통 교복(class)을 입고 있습니다.
  </div>

  <!-- 2. 인라인 스타일과 툴팁 (style, title) -->
  <p style="color: #ef4444; font-weight: bold; cursor: help;" title="삐빅! 경고 메시지입니다. 마우스를 올려주셔서 감사합니다.">
      이 빨간 문장에 마우스를 1초간 올려보세요! 
      <br>(작은 말풍선이 뜹니다.)
  </p>

  <!-- 3. 데이터 숨김 속성 (data-*, hidden) -->
  <button data-user-id="123" class="btn" onclick="checkData(this)">
      내 뒤통수에 몰래 붙어있는 커스텀 데이터(data-*) 보기
  </button>
  
  <button hidden class="btn">
      투명 망토를 쓴 버튼 (화면에 절대 안 보임!)
  </button>

  <!-- 4. 사용자 조작 속성 (tabindex, contenteditable) -->
  <div class="editable-box" tabindex="0" contenteditable="true">
      이 글자를 직접 클릭해서 키보드로 수정해 보세요! (contenteditable="true")
  </div>
</div>

실행 결과