HTML5.1의 새로운 콘텐츠 소개

HTML 5.1 개요

2년 전 HTML5 표준의 출시는 웹 개발 커뮤니티에 큰 사건이었습니다. 인상적인 일련의 새로운 기능이 포함되어 있을 뿐만 아니라 1999년 HTML 4.01 표준이 출시된 이후 HTML에 대한 최초의 주요 버전 업데이트이기 때문입니다. "현대적인" HTML5 표준을 사용한다고 자랑하는 일부 웹사이트를 여전히 볼 수 있습니다.

다행히도 우리는 HTML 표준에 대한 다음 업데이트를 그렇게 오래 기다릴 필요가 없습니다. 2015년 10월, W3C는 HTML5의 남은 문제 중 일부를 해결한다는 목표로 HTML5.1 초안 작업을 시작했습니다. 여러 번의 반복 끝에 초안은 2016년 6월 "후보 권장 사항" 단계, 2016년 9월 "제안 권장 사항" 단계에 도달했으며, 마침내 2016년 11월 W3C 권장 사항이 출시되었습니다. 새로운 표준에 주의를 기울이는 사람들은 그것이 구불구불한 길이었음을 알아차렸을 것입니다. 처음에 제안된 많은 HTML5.1 기능은 잘못된 디자인이나 브라우저 공급업체 지원 부족으로 인해 폐기되었습니다.

HTML5.1은 아직 개발 중이지만 W3C는 HTML5.2 초안 작업을 시작했으며 2017년 후반에 출시될 예정입니다. 이 문서는 HTML5.1의 몇 가지 흥미로운 새로운 기능과 개선 사항에 대한 개요입니다. 이러한 기능에 대한 브라우저 지원은 아직 부족하지만 최소한 각 예를 테스트할 수 있도록 이러한 기능을 지원하는 몇 가지 브라우저를 보여 드리겠습니다.

상황에 맞는 메뉴는 메뉴 및 메뉴 항목 요소를 사용합니다

HTML5.1 초안에는 컨텍스트와 도구 모음이라는 두 가지 메뉴 요소가 도입되었습니다. 전자는 일반적으로 페이지에서 마우스 오른쪽 버튼을 클릭하여 활성화되는 로컬 상황에 맞는 메뉴를 확장하는 데 사용되며, 후자는 공통 메뉴 구성 요소를 정의하는 데 사용됩니다. 개발 과정에서 툴바는 사라졌지만 컨텍스트 메뉴는 살아남았습니다.

태그를 사용하여 하나 이상의 요소를 포함하는 메뉴를 정의한 다음 contextmenu 속성을 사용하여 이를 모든 요소에 바인딩할 수 있습니다.

각 은 다음 세 가지 유형 중 하나일 수 있습니다.

• 확인란 – 옵션을 선택하거나 선택 취소할 수 있습니다.

• 
  

• 명령 – 마우스를 클릭할 때 작업을 수행할 수 있습니다.

• 
  

• 라디오 – 일련의 옵션 중에서 하나를 선택할 수 있습니다.

다음은 Firefox 49에서 실행할 수 있지만 현재 Chrome 54에서는 실행할 수 없는 기본 사용 예입니다.

CodePen에서 SitePoint(@SitePoint)의 HTML5.1 메뉴 예제를 참조하세요.

지원되는 브라우저에서 이 컨텍스트 메뉴 예는 다음과 같습니다.

상황에 맞는 메뉴에 사용자 정의 항목이 있습니다.

세부정보 및 요약 요소

새로운

및

요소는 마우스 클릭을 통해 추가 정보를 표시하거나 숨길 수 있습니다. 이는 JavaScript를 사용할 때 자주 수행하는 작업이며 이제

요소와

요소를 사용하여 수행할 수 있습니다. 나머지 세부정보 요소를 표시하거나 숨기려면

요소를 클릭하세요.

