모든 HTML요소는 속성을 가질 수 있습니다.
속성은 요소에 대한 추가 정보를 제공합니다.
속성은 항상 시작태그에 작성하며, 속성을 일반적으로 이름 / 값 쌍으로 되어있습니다.
태그와 마찬가지로 속성도 대소문자를 구분하지 않지만 소문자로 작성하길 권장합니다.
값은 따옴표를 사용하여 묶어 줍니다. 따옴표를 사요하지 않으면 오류가 발생할 수 있습니다.
경우에 따라 작은따옴표도 사용할 수 있습니다.
<a href="http://ezcode.kr">하이퍼링크</a>예제에서 href는 속성의 이름이고 ""안의 내용이 값입니다.
id 속성은 HTML요소의 고유 ID를 지정합니다.
이 값은 HTML 문서 내에서 고유해야 합니다.
id 속성은 CSS에서 선택하거나 HTML DOM을 통행 JavaScript가 특정 ID로 요소를 조작하는데 가장 많이 사용됩니다.
<h1 id="myHeader">Hello World!</h1>
class 속성은 요소에 대해 하나 이상의 클래스 이름을 지정합니다.
여러 이름을 지정하려면 공백으로 구분합니다.
class 속성은 CSS에서 선택하는데 많이 사용됩니다.
<h1 class="intro important">Hello World!</h1>
style 속성은 요소에 대한 인라인 스타일을 지정합니다.
하나이상의 CSS 속성과 값을 지정할 수 있으면 ;로 구분합니다.
style 속성은 <style> 태그 또는 외부 스타일 시트에 지정된 스타일과 같이 전역으로 설정된 모든 스타일보다 우선합니다.
<h1 style="color:blue;text-align:center">머리글 입니다</h1>
문서의 언어는 lang 속성으로 선언합니다.
lang 속성은 html 태그에서 선언합니다.
화면판독기 및 검색 엔진에서 언어를 선언하는것이 중요합니다.
한국어는 "ko" 입니다.
<!DOCTYPE html>
<html lang="ko">
<body>
...
</body>
</html>title 속성은 요소위에 마우스를 가져가면 title 속성의 값이 툴팁으로 표시됩니다.
accesskey 속성은 요소를 activate 또는 focus를 마추기 위한 단축키를 지정합니다. 단축키 접근은 브라우저 마다 다릅니다.
| Browser | Windows | Linux | Mac |
|---|---|---|---|
| Internet Explorer | [Alt] + accesskey | N/A | |
| Chrome | [Alt] + accesskey | [Alt] + accesskey | [Control] [Alt] + accesskey |
| Firefox | [Alt] [Shift] + accesskey | [Alt] [Shift] + accesskey | [Control] [Alt] + accesskey |
| Safari | [Alt] + accesskey | N/A | [Control] [Alt] + accesskey |
| Opera | Opera 15 or newer: [Alt] + accesskey Opera 12.1 or older: [Shift] [Esc] + accesskey |
||
단축키 조합은 브라우저에서 설정할 수 있습니다.
contenteditable 속성은 요소의 내용을 편집 할 수 있는지 여부를 지정합니다.
일반적인 요소의 기본값은 false 입니다.
data- 속성은 사용자 정의 데이터를 페이지 또는 응용프로그램에 비공개로 저장하는데 사용합니다.
접두어가 'data-'인 사용자 정의 속성은 브라우저에서 완전히 무시됩니다.
<div data-mydata="myvalue">...</div>dir 속성은 요소 내용의 텍스트 방향을 지정합니다.
| 값 | 설명 |
|---|---|
| ltr | 기본값. Left-to-right 방향 |
| rtl | Right-to-left 방향 |
| auto | 브라우저가 내용에 따라 방향을 결정합니다.(텍스트 방향을 알 수 없는 경우에만 권장) |
draggable 속성은 요소가 드래그 가능한지 여부를 지정합니다.
링크 및 이미지는 기본적으로 드래그 할 수 있습니다.
| 값 | 설명 |
|---|---|
| true | 요소를 드래그 가능하도록 지정합니다. |
| false | 요소를 드래그 할 수 없도록 지정합니다. |
| auto | 브라우저의 기본 동작을 사용합니다. |
요소를 숨깁니다.
JavaScript에서 요소의 숨겨진 속성을 제거하고 다시 표시할 수 있습니다.
값 없이 사용할 수있습니다.
XHTML에서는 값이 있어야 하므로 hidden="hidden" 으로 정의합니다.
tabindex 속성은 요소의 탭 순서를 지정합니다. 값은 정수값이 지정되면 1이 처음입니다.