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에서는 정상적으로 표시될 수 있지만 fifox에서는 표시되지 않습니다.

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로 정의됩니다. .

　크기 속성

　 사용자의 화면 크기에 따라 이미지를 다른 방식으로 표시할 수 있습니다. 예를 들어, 넓은 화면에서는 두 개의 열로 이미지를 표시하고 좁은 화면에서는 한 개의 열로 이미지를 표시할 수 있습니다. 이는 크기 속성을 사용하여 달성할 수 있습니다. 이미지에 화면 너비를 할당한 다음 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)가 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() 메소드는 양식이 미리 정의된 유효성 검사기를 준수하는지 확인하고 Boolean 값을 반환할 수 있습니다. 새로운 reportValidity() 메서드도 비슷합니다. 양식의 유효성을 검사하고 결과를 반환하지만 사용자에게 오류를 보고할 수도 있습니다. 다음은 예입니다(Firefox 또는 Chrome에서 테스트해 보세요).

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

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

프레임의 Allowfullscreen 속성

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

맞춤법 검사에 element.forceSpellCheck() 사용

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

HTML5.1에 포함되지 않은 기능

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

비활성 속성

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

Dialog 요소