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는 2017년 후반에 출시될 예정인 HTML5.2 초안 작업을 시작했습니다. 이 문서는 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에서는 정상적으로 표시될 수 있지만 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 요소

요소는 기본 팝업 상자를 제공하며 편리한 양식 모음도 포함합니다. < 대화 상자> 양식이 서버에 제출되는 것을 방지하고 대신 팝업을 닫고 결과를 팝업 작성자에게 반환할 수 있습니다.

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

SitePoint를 참고해주세요. (@SitePoint)의 CodePen HTML 대화상자 요소 예시입니다.

　

위 내용은 HTML5.1의 새로운 내용입니다. 자세한 내용은 PHP를 참고해주세요. 중국사이트 (www.php.cn) >