HTML6 출시 예정? 모달이 내제된다는 이야기도

요약 : 익스프레스 태그, 기본 모달 지원, 이미지 크기의 자유로운 조정, HTML 6 전용 라이브러리, 이미지 및 비디오에 대한 주석, 인증 향상, 사용자 정의 메뉴, 통합 카메라, 우수한 마이크로 포맷, JavaScript가 없는 단일 페이지 앱

 

 

HTML은 가장 잘 알려진 웹 기술 중 하나입니다. HTML은 도입 된 이래로 인터넷을 구축하기 위해 지속적으로 사용되고 있습니다. 많은 새로운 기술이 웹 사이트 작성 프로세스를보다 간단하고 효율적으로 만들었지만 HTML은 2014년에 나온 이후 항상 핵심이었습니다. 하이퍼 텍스트 마크 업 언어의 표준화를 향한 또 다른 단계였고 2014 년 10 월에 개정된 HTML 사양은 합리적이었습니다. HTML 사양을 규제하는 기관은 HTML 사양을 한 번에 광범위하지 않고 시간이 지남에 따라 지속적으로 변경하고 있는데요. 최근 HTML6이 나왔고 업데이트를 앞두고 있다는 소식입니다.  

 

HTML6에서 가장 많이 변경 될 사항과 HTML6의 새로운 기능에 대해 살펴 보겠습니다.

 

 

 

 

 

Express tags - 익스프레스 태그

웹 페이지의 로고와 같은 태그를 사용할 수 있습니다.

 

 

Native Modals Support in HTML 6 - HTML6 모달 기본 지원

dialog 요소가 HTML6에 생겼습니다. 이 요소는 JavaScript 기반 modal windows 와 (모달 창) 동등한 것으로 간주됩니다. dialog 대화 상자 요소는 이미 표준화 되어있지만 Chrome 및 Samsung 인터넷 브라우저와 같은 일부 브라우저 만 완벽하게 지원되었는데 이제 곧 모든 브라우저에서 작동 할 것입니다!

기본 형식으로 된 이 요소는 배치된 위치의 위에만 보여줍니다. 보다 일반적인 모달과 같은 인터페이스를 사용하려면 JavaScript를 통해 모달 메소드를 열어 사용하면 됩니다. 아래는 새로운 태그를 사용하는 방법입니다.

 

<dialog>
  <form method="dialog">
    <input type="submit" value="Ok" />
    <input type="submit" value="Cancel" />
  </form>
</dialog>

 

비대화형 콘텐츠가 포함 된 회색 배경이 요소의 기본 양식입니다. dialog 요소 내의 양식에서 메소드 속성을 사용할 수 있습니다. value를 전송하고 다시 dialog object 로 value를 돌려받을 수도 있습니다. 이 요소는(dialog element) 사용자와의 작은 상호 작용 및 UI 향상에 전반적으로 유리합니다. 또한 아래와 같이 모달을 open attribute로 열고 close로 html 다른 자바스크립트 필요없이 표준 양식에서 닫을 수 있습니다. 

 

<dialog open>
  <p>Dialog Box Built with HTML 6</p>
</dialog>

 

 

 

자유로운 이미지 리사이징

전문가들은 브라우저들이 최상의 뷰 환경을 위해 이미지 크기를 조정할 수있는 업데이트가 진행되고 있다고 이야기합니다. 각기 다른 장치와 윈도우 사이즈들에서 최적의 이미지 사이즈를 표시하는데 관해서 어려움을 직면했습니다. Src 및 IMG 태그는 이 문제를 처리하는데 큰 도움이 되진 않았습니다. 새로운 태그 ** < srcset > ** 는 이를 해결해줍니다. 이 태그를 사용하면 브라우저에서 최상의 화면을 보여주기 위해 둘 이상의 이미지 중에서 선택할 수 있습니다.

 

< srcset >

 

 

 

HTML 6 전용 라이브러리

캐치 가능한 라이브러리가 도입된 HTML6는 웹 디자이너와 사용자 둘 다의 생산성을 향상시켜줄 것입니다.

 

 

 

이미지 및 비디오에 대한 주석

HTML로 이미지와 비디오에 주석을 달 수 있다면 좋을 것입니다. HTML5는 단어, 문장 및 단락을 해석 할 수 있는 기능을 제공했으나 이미지와 비디오에서는 아니었습니다. 이 문제와 관련해서 필드의 많은 단체들에서 솔루션이 나왔었고 WHATWG가 적어도 일부를 고려한 것처럼 보입니다. 곧 HTML에서 이미지와 동영상에 주석을 달 수 있게 될 것입니다.

 

 

 

