html5 속성의 전체 목록입니다. HTML 태그 참조

HTML5 이전에는 HTML 요소의 속성을 사용하여 작업하는 것이 재미없었습니다. rel 또는 class 같은 속성을 사용해야 했습니다. 그리고 일부 개발자는 자신만의 속성을 만들기도 했습니다.

그러나 HTML5가 데이터 속성을 사용할 수 있는 기회를 주면서 상황은 극적으로 바뀌었습니다. 이제 표준 도구를 사용하여 추가 데이터를 아주 쉽게 저장할 수 있습니다.

날짜 속성은 어떻게 작동하나요?

이름은 그 자체로 말합니다. 날짜 속성은 사용자가 지정한 일부 데이터를 저장합니다. 항상 접두사 data-로 시작하고 개발자가 더 쉽게 이해할 수 있는 것으로 끝납니다(사양에 따르면 소문자와 하이픈만 허용됩니다). 요소에는 날짜 속성이 얼마든지 포함될 수 있습니다.

사용자 데이터를 저장하기 위해 속성을 사용하는 예:

칼뱅

물론 이 데이터는 최종 사용자가 볼 수 없기 때문에 최종 사용자에게 그다지 도움이 되지 않지만 날짜 속성은 현대 웹 기술에서 매우 널리 사용됩니다.

다음은 페이지에서 항목을 삭제하는 버튼의 예입니다.

필요한 모든 매개변수를 손쉽게 사용할 수 있으며 백엔드 스크립트로 전송할 준비가 되어 있습니다. 더 이상 상대 속성이나 ID 처리 또는 다른 속성의 필수 작업이 없습니다.

무엇을 저장할 수 있나요?

기억해야 할 규칙은 단 하나입니다. 객체는 날짜 속성에 저장할 수 없습니다. 즉, 먼저 직렬화하면 가능합니다. 지금은 원칙적으로 문자열 데이터만 저장할 수 있다는 점만 기억하세요.

자바스크립트를 사용하여 속성 읽기/쓰기

버튼 예제로 돌아가서 필수 속성에 어떻게 액세스할 수 있는지 살펴보겠습니다.

// 이것은 버튼입니다. var 버튼 = document.getElementById("your-button-id"); // 값 가져오기 var cmd = 버튼.getAttribute("data-cmd"); var id = 버튼.getAttribute("data-id"); // 값 변경 버튼.setAttribute("data-cmd", yourNewCmd); 버튼.setAttribute("data-id", yourNewId);

아주 간단하죠? 이제 cmd 및 id 매개변수를 애플리케이션에 전달하고 필요한 Ajax 요청을 수행하기만 하면 됩니다.

jQuery를 사용하여 날짜 속성을 읽고 씁니다.

다음은 jQuery의 아날로그입니다.

// 값 가져오기 var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#your-button-id").attr("data-id"); // 값 변경 $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

data() 메소드와 혼동하지 마십시오. 공통점이 있지만 일반적으로 완전히 다른 것입니다. 이러한 방법에 완전히 익숙하지 않더라도 attr() 을 사용하세요.

데이터세트 API 사용

HTML5는 데이터 속성 작업을 위한 API도 제공하지만 IE10 이하에서는 지원하지 않습니다.

이번에도 버튼이 있는 예이지만 이번에는 데이터세트 API를 사용합니다.

// 이것은 버튼입니다. var 버튼 = document.getElementById("your-button-id"); // 값 가져오기 var cmd = 버튼.dataset.cmd; var id = 버튼.데이터세트.id; // 값 변경 버튼.dataset.cmd = yourNewCmd; 버튼.dataset.id = yourNewId;

데이터 접두사와 하이픈이 없다는 점에 유의하세요. JavaScript에서 CSS 속성을 사용할 때와 마찬가지로 "혹등고래" 케이스가 필요합니다. Dataset API는 HTML의 data-some-attribute-name이 JavaScript의 data-some-attribute-name이 되도록 속성 이름을 변환합니다.

날짜 속성으로 무엇을 할 수 있나요?

주어진 예는 단지 기초일 뿐입니다. 날짜 속성을 사용하면 훨씬 더 복잡한 작업을 수행할 수 있습니다. 몇 가지 예를 살펴보겠습니다.

여과법

요소 목록으로 작업 중이고 키워드로 요소를 필터링해야 한다고 가정해 보겠습니다. 장소 키워드데이터 속성에 작은 반복 스크립트를 사용하여 처리합니다.

포드
쉐보레

"무릎 위"의 예:

