HTML5.1의 새로운 기능은 무엇입니까?-H5 튜토리얼-php.cn

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

　컨텍스트 메뉴는 메뉴 및 메뉴 항목 요소를 사용합니다.

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

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

　각 <메뉴 항목>은 다음 세 가지 유형 중 하나일 수 있습니다.

체크박스 - 옵션(옵션)을 선택하거나 선택 취소할 수 있습니다.
명령 - 마우스를 클릭할 때 작업을 수행할 수 있습니다.
radio – 옵션 세트에서 하나를 선택할 수 있습니다.

Firefox 49에서는 작동하지만 현재 Chrome 54에서는 작동하지 않는 기본 사용 예가 있습니다.

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

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

A HTML 5.1 context menu

컨텍스트 메뉴에는 사용자 정의 항목이 있습니다.

　세부정보 및 요약 요소

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

요소와

요소를 사용하여 수행할 수 있습니다.

요소를 클릭하면 나머지 세부정보 요소를 표시하거나 숨길 수 있습니다.

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

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

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

Details and summary elements

추가 입력 유형 - 월, 주 및 날짜/시간-지역

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

　처음 두 가지 유형에서는 주 또는 월을 선택할 수 있습니다. 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 주, 월 및 날짜/시간 입력을 참조하세요.

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

Week, month and datetime-local inputs

　반응형 이미지

　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 이상에서는 초고해상도 이미지가 표시됩니다.

　또는 이미지를 다양한 크기로 표시하도록 선택할 수 있습니다. 이를 위해서는 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로 정의됩니다.

　sizes 속성

　 사용자의 화면 크기에 따라 이미지를 다른 방식으로 표시할 수 있습니다. 예를 들어, 넓은 화면에서는 두 개의 열로 이미지를 표시하고 좁은 화면에서는 한 개의 열로 이미지를 표시할 수 있습니다. 이는 크기 속성을 사용하여 달성할 수 있습니다. 이미지에 화면 너비를 할당한 다음 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보다 큰 경우, 크기 속성은 뷰포트 너비(viewport)인 경우 이미지 너비를 뷰포트 너비의 50%로 정의합니다. 40em 이하인 경우 이미지 너비는 뷰포트 너비의 100%로 정의됩니다.

　그림 요소

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

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>

로그인 후 복사

　　반응형 이미지에 대해 더 알고 싶다면 srcset으로 반응형 이미지 만드는 방법을 클릭해주세요.

　form.reportValidity()로 폼을 검증합니다

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

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

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

Working form validation with a message

프레임의 Allowfullscreen 속성

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

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

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