HTML 속성
1. 개요
HTML 속성은 HTML 요소의 시작 태그 내에서 요소 이름 뒤에 `=`으로 구분된 이름-값 쌍으로 나타난다. 속성은 필수, 선택, 표준, 이벤트 속성으로 분류되며, 표준 속성은 대부분의 HTML 요소에 적용될 수 있다. 이벤트 속성은 사용자의 특정 행동에 따라 자바스크립트 코드를 실행할 수 있게 해준다.
HTML 속성
HTML 속성
| 정의 | HTML 요소의 동작을 제어하는 데 사용되는 여는 태그 내의 특수한 단어 |
|---|---|
| 참조 | W3C의 HTML 4 속성 색인 |
📚 더 읽어볼만한 페이지
-
HTML -
Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. -
HTML -
폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
목차
2. HTML 속성
HTML 속성은 일반적으로 `이름-값 쌍`으로 나타나며, `=` 기호로 구분하고 요소 이름 뒤의 요소 시작 태그 안에 작성한다. 값은 작은따옴표(`'`)나 큰따옴표(`"`)로 묶을 수 있지만, 특정 문자를 포함하지 않는 경우에는 따옴표 없이 사용할 수도 있다. 하지만 따옴표 없이 속성 값을 사용하는 것은 보안상 안전하지 않은 것으로 간주된다.
대부분의 HTML 요소는 다음과 같은 몇 가지 일반적인 표준 속성을 가질 수 있다.
* `id` 속성은 요소에 문서 전체에서 고유한 식별자를 제공한다. 이는 CSS 선택자를 사용하여 표현 속성을 주거나, 브라우저에서 특정 요소에 초점을 맞추거나, 스크립트에서 요소의 내용 또는 표현을 변경하는 데 사용될 수 있다. 페이지 URL에 추가되면 URL은 문서 내의 특정 요소(일반적으로 페이지의 하위 섹션)를 직접 가리킨다.
* `class` 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다. 마이크로포맷에서 의미론적으로 사용되기도 한다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소를 일치시키는 CSS 선택자를 구성할 수 있다.
* `style` 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 여러 스타일 선언은 각 선언에 CSS 속성 이름과 콜론 및 선택적 공백으로 구분된 값이 포함되도록 세미콜론과 선택적 공백으로 구분하여 추가할 수 있다.
* `title` 속성은 요소에 부가적인 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 툴팁으로 표시된다.
2.1. 속성 작성법
HTML 속성은 일반적으로 이름-값 쌍으로 나타나며, `=`로 구분하고 요소의 이름 뒤, 요소의 시작 태그 안에 작성한다.
`<태그 속성="값">` 형태로 작성한다. 여기서 `태그`는 HTML 요소 유형을, `속성`은 속성의 이름을 가리키며 지정된 `값`을 설정한다. 값은 `‘` 또는 `"`로 감쌀 수 있으나, 특정한 문자들로 이루어진 값들은 HTML에서 인용 부호 없이 남겨둘 수 있다. (XHTML에서는 제외) 속성 값을 인용 부호 없이 남겨두는 것은 안전하지 않은 것으로 간주된다.
대부분의 속성은 이름과 값의 쌍으로 제공되지만, 일부 속성은 요소의 시작 태그에 존재함으로써 요소에 영향을 주기도 한다. (예: `img` 요소의 `ismap` 속성).
약어 요소인 `abbr`은 이러한 다양한 속성을 보여주는 데 사용될 수 있다.
```html
HTML
```
위 예시는 링크 없이 파란색으로 HTML로 표시되며, 대부분의 브라우저에서 약어 위에 커서를 놓으면 부동 노란색 배경(툴팁) 내에 제목 텍스트 "Hypertext Markup Language"가 표시된다.
```html
Centered text
```
위 예시에서 텍스트는 중앙에 정렬되어 보일 것이다.
대부분의 요소는 언어 관련 속성 `lang` 및 `dir`을 사용하기도 한다.
3. 속성의 종류
HTML 속성은 크게 필수 속성, 선택 속성, 표준 속성, 이벤트 속성으로 분류할 수 있다.
* 필수 속성 및 선택 속성은 특정 HTML 요소를 수정한다.
* 표준 속성은 대부분의 HTML 요소에 적용될 수 있다.
* 이벤트 속성은 HTML 버전 4에 추가되었으며, 특정 상황에서 실행될 스크립트를 지정할 수 있게 한다.
각 속성에 대한 자세한 내용은 하위 섹션을 참고할 수 있다.
| 태그 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
|---|---|---|---|---|---|---|---|---|---|
| param영어 | id | ||||||||
| head영어 | dir | lang | xml:lang | ||||||
| html영어 | dir | lang | xml:lang | ||||||
| meta영어 | dir | lang | xml:lang | ||||||
| title영어 | dir | lang | xml:lang | ||||||
| style영어 | title | dir | lang | xml:lang | |||||
| applet영어 | id | class | style | title | |||||
| br영어 | id | class | style | title | |||||
| frame영어 | id | class | style | title | |||||
| frameset영어 | id | class | style | title | |||||
| iframe영어 | id | class | style | title | |||||
| basefont영어 | id | class | style | title | dir | lang | |||
| center영어 | id | class | style | title | dir | lang | |||
| dir영어 | id | class | style | title | dir | lang | |||
| font영어 | id | class | style | title | dir | lang | |||
| menu영어 | id | class | style | title | dir | lang | |||
| s영어 | id | class | style | title | dir | lang | |||
| strike영어 | id | class | style | title | dir | lang | |||
| u영어 | id | class | style | title | dir | lang | |||
| abbr영어 | id | class | style | title | dir | lang | xml:lang | ||
| acronym영어 | id | class | style | title | dir | lang | xml:lang | ||
| address영어 | id | class | style | title | dir | lang | xml:lang | ||
| b영어 | id | class | style | title | dir | lang | xml:lang | ||
| big영어 | id | class | style | title | dir | lang | xml:lang | ||
| blockquote영어 | id | class | style | title | dir | lang | xml:lang | ||
| body영어 | id | class | style | title | dir | lang | xml:lang | ||
| caption영어 | id | class | style | title | dir | lang | xml:lang | ||
| cite영어 | id | class | style | title | dir | lang | xml:lang | ||
| code영어 | id | class | style | title | dir | lang | xml:lang | ||
| col영어 | id | class | style | title | dir | lang | xml:lang | ||
| colgroup영어 | id | class | style | title | dir | lang | xml:lang | ||
| dd영어 | id | class | style | title | dir | lang | xml:lang | ||
| del영어 | id | class | style | title | dir | lang | xml:lang | ||
| dfn영어 | id | class | style | title | dir | lang | xml:lang | ||
| div영어 | id | class | style | title | dir | lang | xml:lang | ||
| dl영어 | id | class | style | title | dir | lang | xml:lang | ||
| dt영어 | id | class | style | title | dir | lang | xml:lang | ||
| em영어 | id | class | style | title | dir | lang | xml:lang | ||
| fieldset영어 | id | class | style | title | dir | lang | xml:lang | ||
| form영어 | id | class | style | title | dir | lang | xml:lang | ||
| h1영어, h2영어, h3영어, h4영어, h5영어, h6영어 | id | class | style | title | dir | lang | xml:lang | ||
| i영어 | id | class | style | title | dir | lang | xml:lang | ||
| img영어 | id | class | style | title | dir | lang | xml:lang | ||
| ins영어 | id | class | style | title | dir | lang | xml:lang | ||
| kbd영어 | id | class | style | title | dir | lang | xml:lang | ||
| li영어 | id | class | style | title | dir | lang | xml:lang | ||
| link영어 | id | class | style | title | dir | lang | xml:lang | ||
| map영어 | id | class | style | title | dir | lang | xml:lang | ||
| noframes영어 | id | class | style | title | dir | lang | xml:lang | ||
| noscript영어 | id | class | style | title | dir | lang | xml:lang | ||
| ol영어 | id | class | style | title | dir | lang | xml:lang | ||
| optgroup영어 | id | class | style | title | dir | lang | xml:lang | ||
| option영어 | id | class | style | title | dir | lang | xml:lang | ||
| p영어 | id | class | style | title | dir | lang | xml:lang | ||
| pre영어 | id | class | style | title | dir | lang | xml:lang | ||
| q영어 | id | class | style | title | dir | lang | xml:lang | ||
| samp영어 | id | class | style | title | dir | lang | xml:lang | ||
| small영어 | id | class | style | title | dir | lang | xml:lang | ||
| span영어 | id | class | style | title | dir | lang | xml:lang | ||
| strong영어 | id | class | style | title | dir | lang | xml:lang | ||
| sub영어 | id | class | style | title | dir | lang | xml:lang | ||
| sup영어 | id | class | style | title | dir | lang | xml:lang | ||
| table영어 | id | class | style | title | dir | lang | xml:lang | ||
| tbody영어 | id | class | style | title | dir | lang | xml:lang | ||
| td영어 | id | class | style | title | dir | lang | xml:lang | ||
| tfoot영어 | id | class | style | title | dir | lang | xml:lang | ||
| th영어 | id | class | style | title | dir | lang | xml:lang | ||
| thead영어 | id | class | style | title | dir | lang | xml:lang | ||
| tr영어 | id | class | style | title | dir | lang | xml:lang | ||
| tt영어 | id | class | style | title | dir | lang | xml:lang | ||
| ul영어 | id | class | style | title | dir | lang | xml:lang | ||
| var영어 | id | class | style | title | dir | lang | xml:lang | ||
| label영어 | id | class | style | title | dir | lang | xml:lang | accesskey | |
| legend영어 | id | class | style | title | dir | lang | xml:lang | accesskey | |
| object영어 | id | class | style | title | dir | lang | xml:lang | tabindex | |
| select영어 | id | class | style | title | dir | lang | xml:lang | tabindex | |
| a영어 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| area영어 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| button영어 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| input영어 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| textarea영어 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
3.1. 필수 속성 및 선택 속성
HTML 속성은 특정 HTML 요소에 대해 필수적으로 사용해야 하거나, 선택적으로 사용할 수 있다. 예를 들어 `` 태그의 `href` 속성은 링크의 대상 URL을 지정하는 필수 속성이지만, `target` 속성은 링크를 열 때 새 탭을 사용할지 여부를 지정하는 선택 속성이다.
3.1.1. 두 가지 요소에서 사용되는 속성
| 속성 | 사용되는 요소 |
|---|---|
| `coords`, `shape` | <a>, <area> |
| `hreflang`, `rel`, `rev` | <a>, <link> |
| `archive`, `codebase` | <applet>, <object> |
| `color`, `face` | <basefont>, <font> (사용 중단) |
| `span` | <col>, <colgroup> |
| `datetime` | <del>, <ins> |
| `accept` | <form>, <input> |
| `frameborder`, `marginheight`, `scrolling`, `marginwidth` | <frame>, <iframe> |
| `cols`, `rows` | <frameset>, <textarea> |
| `usemap` | <img>, <object> |
| `readonly` | <input>, <textarea> |
| `media` | <link>, <style> |
| `label` | <optgroup>, <option> |
| `abbr`, `axis`, `colspan`, `nowrap`, `rowspan`, `scope` | <td>, <th> |
3.1.2. 여러 요소에서 사용되는 속성
표준 속성은 전역 속성이라고도 하며, 많은 수의 요소와 함께 작동한다. 여기에는 accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title이 포함된다. 또한 몇 가지 실험적인 속성도 있다. xml:lang과 xml:base는 모두 사용 중단되었다. 여러 개의 aria-* 속성은 접근성을 향상시킨다.
기술적으로 모든 표준 속성은 모든 요소에서 허용되어야 하지만, 일부 요소에서는 작동하지 않는다. 아래 표는 몇 가지 일반적인 표준 속성과 해당 속성이 작동할 수 있는 일부 요소를 나열한다.
| 요소 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
|---|---|---|---|---|---|---|---|---|---|
| param | id | ||||||||
| head | dir | lang | xml:lang | ||||||
| html | dir | lang | xml:lang | ||||||
| meta | dir | lang | xml:lang | ||||||
| title | dir | lang | xml:lang | ||||||
| style | title | dir | lang | xml:lang | |||||
| applet | id | class | style | title | |||||
| br | id | class | style | title | |||||
| frame | id | class | style | title | |||||
| frameset | id | class | style | title | |||||
| iframe | id | class | style | title | |||||
| basefont | id | class | style | title | dir | lang | |||
| center | id | class | style | title | dir | lang | |||
| dir | id | class | style | title | dir | lang | |||
| font | id | class | style | title | dir | lang | |||
| menu | id | class | style | title | dir | lang | |||
| s | id | class | style | title | dir | lang | |||
| strike | id | class | style | title | dir | lang | |||
| u | id | class | style | title | dir | lang | |||
| abbr | id | class | style | title | dir | lang | xml:lang | ||
| acronym | id | class | style | title | dir | lang | xml:lang | ||
| address | id | class | style | title | dir | lang | xml:lang | ||
| b | id | class | style | title | dir | lang | xml:lang | ||
| big | id | class | style | title | dir | lang | xml:lang | ||
| blockquote | id | class | style | title | dir | lang | xml:lang | ||
| body | id | class | style | title | dir | lang | xml:lang | ||
| caption | id | class | style | title | dir | lang | xml:lang | ||
| cite | id | class | style | title | dir | lang | xml:lang | ||
| code | id | class | style | title | dir | lang | xml:lang | ||
| col | id | class | style | title | dir | lang | xml:lang | ||
| colgroup | id | class | style | title | dir | lang | xml:lang | ||
| dd | id | class | style | title | dir | lang | xml:lang | ||
| del | id | class | style | title | dir | lang | xml:lang | ||
| dfn | id | class | style | title | dir | lang | xml:lang | ||
| div | id | class | style | title | dir | lang | xml:lang | ||
| dl | id | class | style | title | dir | lang | xml:lang | ||
| dt | id | class | style | title | dir | lang | xml:lang | ||
| em | id | class | style | title | dir | lang | xml:lang | ||
| fieldset | id | class | style | title | dir | lang | xml:lang | ||
| form | id | class | style | title | dir | lang | xml:lang | ||
| hr | id | class | style | title | dir | lang | xml:lang | ||
| h1, h2, h3, h4, h5, h6 | id | class | style | title | dir | lang | xml:lang | ||
| i | id | class | style | title | dir | lang | xml:lang | ||
| img | id | class | style | title | dir | lang | xml:lang | ||
| ins | id | class | style | title | dir | lang | xml:lang | ||
| kbd | id | class | style | title | dir | lang | xml:lang | ||
| li | id | class | style | title | dir | lang | xml:lang | ||
| link | id | class | style | title | dir | lang | xml:lang | ||
| map | id | class | style | title | dir | lang | xml:lang | ||
| noframes | id | class | style | title | dir | lang | xml:lang | ||
| noscript | id | class | style | title | dir | lang | xml:lang | ||
| ol | id | class | style | title | dir | lang | xml:lang | ||
| optgroup | id | class | style | title | dir | lang | xml:lang | ||
| option | id | class | style | title | dir | lang | xml:lang | ||
| p | id | class | style | title | dir | lang | xml:lang | ||
| pre | id | class | style | title | dir | lang | xml:lang | ||
| q | id | class | style | title | dir | lang | xml:lang | ||
| samp | id | class | style | title | dir | lang | xml:lang | ||
| small | id | class | style | title | dir | lang | xml:lang | ||
| span | id | class | style | title | dir | lang | xml:lang | ||
| strong | id | class | style | title | dir | lang | xml:lang | ||
| sub | id | class | style | title | dir | lang | xml:lang | ||
| sup | id | class | style | title | dir | lang | xml:lang | ||
| table | id | class | style | title | dir | lang | xml:lang | ||
| tbody | id | class | style | title | dir | lang | xml:lang | ||
| td | id | class | style | title | dir | lang | xml:lang | ||
| tfoot | id | class | style | title | dir | lang | xml:lang | ||
| th | id | class | style | title | dir | lang | xml:lang | ||
| thead | id | class | style | title | dir | lang | xml:lang | ||
| tr | id | class | style | title | dir | lang | xml:lang | ||
| tt | id | class | style | title | dir | lang | xml:lang | ||
| ul | id | class | style | title | dir | lang | xml:lang | ||
| var | id | class | style | title | dir | lang | xml:lang | ||
| label | id | class | style | title | dir | lang | xml:lang | accesskey | |
| legend | id | class | style | title | dir | lang | xml:lang | accesskey | |
| object | id | class | style | title | dir | lang | xml:lang | tabindex | |
| select | id | class | style | title | dir | lang | xml:lang | tabindex | |
| a | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| area | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| button | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| input | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| textarea | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
3.2. 표준 속성
표준 속성은 대부분의 HTML 요소에 공통적으로 적용될 수 있는 속성이다.
* `id` 속성은 요소에 문서 전체에서 고유한 식별자를 부여한다. 이는 CSS 선택자로 사용하여 표현 속성을 제공하거나, 브라우저에서 특정 요소에 초점을 맞추거나, 스크립트에서 요소의 내용 또는 표현을 변경하는 데 사용될 수 있다. 페이지의 URL에 추가하면 URL은 문서 내의 특정 요소, 일반적으로 페이지의 하위 섹션을 직접 대상으로 한다.
* `class` 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다. 마이크로포맷에서 사용된다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소를 일치시키는 CSS 선택자를 구성할 수 있다.
* `style` 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 여러 스타일 선언은 각 선언에 CSS 속성 이름과 콜론 및 선택적 공백으로 구분된 값(예: `style="color: red; text-align: center;"`)이 포함되도록 세미콜론과 선택적 공백으로 구분하여 추가할 수 있다. `style` 속성은 모든 HTML 요소에 사용할 수 있다. 스타일 정보를 스타일 시트에 추가하는 것이 더 나은 방법으로 간주되며, 종종 요소 클래스 또는 ID와 일치하는 선택자를 사용한다.
* `title` 속성은 요소에 부가적인 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 툴팁으로 표시된다.
표준 속성은 전역 속성이라고도 하며, accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title 등이 있다. xml:lang과 xml:base는 모두 사용 중단되었다. 여러 aria-* 속성은 접근성을 향상시킨다.
기술적으로 모든 표준 속성은 모든 요소에서 허용되어야 하지만, 일부 요소에서는 작동하지 않는다. 다음 표는 몇 가지 일반적인 표준 속성과 해당 속성이 작동할 수 있는 일부 요소를 나열한다.
| 요소 | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
|---|---|---|---|---|---|---|---|---|---|
| param | id | ||||||||
| head | dir | lang | xml:lang | ||||||
| html | dir | lang | xml:lang | ||||||
| meta | dir | lang | xml:lang | ||||||
| title | dir | lang | xml:lang | ||||||
| style | title | dir | lang | xml:lang | |||||
| applet | id | class | style | title | |||||
| br | id | class | style | title | |||||
| frame | id | class | style | title | |||||
| frameset | id | class | style | title | |||||
| iframe | id | class | style | title | |||||
| basefont | id | class | style | title | dir | lang | |||
| center | id | class | style | title | dir | lang | |||
| dir | id | class | style | title | dir | lang | |||
| font | id | class | style | title | dir | lang | |||
| menu | id | class | style | title | dir | lang | |||
| s | id | class | style | title | dir | lang | |||
| strike | id | class | style | title | dir | lang | |||
| u | id | class | style | title | dir | lang | |||
| abbr | id | class | style | title | dir | lang | xml:lang | ||
| acronym | id | class | style | title | dir | lang | xml:lang | ||
| address | id | class | style | title | dir | lang | xml:lang | ||
| b | id | class | style | title | dir | lang | xml:lang | ||
| big | id | class | style | title | dir | lang | xml:lang | ||
| blockquote | id | class | style | title | dir | lang | xml:lang | ||
| body | id | class | style | title | dir | lang | xml:lang | ||
| caption | id | class | style | title | dir | lang | xml:lang | ||
| cite | id | class | style | title | dir | lang | xml:lang | ||
| code | id | class | style | title | dir | lang | xml:lang | ||
| col | id | class | style | title | dir | lang | xml:lang | ||
| colgroup | id | class | style | title | dir | lang | xml:lang | ||
| dd | id | class | style | title | dir | lang | xml:lang | ||
| del | id | class | style | title | dir | lang | xml:lang | ||
| dfn | id | class | style | title | dir | lang | xml:lang | ||
| div | id | class | style | title | dir | lang | xml:lang | ||
| dl | id | class | style | title | dir | lang | xml:lang | ||
| dt | id | class | style | title | dir | lang | xml:lang | ||
| em | id | class | style | title | dir | lang | xml:lang | ||
| fieldset | id | class | style | title | dir | lang | xml:lang | ||
| form | id | class | style | title | dir | lang | xml:lang | ||
| hr | id | class | style | title | dir | lang | xml:lang | ||
| h1, h2, h3, h4, h5, h6 | id | class | style | title | dir | lang | xml:lang | ||
| i | id | class | style | title | dir | lang | xml:lang | ||
| img | id | class | style | title | dir | lang | xml:lang | ||
| ins | id | class | style | title | dir | lang | xml:lang | ||
| kbd | id | class | style | title | dir | lang | xml:lang | ||
| li | id | class | style | title | dir | lang | xml:lang | ||
| link | id | class | style | title | dir | lang | xml:lang | ||
| map | id | class | style | title | dir | lang | xml:lang | ||
| noframes | id | class | style | title | dir | lang | xml:lang | ||
| noscript | id | class | style | title | dir | lang | xml:lang | ||
| ol | id | class | style | title | dir | lang | xml:lang | ||
| optgroup | id | class | style | title | dir | lang | xml:lang | ||
| option | id | class | style | title | dir | lang | xml:lang | ||
| p | id | class | style | title | dir | lang | xml:lang | ||
| pre | id | class | style | title | dir | lang | xml:lang | ||
| q | id | class | style | title | dir | lang | xml:lang | ||
| samp | id | class | style | title | dir | lang | xml:lang | ||
| small | id | class | style | title | dir | lang | xml:lang | ||
| span | id | class | style | title | dir | lang | xml:lang | ||
| strong | id | class | style | title | dir | lang | xml:lang | ||
| sub | id | class | style | title | dir | lang | xml:lang | ||
| sup | id | class | style | title | dir | lang | xml:lang | ||
| table | id | class | style | title | dir | lang | xml:lang | ||
| tbody | id | class | style | title | dir | lang | xml:lang | ||
| td | id | class | style | title | dir | lang | xml:lang | ||
| tfoot | id | class | style | title | dir | lang | xml:lang | ||
| th | id | class | style | title | dir | lang | xml:lang | ||
| thead | id | class | style | title | dir | lang | xml:lang | ||
| tr | id | class | style | title | dir | lang | xml:lang | ||
| tt | id | class | style | title | dir | lang | xml:lang | ||
| ul | id | class | style | title | dir | lang | xml:lang | ||
| var | id | class | style | title | dir | lang | xml:lang | ||
| label | id | class | style | title | dir | lang | xml:lang | accesskey | |
| legend | id | class | style | title | dir | lang | xml:lang | accesskey | |
| object | id | class | style | title | dir | lang | xml:lang | tabindex | |
| select | id | class | style | title | dir | lang | xml:lang | tabindex | |
| a | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| area | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| button | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| input | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
| textarea | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
3.3. 이벤트 속성
이벤트 속성은 사용자의 특정 행동(예: 클릭, 마우스 오버, 키 입력 등)에 따라 자바스크립트 코드를 실행할 수 있도록 하는 속성이다. `on`으로 시작하는 이름을 가지며(예: `onclick`, `onmouseover`, `onkeydown`), HTML 버전 4부터 추가되었다.
이벤트 속성은 특정 상황에서 실행할 스크립트를 요소가 지정할 수 있게 한다. 다음 표는 몇 가지 일반적인 이벤트 핸들러 속성과 해당 속성이 작동할 수 있는 일부 요소를 나타낸다.
| 요소 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| frameset영어 | onload | onunload | |||||||||||||||
| body영어 | onload | onunload | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||
| abbr영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| acronym영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| address영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| b영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| big영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| blockquote영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| caption영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| center영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| cite영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| code영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| col영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| colgroup영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| dd영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| del영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| dfn영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| dir영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| div영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| dl영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| dt영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| em영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| fieldset영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| h1영어, h2영어, h3영어, h4영어, h5영어, h6영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| hr영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| i영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| ins영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| kbd영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| legend영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| li영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| link영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| map영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| menu영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| noframes영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| noscript영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| object영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| ol영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| optgroup영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| option영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| p영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| pre영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| q영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| s영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| samp영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| small영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| span영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| strike영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| strong영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| sub영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| sup영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| table영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| tbody영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| td영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| tfoot영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| th영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| thead영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| tr영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| tt영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| u영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| ul영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| var영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
| img영어 | onabort | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||
| a영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
| area영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
| button영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
| form영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
| label영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
| select영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | ||||
| input영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | onselect | |||
| textarea영어 | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | onselect |