$("#filter").on("keyup", function() ( var 키워드 = $(this).val().toLowerCase(); $(".cars > li").each(function() ( $(this).toggle(키워드.길이< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

양식화

물론 클래스를 사용하여 스타일을 적용하는 것이 더 좋지만 데이터 속성을 사용하여 동일한 작업을 수행할 수 있습니다. 이는 해당 값에 관계없이 특정 데이터 속성이 있는 요소에 스타일을 적용하는 방법입니다. 먼저 HTML을 살펴보겠습니다.

이제 CSS는 다음과 같습니다.

(배경: 빨간색;)

하지만 속성의 가치를 어떻게 고려합니까? 다음은 값에 error라는 단어가 포함된 데이터 경고 속성이 있는 모든 요소에 스타일을 적용할 수 있는 방법입니다.

(색상: 빨간색;)

설정

잘 알려진 Bootstrap 프레임워크는 데이터 속성을 사용하여 JavaScript 플러그인을 구성합니다. 팝업 예:

데이터를 저장하는 가장 좋은 방법

날짜 속성은 웹 기술에서 매우 일반적입니다. 그러나 가장 중요한 것은 이전 브라우저에서 완벽하게 지원되며 웹 표준에 점점 더 깊이 침투하고 있다는 것입니다. 그리고 HTML 표준은 이미 승인되었으므로 오늘 작업할 수 있으며 내일 갑자기 사라질 것을 두려워하지 않아도 됩니다.

속성은 요소에 대한 추가 정보를 제공하며, 쌍을 이루는 태그인지 단일 태그인지에 관계없이 항상 시작 태그에 정의됩니다.

HTML에는 다음과 같은 여러 가지 속성이 있습니다. 만능인거의 모든 태그에 적용할 수 있으므로 이 그룹에 포함된 속성을 전역 속성이라고 합니다.

전역 속성은 이 튜토리얼의 예에 자주 등장합니다. 이미 검토한 속성을 빠르게 검토하고 다음 기사에서 논의할 전역 속성에 익숙해지는 것이 좋습니다.

주제에 대한 질문 및 작업

다음 주제로 넘어가기 전에 연습 과제를 완료하세요.

팁: 필요한 경우 페이지 콘텐츠와 요소의 언어를 정의하는 것을 잊지 마세요. 연습을 완료한 후 별도의 창에서 예제를 열어 페이지 코드를 검사하여 올바르게 완료했는지 확인하세요.

XHTML/HTML4 시대로 돌아가 보면 개발자에게는 임의의 DOM 관련 데이터를 저장하는 데 사용할 수 있는 몇 가지 옵션이 있었습니다. 자신만의 속성을 만들 수 있지만 이는 위험했습니다. 코드가 유효하지 않고 브라우저가 데이터를 무시할 수 있으며 이름이 표준 HTML 속성과 일치하면 문제가 발생할 수 있습니다.

따라서 대부분의 개발자는 추가 행을 저장하는 유일한 합리적인 방법인 class 또는 rel 속성을 고수했습니다. 예를 들어 Twitter 메시지 타임라인과 같은 메시지를 표시하는 위젯을 생성한다고 가정해 보겠습니다. 이상적으로는 코드를 다시 작성하지 않고도 JavaScript를 구성할 수 있어야 하므로 다음과 같이 클래스 속성에 사용자 ID를 정의합니다.

JavaScript 코드는 ID가 있는 요소를 찾습니다. msglist. 스크립트를 사용하여 다음으로 시작하는 클래스를 검색합니다. 사용자_, 여기서는 "bob"이 사용자 ID가 되며 해당 사용자의 모든 게시물이 표시됩니다.

최대 메시지 수를 설정하고 6개월(180일)이 지난 메시지를 건너뛰고 싶다고 가정해 보겠습니다.

우리의 속성 수업매우 빠르게 복잡해집니다. 실수하기가 더 쉽고 JavaScript에서 문자열을 구문 분석하는 것이 점점 더 어려워집니다.

HTML5 데이터 속성

다행히 HTML5에는 사용자 정의 속성을 사용하는 기능이 도입되었습니다. 접두사와 함께 소문자 이름을 사용할 수 있습니다. 데이터-, 예를 들어:

맞춤 데이터 속성:

이는 문자열입니다. JSON과 같은 문자열로 표현되거나 인코딩될 수 있는 모든 정보를 저장할 수 있습니다. 유형 캐스팅은 JavaScript를 사용하여 수행되어야 합니다.
적합한 HTML5 요소나 속성이 없는 경우에 사용해야 합니다.
해당 페이지만 참조하세요. 마이크로포맷과 달리 검색 엔진, 크롤러 등 외부 시스템에서는 무시되어야 합니다.

JavaScript 처리 예제 #1: getAttribute 및 setAttribute

모든 브라우저에서는 getAttribute 및 setAttribute 메소드를 사용하여 데이터 속성을 가져오고 변경할 수 있습니다.

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("데이터 목록-크기", +show+3);

이는 작동하지만 이전 브라우저와의 호환성을 유지하는 데에만 사용해야 합니다.

JavaScript 처리 예제 2: jQuery 라이브러리의 data() 메서드

에서 시작 jQuery 버전 1.4.3 data() 메소드는 HTML5 데이터 속성을 처리합니다. 접두사를 명시적으로 지정할 필요는 없습니다. 데이터-이므로 다음과 같은 코드가 작동합니다.

Var msglist = $("#msglist"); var show = msglist.data("목록 크기"); msglist.data("목록 크기", show+3);

그러나 jQuery는 이러한 속성의 값을 적절한 유형(부울, 숫자, 객체, 배열 또는 null)으로 변환하려고 시도하며 DOM에 영향을 미칠 것이라는 점에 유의하십시오. 같지 않은 setAttribute, 방법 데이터()속성을 물리적으로 대체하지 않습니다. 데이터 목록 크기- jQuery 외부에서 해당 값을 확인하면 여전히 5로 유지됩니다.

JavaScript 처리 예제 3: 데이터 세트 작업을 위한 API

마지막으로 DOMStringMap 객체를 반환하는 HTML5 데이터 세트로 작업하기 위한 API가 있습니다. 데이터 속성은 접두사 없이 객체에 매핑된다는 점을 기억해야 합니다. 데이터-, 이름에서 하이픈이 제거되고 이름 자체가 camelCase로 변환됩니다. 예를 들면 다음과 같습니다.

속성 이름	데이터세트 API 이름
데이터 사용자	사용자
데이터 최대화	최대
데이터 목록 크기	목록크기

새로운 코드:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

이 API는 모든 최신 브라우저에서 지원되지만 IE10 이하에서는 지원되지 않습니다. 이러한 브라우저에 대한 해결 방법이 있지만 이전 브라우저용으로 글을 작성하는 경우 jQuery를 사용하는 것이 더 실용적일 수 있습니다.

마지막 업데이트: 2016년 4월 8일

HTML5로 웹 페이지를 만드는 것으로 직접 이동하기 전에 웹 페이지를 구성하는 기본 구성 요소를 살펴보겠습니다.

다른 HTML 문서와 마찬가지로 HTML5 문서는 요소로 구성되고 요소는 태그로 구성됩니다. 일반적으로 요소에는 꺾쇠 괄호로 묶인 여는 태그와 닫는 태그가 있습니다. 예를 들어:

div 요소 텍스트

여는 태그가 있는 div 요소가 정의되어 있습니다.

및 닫는 태그

. 이 태그 사이에는 div 요소의 내용이 있습니다. 이 경우 콘텐츠는 "Text of the div element"라는 간단한 텍스트입니다.

요소는 단일 태그로 구성될 수도 있습니다(예: 요소).
, 그 기능은 줄을 끊는 것입니다.

텍스트
div 요소

이러한 요소를 빈 요소라고도 합니다. 닫는 슬래시를 사용했지만 사양에 따라 그 존재 여부는 선택 사항이며 슬래시 없이 태그를 사용하는 것과 동일합니다.

여는 태그 내의 각 요소는 속성을 가질 수 있습니다. 예를 들어:

단추

여기에는 div와 input이라는 두 가지 요소가 정의되어 있습니다. div 요소에는 스타일 속성이 있습니다. 등호 뒤에는 속성 값이 따옴표로 묶여 표시됩니다: style="color:red;" . 이 경우 값은 "color:red;"입니다. 텍스트 색상이 빨간색임을 나타냅니다.

두 번째 요소인 입력 요소는 하나의 태그로 구성되며 유형(요소의 유형을 나타냄 - 버튼)과 값(버튼의 텍스트 정의)이라는 두 가지 속성을 갖습니다.

스타일과 같은 모든 요소에 대한 전역 또는 공통 속성이 있고 유형과 같은 특정 요소에 적용되는 특정 속성이 있습니다.

일반 속성 외에도 부울 속성도 있습니다. 이러한 속성은 의미가 없을 수도 있습니다. 예를 들어, 버튼에 대해 비활성화된 속성을 설정할 수 있습니다.

비활성화된 속성은 해당 요소가 비활성화되었음을 나타냅니다.

전역 속성

HTML5에는 세트가 있습니다 전역 속성, 이는 모든 HTML5 요소에 적용됩니다.

accesskey : 요소에 빠르게 액세스하기 위한 키를 정의합니다.

class : 요소에 적용될 CSS 클래스를 지정합니다.

contenteditable: 요소의 콘텐츠를 편집할 수 있는지 여부를 결정합니다.

contextmenu : 요소를 마우스 오른쪽 버튼으로 클릭하면 표시되는 요소의 상황에 맞는 메뉴를 정의합니다.

dir: 요소의 텍스트 방향을 설정합니다.

draggable: 요소를 드래그할 수 있는지 여부를 결정합니다.

dropzone: 요소에 놓을 때 놓기 영역 데이터를 복사할 수 있는지 여부를 결정합니다.

Hidden : 요소를 숨깁니다.

id : 요소의 고유 식별자입니다. 웹페이지의 요소에는 중복된 식별자가 있어서는 안 됩니다.

lang : 요소의 언어를 지정합니다.

맞춤법 검사 : 이 요소에 맞춤법 검사를 사용할지 여부를 나타냅니다.

style : 요소의 스타일을 설정합니다.

tabindex : Tab 키를 사용하여 항목을 전환할 수 있는 순서를 정의합니다.

title : 요소에 대한 추가 설명을 설정합니다.

번역: 요소의 콘텐츠를 번역해야 하는지 여부를 결정합니다.

그러나 일반적으로 이 전체 목록에서 클래스, ID 및 스타일의 세 가지가 가장 자주 사용됩니다.

맞춤 속성

이전 버전의 마크업 언어와 달리 HTML5에는 맞춤 속성이 추가되었습니다. 이제 웹 페이지의 개발자 또는 작성자는 접두사를 접두사로 지정하여 모든 속성을 정의할 수 있습니다. 데이터-. 예를 들어:

데이터 색상 속성은 여기에서 정의되며 "red" 값을 갖습니다. 이 요소나 일반적으로 html에는 그러한 속성이 없습니다. 우리는 그것을 스스로 정의하고 어떤 값으로든 설정합니다.

작은따옴표 또는 큰따옴표

html에서 속성 값을 정의할 때 작은따옴표와 큰따옴표가 모두 사용되는 경우를 종종 찾을 수 있습니다. 예를 들어:

이 경우 작은따옴표와 큰따옴표를 모두 사용할 수 있지만 큰따옴표가 더 자주 사용됩니다. 그러나 때로는 속성 값 자체에 큰따옴표가 포함될 수 있으며, 이 경우 전체 값을 작은따옴표로 묶는 것이 더 좋습니다.

에이! HTML5현재 웹 인터페이스 및 애플리케이션 개발에 이미 활발히 사용되고 있습니다. 우리 모두는 HTML5가 많은 새로운 태그, 속성 및 요소를 가져왔다는 것을 알고 있습니다. 그 중 일부는 우리 사이트에 정말 유용합니다. 따라서 이 기사에서는 몇 가지 유용하고 중요한 사항에 대해 간략하게 설명하겠습니다. HTML5 태그 및 속성, 실제로 알고 사용해야합니다!

HTML5 구조적 마크업

이미 설정된 div 블록을 대체하도록 설계된 몇 가지 새로운 태그가 HTML5에 나타났습니다(물론 전부는 아닙니다 🙂). 말하자면 겉으로는 아무것도 변하지 않았지만 본질적으로 새로운 태그는 의미론적(의미론적) 부하를 전달하고 각 블록에 대해 해당 위치와 역할을 엄격하게 정의합니다.

— 로고, 기본 탐색 등을 사용하여 사이트의 "헤더" 영역을 정의합니다.
— 일반적으로 추가 정보가 포함된 웹사이트 웹페이지 또는 섹션의 바닥글인 "바닥글"을 정의합니다.
— 동일한 유형의 개체를 그룹화하거나 텍스트를 섹션으로 나누는 데 사용되는 블록을 정의합니다.
— 페이지의 자율적인 부분을 정의합니다. 포럼 게시물, 잡지 게시물, 신문 기사, 블로그 항목 등이 될 수 있습니다.
— 일반적으로 링크 목록인 탐색 영역을 정의합니다.

형태

새로운 유형의 입력 필드

HTML5에는 새로운 유형이 도입되었습니다. 입력 필드. 이를 통해 의미상 더 정확한 코드를 작성할 수 있습니다. 모바일 장치. 예를 들어, 이메일 유형을 사용하는 경우 입력된 텍스트가 이메일 주소 등과 동일한지 자동으로 확인됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<입력 유형 = "url" >
<입력 유형 = "이메일" >
<입력 유형 = "색상" >
<입력 유형 = "날짜" >
<입력 유형 = "날짜/시간" >
<입력 유형 = "datetime-local" >
<입력 유형 = "월" >
<입력 유형 = "숫자" >
<입력 유형 = "범위" >
<입력 유형 = "검색" >
<입력 유형 = "전화" >
<입력 유형 = "시간" >
<입력 유형 = "주" >