인증 향상

HTML5는 보안 측면에서 나쁘지 않습니다. 브라우저와 웹 기술도 나름대로 합리적인 보호를 제공합니다. 또한 도메인 인증 및 보안 영역에서 더 많은 걸 할 수 있을 것입니다. 키는 off-site에 저장할 수 있습니다. 이것은 원치 않는 사람들의 접근을 막고 인증을 강화합니다. 쿠키 대신 내장 키 사용, 디지털 서명 개선 등으로 말입니다. 사람들과 think-tanks는 제공할 수 있는 솔루션이 많고 WHATWG가 수락하거나 거부합니다.

 

 

 

HTML6의 사용자 정의 메뉴

UI 및 OL 태그는 유용하지만 모든 요구에 적합하지는 않습니다. 반응형으로 처리될 수 있는 요소인 a 태그나 menu 태그는 시간이 더 필요합니다. menu 는 menu 내부의 버튼으로 트리거 된 list 요소를 처리 할 수 ​​있습니다. menu 태그는 HTML에서 list 태그의 기능을 향상시킬 수 있으며 일반적인 list 태그와 마찬가지로 잘 작동합니다.

 

<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

 

 

 

 

HTML6 통합카메라 기능

HTML6을 사용하면 기기에서 카메라와 미디어를 최대한 활용할 수 있습니다. 카메라, 카메라의 효과, 모드, 파노라마 이미지, HDR 등을 제어 할 수 있습니다. 우리는 모든 미디어를 사용하고 용도를 ​​변경할 수 있습니다. 카메라와 HTML6으로 더 나아질 수 있는 것들이 많이 있습니다.

 

 

 

훌륭한 마이크로 포맷

인터넷에서 우리의 일반적인 정보를 정의해야 하는 경우가 비일비재합니다. 일반적인 정보라 함은 전화 번호, 이름, 주소 등과 같은 어떠한 공개적인 정보도 될 수 있습니다. 여기서 마이크로 포맷은 일반적인 데이터를 정의할 수 있는 표준규격입니다. 마이크로 포맷은 디자이너의 기능을 향상시키고 공개 정보를 추론하는 데 필요한 검색 엔진의 노력을 줄일 수 있습니다.

 

 

 

자바 스크립트가 없는 단일 페이지 앱

FutureClaw Magazine 의 편집장 Bobby Mozumder 는 다음과 같이 제안합니다. Bobby Mozumder에 따르면, 이것은 자바스크립트를 로드할 필요가 없기 때문에 응답성과 로딩시간을 줄여줄 수 있는 싱글페이지 앱, 웹디자인 패턴입니다.

linking anchor elements to JSON/XML, API endpoints, having the browser internally load the data into a new data structure, and the browser then replaces DOM elements with whatever data that was loaded as needed. The initial data (as well as standard error responses) could be in header fixtures, which could be replaced later if desired.

앵커 요소를 JSON / XML, API 엔드 포인트에 연결하여 브라우저가 내부적으로 데이터를 새 데이터 구조로 로드하면 브라우저는 DOM 요소를 필요에 따라로드 된 데이터로 바꿉니다. 초기 데이터 (및 표준 오류 응답)는 헤더 픽스처에있을 수 있으며 원하는 경우 나중에 교체 할 수 있습니다.

 

 

결론

완벽한 것도 아니고 HTML도 없기 때문에 HTML 사양으로 개선 할 수있는 많은 것들이 있습니다. HTML의 성능을 향상시키기 위해 유용한 표준을 표준화해야합니다. 작은 변화가 이미 시작되었습니다. 기술 전문가의 의견과 일반 대중의 의견을 고려하면 아이디어를 얻을 수 있습니다. Bluetooth 지원 향상, p2p 파일 전송, 맬웨어 방지, 클라우드 스토리지 통합은 다음 HTML 버전에서 고려해야 할 사항입니다. 이것은 미래를 위한 것입니다. 그러나 이미 소개 된 일부 업데이트가 있으며 일부는 곧 발표 될 가능성이 높으며 다른 업데이트는 단순한 예측 일뿐입니다. 이 기사가 HTML6에 대한 통찰에 도움이되기를 바랍니다.  

 

 

*  아래 링크를 참고, 번역하여 작성한 포스팅입니다.

HTML6 is Coming – What’s new in HTML6