HTML Global Attributes
1. HTML Global Attributes란?
HTML Global Attributes는 HTML 문서의 모든 요소에 적용할 수 있는 공통 속성입니다.
2. 주요 HTML Global Attributes
| 속성 | 설명 | 예시 |
|---|---|---|
| id | 요소의 고유 식별자를 정의. | <div id="header">헤더</div> |
| class | 요소의 클래스를 정의. | <p class="important">중요한 문단</p> |
| style | 요소에 직접적인 인라인 CSS 스타일을 적용. | <h1 style="color: blue;">제목</h1> |
| title | 요소에 대한 추가 정보를 제공. | <img src="image.jpg" title="설명"> |
| lang | 요소의 언어를 정의. | <p lang="ko">안녕하세요.</p> |
| tabindex | 요소의 탭 순서를 정의. | <input type="text" tabindex="1"> |
| accesskey | 키보드 단축키를 정의. | <a href="#" accesskey="h">홈</a> |
| hidden | 요소를 숨기는 데 사용. | <div hidden>숨겨진 내용</div> |
| data-* | 사용자 정의 데이터 속성. | <div data-user-id="123">사용자</div> |
3. HTML Global Attributes의 사용법
HTML Global Attributes는 다양한 태그에 적용하여 요소의 기능성을 높일 수 있습니다.
<div id="main" class="container" style="padding: 20px;">
<h1 title="메인 제목">환영합니다!</h1>
<p lang="ko" class="intro">이것은 소개 문단입니다.</p>
<button accesskey="s">저장</button>
</div>4. 사용 시 유의사항
- 고유한 ID 사용:
id속성은 문서 내에서 고유해야 하므로, 중복되지 않도록 주의해야 합니다. - CSS 클래스 명명 규칙:
class속성을 사용할 때는 의미 있는 이름을 사용하여 가독성을 높이는 것이 좋습니다. - 인라인 스타일 최소화: 가능하면
style속성 대신 외부 CSS 파일을 사용하여 스타일을 관리하는 것이 바람직합니다. - 접근성 고려:
title,accesskey,tabindex와 같은 속성을 사용할 때는 접근성을 고려하여 사용해야 합니다.