HTML 속성
"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차
1. 개요
HTML 속성은 HTML 요소의 시작 태그 내에서 요소 이름 뒤에 `=`으로 구분된 이름-값 쌍으로 나타난다. 속성은 필수, 선택, 표준, 이벤트 속성으로 분류되며, 표준 속성은 대부분의 HTML 요소에 적용될 수 있다. 이벤트 속성은 사용자의 특정 행동에 따라 자바스크립트 코드를 실행할 수 있게 해준다.
더 읽어볼만한 페이지
- HTML - Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. - HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
| HTML 속성 | |
|---|---|
| HTML 속성 | |
| 정의 | HTML 요소의 동작을 제어하는 데 사용되는 여는 태그 내의 특수한 단어 |
| 참조 | W3C의 HTML 4 속성 색인 |
2. HTML 속성
HTML 속성은 일반적으로 `이름-값 쌍`으로 나타나며, `=` 기호로 구분하고 요소 이름 뒤의 요소 시작 태그 안에 작성한다. 값은 작은따옴표(`'`)나 큰따옴표(`"`)로 묶을 수 있지만, 특정 문자를 포함하지 않는 경우에는 따옴표 없이 사용할 수도 있다. 하지만 따옴표 없이 속성 값을 사용하는 것은 보안상 안전하지 않은 것으로 간주된다.[21]
대부분의 HTML 요소는 다음과 같은 몇 가지 일반적인 표준 속성을 가질 수 있다.
- '''`id`''' 속성은 요소에 문서 전체에서 고유한 식별자를 제공한다.[7][8][9] 이는 CSS 선택자를 사용하여 표현 속성을 주거나, 브라우저에서 특정 요소에 초점을 맞추거나, 스크립트에서 요소의 내용 또는 표현을 변경하는 데 사용될 수 있다. 페이지 URL에 추가되면 URL은 문서 내의 특정 요소(일반적으로 페이지의 하위 섹션)를 직접 가리킨다.
- '''`class`''' 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다.[10][11] 마이크로포맷에서 의미론적으로 사용되기도 한다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소를 일치시키는 CSS 선택자를 구성할 수 있다.
- '''`style`''' 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 여러 스타일 선언은 각 선언에 CSS 속성 이름과 콜론 및 선택적 공백으로 구분된 값이 포함되도록 세미콜론과 선택적 공백으로 구분하여 추가할 수 있다.[12][13][14]
- '''`title`''' 속성은 요소에 부가적인 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 툴팁으로 표시된다.
2. 1. 속성 작성법
HTML 속성은 일반적으로 이름-값 쌍으로 나타나며, `=`로 구분하고 요소의 이름 뒤, 요소의 시작 태그 안에 작성한다.`<태그 속성="값">` 형태로 작성한다.[19][20] 여기서 `태그`는 HTML 요소 유형을, `속성`은 속성의 이름을 가리키며 지정된 `값`을 설정한다. 값은 `‘` 또는 `"`로 감쌀 수 있으나, 특정한 문자들로 이루어진 값들은 HTML에서 인용 부호 없이 남겨둘 수 있다. (XHTML에서는 제외)[19][20] 속성 값을 인용 부호 없이 남겨두는 것은 안전하지 않은 것으로 간주된다.[21]
대부분의 속성은 이름과 값의 쌍으로 제공되지만, 일부 속성은 요소의 시작 태그에 존재함으로써 요소에 영향을 주기도 한다.[5] (예: `img` 요소의 `ismap` 속성[6]).
약어 요소인 `abbr`은 이러한 다양한 속성을 보여주는 데 사용될 수 있다.
```html
HTML
```
위 예시는 링크 없이 파란색으로 HTML로 표시되며, 대부분의 브라우저에서 약어 위에 커서를 놓으면 부동 노란색 배경(툴팁) 내에 제목 텍스트 "Hypertext Markup Language"가 표시된다.
```html
Centered text
```
위 예시에서 텍스트는 중앙에 정렬되어 보일 것이다.
대부분의 요소는 언어 관련 속성 `lang` 및 `dir`을 사용하기도 한다.
3. 속성의 종류
HTML 속성은 크게 필수 속성, 선택 속성, 표준 속성, 이벤트 속성으로 분류할 수 있다.[15][16]
- 필수 속성 및 선택 속성은 특정 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. 여러 요소에서 사용되는 속성
표준 속성은 전역 속성이라고도 하며, 많은 수의 요소와 함께 작동한다.[17] 여기에는 ''accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title''이 포함된다. 또한 몇 가지 실험적인 속성도 있다. ''xml:lang''과 ''xml:base''는 모두 사용 중단되었다. 여러 개의 ''aria-*'' 속성은 접근성을 향상시킨다.[17]기술적으로 모든 표준 속성은 모든 요소에서 허용되어야 하지만, 일부 요소에서는 작동하지 않는다.[18] 아래 표는 몇 가지 일반적인 표준 속성과 해당 속성이 작동할 수 있는 일부 요소를 나열한다.
| 요소 | 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 요소에 공통적으로 적용될 수 있는 속성이다.[17]- '''`id`''' 속성은 요소에 문서 전체에서 고유한 식별자를 부여한다.[7][8][9] 이는 CSS 선택자로 사용하여 표현 속성을 제공하거나, 브라우저에서 특정 요소에 초점을 맞추거나, 스크립트에서 요소의 내용 또는 표현을 변경하는 데 사용될 수 있다. 페이지의 URL에 추가하면 URL은 문서 내의 특정 요소, 일반적으로 페이지의 하위 섹션을 직접 대상으로 한다.
- '''`class`''' 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다.[10][11] 마이크로포맷에서 사용된다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소를 일치시키는 CSS 선택자를 구성할 수 있다.
- '''`style`''' 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 여러 스타일 선언은 각 선언에 CSS 속성 이름과 콜론 및 선택적 공백으로 구분된 값(예: `style="color: red; text-align: center;"`)이 포함되도록 세미콜론과 선택적 공백으로 구분하여 추가할 수 있다.[12][13][14] '''`style`''' 속성은 모든 HTML 요소에 사용할 수 있다. 스타일 정보를 스타일 시트에 추가하는 것이 더 나은 방법으로 간주되며, 종종 요소 클래스 또는 ID와 일치하는 선택자를 사용한다.
- '''`title`''' 속성은 요소에 부가적인 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 툴팁으로 표시된다.
표준 속성은 전역 속성이라고도 하며, ''accesskey'', ''class'', ''contenteditable'', ''contextmenu'', ''data'', ''dir'', ''hidden'', ''id'', ''lang'', ''style'', ''tabindex'', ''title'' 등이 있다. ''xml:lang''과 ''xml:base''는 모두 사용 중단되었다. 여러 ''aria-*'' 속성은 접근성을 향상시킨다.[17]
기술적으로 모든 표준 속성은 모든 요소에서 허용되어야 하지만, 일부 요소에서는 작동하지 않는다.[18] 다음 표는 몇 가지 일반적인 표준 속성과 해당 속성이 작동할 수 있는 일부 요소를 나열한다.
| 요소 | 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부터 추가되었다.[17]이벤트 속성은 특정 상황에서 실행할 스크립트를 요소가 지정할 수 있게 한다. 다음 표는 몇 가지 일반적인 이벤트 핸들러 속성과 해당 속성이 작동할 수 있는 일부 요소를 나타낸다.
| 요소 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 | 속성 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 |
참조
[1]
웹사이트
Index of the HTML 4 Attributes
http://www.w3.org/TR[...]
W3C
2015-02-13
[2]
웹사이트
On SGML and HTML
http://www.w3.org/TR[...]
World Wide Web Consortium
2008-11-16
[3]
웹사이트
XHTML 1.0 – Differences with HTML 4
http://www.w3.org/TR[...]
World Wide Web Consortium
2008-11-16
[4]
웹사이트
Why attribute values should always be quoted in HTML
https://jkorpela.fi/[...]
Cs.tut.fi
1998-07-06
[5]
웹사이트
Tags used in HTML
http://www.w3.org/TR[...]
World Wide Web Consortium
2008-11-16
[6]
웹사이트
Objects, Images, and Applets in HTML documents
http://www.w3.org/TR[...]
World Wide Web Consortium
2008-11-16
[7]
문서
[8]
웹사이트
HTML id
https://www.w3school[...]
2020-04-27
[9]
웹사이트
HTML Global id Attribute
https://www.w3school[...]
2020-04-27
[10]
웹사이트
HTML Classes
https://www.w3school[...]
2020-04-27
[11]
웹사이트
HTML Global class Attribute
https://www.w3school[...]
2020-04-27
[12]
웹사이트
HTML Styles
https://www.w3school[...]
2023-05-12
[13]
웹사이트
HTML Global style Attribute
https://www.w3school[...]
2023-05-12
[14]
웹사이트
CSS Syntax
https://www.w3school[...]
2023-05-12
[15]
웹사이트
HTML Global Attributes
https://www.w3school[...]
W3Schools
[16]
웹사이트
HTML Event Attributes
https://www.w3school[...]
W3Schools
[17]
웹사이트
Global attributes – HTML (HyperText Markup Language)
https://developer.mo[...]
2015-02-12
[18]
웹사이트
HTML reference – HTML (HyperText Markup Language)
https://developer.mo[...]
2015-02-13
[19]
웹인용
On SGML and HTML
http://www.w3.org/TR[...]
World Wide Web Consortium
2008-11-16
[20]
웹인용
XHTML 1.0 - Differences with HTML 4
http://www.w3.org/TR[...]
World Wide Web Consortium
2008-11-16
[21]
웹인용
Why attribute values should always be quoted in HTML
http://www.cs.tut.fi[...]
Cs.tut.fi
1998-07-06
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com