Category: Designer

웹 언어 인 HTML은 가장 잘 알려진 웹 기술 중 하나이다. HTML은 도입된 이래로 인터넷을 구축하기 위해 지속적으로 사용되고 있다.

많은 새로운 기술이 웹 사이트 작성 프로세스를 보다 간단하고 효율적으로 만들었지 만 HTML은 항상 핵심이었다.

HTML 5는 2014년에 나왔다. 하이퍼 텍스트 마크 업 언어의 표준화를 향한 또 다른 단계였으며, 2014년 10월에 개정된 HTML 사양은 합리적이었다. 사람들은 이제 또 다른 업그레이드를 기대하고 있다.

WHATWG – HTML 사양을 규제하는 기관은 시간이 지남에 따라 HTML 사양을 지속적으로 변경할 것이며 한 번에 광범위하게 변경하지 않을 것이다(출처에 따르면).

이 글에서는 HTML 6에서 가장 많이 변경될 사항과 HTML 6의 새로운 기능을 중심으로 살펴보도록 하겠다.

익스프레스 태그

이름에서 알 수 있듯이 이러한 태그는 명시적이다. 웹 페이지의 로고와 같은 태그를 사용할 수 있다.
또한 , , 등의 태그를 사용할 수 있다.

대화 상자(dialog) 요소는 HTML6과 함께 진행 중이다. 이 요소는 JavaScript 기반 모달 창과 동일한 것으로 간주된다.
dialog 요소는 이미 표준화되었지만 Chrome 및 Samsung 인터넷 브라우저와 같은 일부 브라우저만 완벽하게 지원한다. 곧 모든 브라우저에서 작동할 것으로 예상된다.
기본 형식의 이 요소는 배치된 위치 위에만 마우스오버를 표시한다.
보다 일반적인 모달과 같은 인터페이스를 사용하려면 JavaScript를 통해 모달 메서드를 열 수 있다.

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

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

기본 양식에서 요소는 대화 형이 아닌 콘텐츠가 포함된 회색 배경을 만든다.
대화 상자 요소 내의 양식에서 method 속성을 사용할 수 있으며, 이것은 값을 제출하고 값을 다시 대화 상자 객체로 전달한다.
전반적으로 이 대화 요소는 사용자와의 작은 상호 작용 및 UI 향상에 유리하다.
open 속성을 토글 하여 표준 HTML 형식으로 열고 닫을 수 있다.

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

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

이미지 크기를 조정할 자유

전문가들은 브라우저가 최상의 시청 환경을 위해 이미지 크기를 조정할 수 있는 업데이트가 진행되고 있다고 생각한다.
브라우저는 장치 및 창 크기와 관련하여 최상의 이미지 크기를 표시하기가 어렵다.
SRC 및 IMG 태그는 이 문제를 처리하는데 그다지 강력하지 않으며, 새로운 태그 ** < srcset > **를 사용할 수 있다.
이 태그를 사용하면 브라우저에서 최상의 보기를 보여주기 위해 둘 이상의 이미지 중에서 선택할 수 있게 된다.

HTML 6 전용 라이브러리

HTML 6에 캐시 가능한 라이브러리를 도입하는 것은 웹 디자이너와 사용자의 생산성을 향상시키는 단계가 될 것이다.

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

HTML로 이미지와 비디오에 주석을 달 수 있다면 좋을 것이다. HTML 5는 이미지, 비디오가 아닌 단어, 문장 및 단락을 해석할 수 있는 기능을 제공한다.
이 분야의 많은 조직들이 솔루션을 제공했으며 WHATWG가 적어도 일부를 고려한 것처럼 보인다.
희망을 가지자; 곧 HTML에 이미지와 동영상에 주석을 달 것이다.

인증 향상

HTML 5는 보안 측면에서 나쁘지 않지만, 브라우저와 웹 기술도 합리적인 보호를 제공한다. 의심할 여지없이 인증 및 보안 영역에서 더 많은 작업을 수행할 수 있다.
키(Keys)는 오프 사이트(off-site)에 저장할 수 있다. 이것은 원치 않는 사람들의 접근을 막고 인증을 강화하며, 쿠키 대신 내장 키(Keys) 사용 및 디지털 서명 개선 등이 이루어질 듯싶다.
사람들과 싱크 탱크는 WHATWG가 수락하거나 거부할 수 있는 많은 솔루션을 제공한다.

HTML 6의 사용자 정의 메뉴

UI 및 OL 태그는 유용하지만 모든 요구에 적합하지는 않다. 대화 형 요소를 보다 잘 처리할 수 있는 태그 또는 메뉴 태그는 시간이 필요하다.
메뉴는 메뉴 내부의 버튼으로 트리거 된 목록 요소를 처리할 수 ​​있다.

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

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

이 메뉴는 HTML에서 목록의 기능을 향상시킬 수 있으며 일반적인 목록과 마찬가지로 잘 작동할 수 있다.

HTML 6 통합 카메라

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

좋은 마이크로 포맷

인터넷에서 일반적인 정보를 정의해야 하는 경우가 많다.
일반 정보는 전화번호, 이름, 주소 등과 같은 공개 정보 일 수 있으며, 마이크로 포맷은 일반 데이터를 정의할 수 있는 표준이다.
마이크로 포맷은 디자이너의 기능을 향상시키고 공개 정보를 추론하는 데 필요한 검색 엔진의 노력을 줄일 수 있다.

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

FutureClaw Magazine 편집장 Bobby Mozumder는 다음과 같이 제안하고 있다.

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

– Bobby Mozumder

그에 따르면, 이것은 자바 스크립트를 로드할 필요가 없기 때문에 응답성과 로딩 시간을 향상시키는 단일 페이지 앱 웹 디자인 패턴이라고 한다.

결론

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