HTML 전역 속성의 정의와 역할 살펴보기

HTML 전역 속성의 정의와 역할 살펴보기

HTML(Hypertext Markup Language)은 웹 페이지의 구조와 콘텐츠를 설명하는 데 사용되는 마크업 언어입니다. HTML에서 전역 속성은 모든 HTML 요소에 적용되고 전역 효과를 갖는 속성입니다. 이 기사에서는 HTML 전역 속성의 정의와 역할을 살펴보고 특정 코드 예제를 제공합니다.

1. class

클래스 속성은 HTML 요소에 대해 하나 이상의 클래스 이름을 정의하는 데 사용됩니다. 클래스 이름은 요소를 식별하거나 결합하는 데 사용되며, 요소는 CSS 스타일 시트 및 JavaScript를 통해 조작하고 제어할 수 있습니다. 요소에 클래스 속성을 추가하면 스타일을 재사용하고 유지할 수 있습니다.

코드 예:

<div class="container">
  <p class="text">Hello, World!</p>
</div>

2. id

id 속성은 HTML 요소의 고유 식별자를 정의하는 데 사용됩니다. id 속성을 통해 JavaScript에서 특정 HTML 요소를 쉽게 조작하고 제어할 수 있습니다. HTML 문서에서 id 속성의 값은 고유해야 합니다.

코드 예:

<div id="header">This is the header</div>

3. style

style 속성은 HTML 요소의 인라인 스타일을 지정하는 데 사용됩니다. 인라인 스타일은 HTML 태그에 직접 작성된 CSS 스타일로, 외부 스타일 시트나 내부 스타일의 설정을 재정의할 수 있습니다. style 속성을 통해 특정 요소에 대해 스타일을 개별적으로 정의할 수 있습니다.

코드 예:

<p style="color: blue; font-size: 16px;">This is a blue paragraph with font size of 16px</p>

4. title

title 속성은 HTML 요소에 대한 추가 프롬프트 정보를 제공하는 데 사용됩니다. title 속성이 있는 요소 위에 마우스를 올리면 title 속성 값이 표시됩니다. title 속성은 대부분의 HTML 요소에 적용 가능하며 사용자 경험과 페이지 접근성을 높일 수 있습니다.

코드 예:

<button title="Click me!">Submit</button>

5. tabindex

tabindex 속성은 HTML 요소의 포커스 순서를 제어하는 ​​데 사용됩니다. 사용자가 탭 키를 사용하여 페이지를 탐색하면 HTML 요소의 포커스가 tabindex 속성 값의 순서로 전환됩니다. tabindex 속성의 값은 양의 정수, 0 또는 -1일 수 있습니다.

코드 예:

<input type="text" tabindex="1">
<input type="checkbox" tabindex="2">
<input type="submit" tabindex="3">

6. data-*

data-* 속성은 HTML 요소에 대한 사용자 정의 데이터 속성을 정의하는 데 사용됩니다. 이러한 사용자 정의 데이터 속성은 JavaScript에서 일부 요소 관련 데이터를 저장하여 후속 작업 및 처리를 용이하게 하는 데 사용될 수 있습니다.

코드 예:

<div data-user-id="123" data-user-name="John Doe">User Information</div>

7. lang

lang 속성은 HTML 요소의 언어를 지정하는 데 사용됩니다. lang 속성을 통해 각 HTML 요소에 대해 서로 다른 언어를 설정하여 다국어 웹사이트의 지원 및 국제화를 달성할 수 있습니다.

코드 예:

<p lang="en">Hello, World!</p>
<p lang="zh">你好，世界！</p>

위는 일반적으로 사용되는 일부 HTML 전역 속성의 정의 및 기능입니다. 이러한 전역 속성을 합리적으로 사용하면 웹 페이지의 품질, 유지 관리성 및 접근성을 향상시킬 수 있습니다. 이 기사를 통해 모든 사람이 HTML 전역 속성에 대해 더 깊이 이해할 수 있기를 바랍니다.

위 내용은 HTML 전역 속성의 정의와 역할 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!