다음 예제는 Firefox 및 Chrome에서 테스트할 수 있습니다.

자세한 내용과 요약은 CodePen에서 SitePoint(@SitePoint) HTML5.1 데모를 참조하세요.

이 데모는 지원되는 브라우저에서 다음과 같이 표시됩니다.

​더 많은 입력 유형 - 월, 주, 날짜/시간-현지

입력은 월, 주, 날짜/시간 지역의 세 가지 유형을 확장합니다.

처음 두 가지 유형에서는 주 또는 월을 선택할 수 있습니다. Chrome에서는 둘 다 드롭다운 캘린더로 렌더링되며 특정 주 또는 월을 선택할 수 있습니다. JavaScript를 사용하여 값을 얻으면 대략 다음과 같은 문자열을 얻게 됩니다: "2016-W43"(주 입력); "2016-10"(월 입력).

처음에 HTML5.1 초안에는 datetime과 datetime-local이라는 두 가지 날짜 유형 입력이 도입되었습니다. 차이점은 datetime-local은 사용자의 시간대를 사용하는 반면, datetime은 시간대를 선택할 수 있다는 것입니다. 개발 중에 datetime은 폐기되었으며 이제는 datetime-local만 존재합니다. datetime-local 입력은 주, 월처럼 선택할 수 있는 날짜와 별도로 입력할 수 있는 시간의 두 부분으로 구성됩니다.

다음은 모든 새로운 입력 유형의 예입니다. Chrome에서는 정상적으로 표시될 수 있지만 Firefox에서는 표시되지 않습니다.

CodePen의 SitePoint(@SitePoint) HTML 5.1 주, 월 및 날짜/시간 입력을 참조하세요.

이 데모는 지원되는 브라우저에서 다음과 같이 표시됩니다.

​반응형 이미지

HTML5.1에는 CSS를 사용하지 않고 반응형 이미지를 구현하기 위한 몇 가지 새로운 기능이 포함되어 있습니다. 각 기능에는 고유한 별도의 사용 시나리오가 있습니다.

srcset 속성

srcset 이미지 속성을 사용하면 픽셀 밀도가 서로 다른 여러 대체 이미지 데이터 소스를 나열할 수 있습니다. 이를 통해 브라우저는 사용자 장치에 적합한 품질(장치의 픽셀 밀도, 크기 조정 또는 네트워크 속도에 따라 결정됨)의 이미지를 선택할 수 있습니다. 예를 들어, 속도가 느린 모바일 네트워크나 화면이 작은 휴대폰의 경우 사용자에게 저해상도 이미지를 제공해야 합니다.

srcset 속성은 쉼표로 구분된 URL 목록을 허용하며, 각 URL에는 요청된 이미지에 가장 가까운 픽셀 비율(1개의 CSS 픽셀로 표시되는 물리적 픽셀 수)을 나타내는 수정 x가 포함됩니다. 다음은 간단한 예입니다.

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

이 예에서는 사용자 장치의 픽셀 비율이 1이면 저해상도 이미지가 표시되고, 2이면 고해상도 이미지가 표시되고, 3 이상이면 초고해상도 이미지가 표시됩니다. -res가 표시됩니다.

또는 이미지를 다양한 크기로 표시하도록 선택할 수 있습니다. 이를 위해서는 w:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

를 사용해야 합니다. 이 예에서 저해상도 이미지는 너비 600px로 정의되고, 고해상도 이미지는 너비 1000px, 초고해상도 너비는 1400px로 정의됩니다.

​크기 속성

사용자의 화면 크기에 따라 이미지를 다르게 표시하고 싶을 수도 있습니다. 예를 들어, 넓은 화면에서는 두 개의 열로 이미지를 표시하고 좁은 화면에서는 한 개의 열로 이미지를 표시할 수 있습니다. 이는 크기 속성을 사용하여 달성할 수 있습니다. 이미지에 화면 너비를 할당한 다음 srcset 속성을 통해 적절한 이미지를 선택할 수 있습니다. 예는 다음과 같습니다.

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

