HTML5-속성
이전 장에서 설명한 것처럼 요소에는 요소의 다양한 속성을 설정하는 데 사용되는 속성이 포함될 수 있습니다.
일부 속성은 전역 적으로 정의되어 모든 요소에서 사용할 수있는 반면 다른 속성은 특정 요소에 대해서만 정의됩니다. 모든 속성에는 이름과 값이 있으며 아래 예제에 표시된 것처럼 보입니다.
다음은 "example"값을 사용하여 class라는 속성으로 div 요소를 마크 업하는 방법을 보여주는 HTML5 속성의 예입니다.
<div class = "example">...</div>속성은 내에서만 지정할 수 있습니다. start tags 그리고 절대로 사용해서는 안됩니다 end tags.
HTML5 속성은 대소 문자를 구분하지 않으며 모두 대문자 또는 대소 문자 혼합으로 작성 될 수 있지만 가장 일반적인 규칙은 소문자를 사용하는 것입니다.
표준 속성
아래 나열된 속성은 거의 모든 HTML 5 태그에서 지원됩니다.
| 속성 | 옵션 | 함수 |
|---|---|---|
| 액세스 키 | 사용자 정의 | 요소에 액세스하기위한 키보드 단축키를 지정합니다. |
| 정렬 | 오른쪽, 왼쪽, 가운데 | 태그를 가로로 정렬 |
| 배경 | URL | 요소 뒤에 배경 이미지 배치 |
| bgcolor | 숫자, 16 진수, RGB 값 | 요소 뒤에 배경색 배치 |
| 수업 | 사용자 정의 | 캐스 케이 딩 스타일 시트와 함께 사용할 요소를 분류합니다. |
| 내용 | 허위 사실 | 사용자가 요소의 내용을 편집 할 수 있는지 여부를 지정합니다. |
| contextmenu | 메뉴 ID | 요소의 상황에 맞는 메뉴를 지정합니다. |
| 데이터 -XXXX | 사용자 정의 | 맞춤 속성. HTML 문서 작성자는 자신의 속성을 정의 할 수 있습니다. "data-"로 시작해야합니다. |
| 드래그 가능 | 참, 거짓, 자동 | 사용자가 요소를 끌 수 있는지 여부를 지정합니다. |
| 신장 | 숫자 값 | 표, 이미지 또는 표 셀의 높이를 지정합니다. |
| 숨겨진 | 숨겨진 | 요소의 표시 여부를 지정합니다. |
| 신분증 | 사용자 정의 | 캐스 케이 딩 스타일 시트와 함께 사용할 요소의 이름을 지정합니다. |
| 안건 | 요소 목록 | 요소를 그룹화하는 데 사용됩니다. |
| itemprop | 항목 목록 | 항목을 그룹화하는 데 사용됩니다. |
| 맞춤법 검사 | 허위 사실 | 요소가 철자 또는 문법 검사를 받아야하는지 여부를 지정합니다. |
| 스타일 | CSS 스타일 시트 | 요소의 인라인 스타일을 지정합니다. |
| 제목 | 사용자 정의 ID | 요소의 해당 항목을 지정합니다. |
| tabindex | 탭 번호 | 요소의 탭 순서를 지정합니다. |
| 표제 | 사용자 정의 | 요소의 "팝업"제목입니다. |
| valign | 상단, 중간, 하단 | HTML 요소 내에서 태그를 세로로 정렬합니다. |
| 폭 | 숫자 값 | 표, 이미지 또는 표 셀의 너비를 지정합니다. |
HTML5 태그와 관련 속성의 전체 목록을 보려면, 우리의 참조하시기 바랍니다 HTML5 태그를 .
맞춤 속성
HTML 5에 도입 된 새로운 기능은 사용자 정의 데이터 속성의 추가입니다.
사용자 정의 데이터 속성은 data-귀하의 요구 사항에 따라 이름이 지정됩니다. 다음은 간단한 예입니다.
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>위의 코드는 datasubject 및 data-level 이라는 두 개의 맞춤 속성이있는 완벽하게 유효한 HTML5입니다 . 표준 속성에 대해 얻은 것과 유사한 방식으로 JavaScript API 또는 CSS를 사용하여 이러한 속성의 값을 가져올 수 있습니다.