HTML5.1의 새로운 기능은 무엇입니까?

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

　또는 이미지를 다양한 크기로 표시하도록 선택할 수 있습니다. 이를 위해서는 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 보고서 유효성 데모를 참조하세요.

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

프레임의 Allowfullscreen 속성

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

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

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

HTML 5.1에 포함되지 않은 기능

몇 가지 기능이 첫 번째 초안에서 정의되었지만 대부분 브라우저 공급업체의 관심 부족으로 인해 최종적으로 제거되었습니다. 다음은 몇 가지 흥미로운 방법입니다.

　inert 속성

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

대화 상자 요소