뷰포트 너비가 40em보다 크면 크기 속성은 이미지 너비를 뷰포트 너비의 50%로 정의합니다. 뷰포트 너비가 40em보다 작거나 같으면 크기 속성은 이미지 너비를 뷰포트 너비의 100%로 정의합니다. 뷰포트 너비.

​그림 요소

다른 화면에 따라 그림의 크기를 변경해도 여전히 요구 사항을 충족할 수 없고 다른 화면에 따라 다른 그림을 표시하려면 그림 요소를 사용해야 합니다. 로 여러 개의 서로 다른 요소를 지정하여 다양한 화면 크기에 맞는 다양한 리소스로 사진을 정의할 수 있습니다. 요소는 이미지를 로드하는 URL의 소스 역할을 합니다.

아아아아

반응형 이미지에 대해 더 자세히 알고 싶으시면 srcset을 사용하여 반응형 이미지를 만드는 방법을 클릭하세요.

form.reportValidity()를 사용하여 양식을 확인하세요

HTML5에 정의된 form.checkValidity() 메소드는 폼이 미리 정의된 유효성 검사기를 준수하는지 확인하고 Boolean 값을 반환할 수 있습니다. 새로운 reportValidity() 메서드도 비슷합니다. 양식의 유효성을 검사하고 결과를 반환하지만 사용자에게 오류를 보고할 수도 있습니다. 예는 다음과 같습니다(Firefox 또는 Chrome에서 테스트해 보세요).

CodePen에서 SitePoint(@SitePoint) 예제 HTML 5.1 보고서 유효성 데모를 참조하세요.

"이름" 입력 상자는 비어 있지 않아야 하며, 입력하지 않으면 오류가 표시됩니다. 예상대로 진행되면 다음과 같습니다.

프레임의 전체 화면 속성 허용

프레임의 새로운 부울 속성인 allowedfullscreen은 requestFullscreen() 메서드를 통해 콘텐츠를 전체 화면으로 표시할 수 있는지 여부를 제어할 수 있습니다.

맞춤법 검사를 위해 element.forceSpellCheck()를 사용하세요

새로운 element.forceSpellCheck() 메서드를 사용하면 텍스트 요소에 대한 맞춤법 검사를 실행할 수 있습니다. 이는 아직 어떤 브라우저에서도 지원되지 않는 이 문서에 나열된 첫 번째 기능이기도 합니다. 아마도 이는 사용자가 직접 편집하지 않은 요소를 검사하는 데 사용될 수 있습니다.

HTML5.1에 기록되지 않은 기능

일부 기능은 첫 번째 초안에서 정의되었지만 결국 브라우저 공급업체의 관심 부족으로 인해 제거되었습니다. 재미있는 내용은 다음과 같습니다.

비활성 속성

비활성 속성은 모든 하위 요소에 비활성화된 속성을 추가하는 것과 마찬가지로 모든 하위 요소에 대한 사용자 상호 작용을 비활성화할 수 있습니다.

대화상자 요소

요소는 기본 팝업을 제공하며 편리한 양식 컬렉션도 포함합니다.

의 메소드 속성을 사용하면 양식이 서버에 제출되는 것을 방지하고 대신 팝업을 닫고 결과를 팝업의 창시자.

이 기능은 firfox에서 아직 지원되는 것 같으니 다음 예시를 참고하시면 됩니다. (역자 주: firfox V49.0.2는 지원하지 않습니다:

SitePoint(@SitePoint) HTML 대화 상자 요소의 CodePen 예를 참조하세요.

저자의 추가 기사

• ESLint로 시작 및 실행 — 플러그형 JavaScript Linter

• 
  

• PhantomCSS를 이용한 시각적 회귀 테스트

위 내용은 HTML5.1의 새로운 콘텐츠 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!