HTML 5.1 공개: 14가지 새 기능 설명 및 실전 활용법

HTML5는 월드 와이드 웹 컨소시엄(W3C)이 소유하며, 전 세계 프로토콜이 상호 접근 가능하도록 웹 표준을 제공합니다. 2016년 11월, W3C는 2년 만의 첫 마이너 업데이트로 장기 실행 HTML 5를 업데이트했습니다. 많은 초기 HTML 5.1 기능은 잘못된 설계와 브라우저 벤더 지원 부족으로 제외됐습니다.

비록 HTML 5.1로 넘어온 요소와 개선사항이 적지만, 여전히 마이너 업데이트입니다. 일부 새 요소는 콤보 태그를 포함하는데, 이제 <dialog>, <details>, <summary>, <picture>가 추가돼 개발자에게 더 많은 표현 여지를 줍니다.

W3C는 이미 2017년 말 출시 예상인 HTML 5.2 초안 작업을 시작했습니다. 그동안 버전 5.1에 도입된 흥미로운 새 기능과 개선사항을 소개합니다. 자바스크립트 없이도 이 기능들을 활용할 수 있습니다. 모든 브라우저가 이 기능들을 지원하진 않으므로 프로덕션 사용 전 브라우저 지원을 확인하세요.

14. 피싱 공격 방지

target='_blank'을 사용하는 대부분 사람들은 흥미로운 사실을 모릅니다. 새로 열린 탭이 window.opener.location을 피싱 페이지로 변경할 수 있습니다. 여러분을 대신해 오프너 페이지에서 악성 자바스크립트 코드가 실행됩니다. 사용자는 이미 열린 페이지를 신뢰하므로 의심하지 않습니다.

이 문제를 완전히 없애기 위해 HTML 5.1은 브라우저 컨텍스트를 분리하는 rel="noopener" 속성 사용을 표준화했습니다. rel="noopener"는 <a>와 <area> 태그에서 사용 가능합니다.

<a href="#" target="_blank" rel="noopener"> 이 링크는 더 이상 문제를 일으키지 않습니다 </a>

참고 읽기: 디자이너를 위한 CSS3 및 HTML5 애니메이션 도구 24가지

13. 그림 캡션 유연하게 다루기

<figcaption> 태그는 <figure> 요소와 연관된 캡션이나 범례를 나타내며, 그림, 다이어그램, 일러스트 등 시각 자료 컨테이너 역할을 합니다. 초기 HTML 버전에선 <figcaption>을 <figure> 요소의 첫 번째 또는 마지막 자식 태그로만 사용할 수 있었습니다.
HTML5.1은 이 제한을 완화해 <figcaption>을 <figure> 컨테이너 내 어디에든 사용할 수 있게 했습니다.

<article> <h1>오늘 뉴스 헤드라인 </h1> <figure> <img src="petrolimage.jpeg" alt="휘발유 가격 하락"> <figcaption>주유소에서 차에 기름 넣는 남성</figcaption> </figure> <p>이번 달 휘발유 가격이 두 달 새 네 번째 인상, 경유는 보름 새 세 번째 인상입니다.</p> </article>

12. 맞춤법 검사

spellcheck는 빈 문자열, true, false가 키워드인 열거형 속성입니다. true 상태는 요소의 철자와 문법 검사를 나타냅니다.
element.forceSpellCheck()는 사용자가 요소에 포커스한 적 없어도 텍스트 요소의 철자, 문법 오류를 사용자 에이전트가 보고하도록 강제합니다.

<p spellcheck="true"> <label>이름: <input spellcheck="false" id="textbox"></label> </p>

11. 빈 옵션

새 HTML 버전에선 빈 <option> 요소를 만들 수 있습니다. <optgroup>, <datalist>, <select> 요소의 자식 요소가 될 수 있습니다. 사용자 친화적 폼 설계 시 유용합니다.

10. 프레임 전체 화면 허용

프레임용으로 개발된 불리언 allowfullscreen 속성으로 requestFullscreen() 메서드 사용 시 콘텐츠가 전체 화면으로 표시될지 제어할 수 있습니다. 예를 들어 유튜브 플레이어를 임베드한 iframe이 있다면, 플레이어가 전체 화면 비디오를 표시하려면 allowfullscreen 속성이 필요합니다.

<article> <header> <p><img src="/usericons/16235"> <b>프레드 플린트스톤</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">비공개 게시물</a></p> </header> <main> <p>내 새 비디오 확인해보세요!</p> <iframe title="비디오" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>

9. 중첩 헤더와 푸터

HTML 5.1에선 헤더와 푸터를 다른 헤더 내에 중첩할 수 있습니다. 섹션 콘텐츠 내에 포함된 경우 헤더 요소에 헤더나 푸터를 추가할 수 있습니다.
이 기능은 <section>과 <article> 같은 시맨틱 섹셔닝 요소에 정교한 헤더를 추가하고 싶을 때 꽤 유용합니다.

아래 코드에서 <article>은 <header>를 포함하고, 그 안에 <aside> 태그가 있으며, 이 <aside>가 자체 <header> 태그를 포함합니다.

<article> <header> <h2>수업: 치킨 요리법</h2> <aside> <header> <h2>저자 소개: 톰 행크</h2> <p><a href="./tomhank/">연락하기!</a></p> </header> <p>요리 외엔 전문가 아님. 쿡북 사이드쇼.</p> </aside> </header> <p><ins>치킨과 함께 지퍼백에 마리네이드를 붓고 밀봉하세요. 백에서 공기를 최대한 빼고 밀봉하세요. </ins></p> </article>

8. 너비 0 이미지

새 HTML 버전에선 크기 0 이미지를 추가할 수 있습니다. 이 기능은 이미지가 사용자용이 아닐 때 사용합니다. img 요소가 이미지 표시 외 목적으로 사용될 때(예: 페이지 조회 수 카운트 서비스 일부), width와 height 속성에 0 값을 사용하세요. 너비 0 이미지에 빈 속성 사용을 권장합니다.

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. 폼 검증

새 reportValidity() 메서드로 폼을 검증하고 결과를 가져오며, 브라우저에서 사용자에게 즉시 오류를 보고합니다. 사용자 에이전트는 요소가 동시에 여러 문제를 겪을 때 하나 이상의 제약 위반을 보고할 수 있습니다. 이 경우 "password" 입력이 필수지만 비어 있으므로 오류로 표시돼야 합니다.

<h2>폼 검증</h2> <p>세부사항 입력</p> <form> <label> 필수 입력 <input type="password" name="password" required /> </label> <button type="submit">제출</button> </form> <script> document.querySelector('form').reportValidity() </script>

6. 브라우저 컨텍스트 메뉴

HTML 5.1에선 <menu> 태그로 하나 이상의 <menuitem> 요소로 구성된 메뉴를 정의하고, contextmenu 속성으로 모든 요소에 바인딩할 수 있습니다. <menu> 요소의 id는 contextmenu 속성을 추가하려는 요소의 contextmenu 속성 값과 같아야 합니다.

각 <menuitem>은 세 가지 형태 중 하나일 수 있습니다:

• radio – 그룹에서 옵션 선택
• checkbox – 옵션 선택 또는 해제
• command – 클릭 시 액션 실행

<h2 contextmenu="popup-menu"> 우클릭으로 컨텍스트 메뉴 데모 보기. </h2> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">체크박스 1 </menuitem> <menuitem type="command" label="명령" onclick="alert('경고')">체크박스 2</menuitem> <menuitem type="radio" name="group1">라디오 버튼 a</menuitem> <menuitem type="radio" name="group1" checked="true">라디오 버튼 b</menuitem> <menuitem type="checkbox" disabled>비활성화 메뉴 항목</menuitem> </menu>

5. 스크립트와 스타일에 암호 논스(Nonce) 사용

암호 논스는 한 번만 사용할 수 있는 무작위 생성 숫자로, 페이지 요청마다 재생성해야 합니다. 이 nonce 속성은 <script>와 <style> 요소에서 사용 가능합니다.

일반적으로 웹사이트의 콘텐츠 보안 정책(Content Security Policy)이 특정 스타일이나 스크립트를 페이지에 구현할지 결정하는 데 사용됩니다. 주어진 코드에선 값이 하드코딩됐지만, 실제 시나리오에선 무작위 생성됩니다.

<script nonce='d3ne7uWP43Bhr0e'> 자바스크립트 코드 </script>

4. 역방향 링크 관계

rev 속성은 HTML 4에서 정의됐으나 HTML5에선 포함되지 않았습니다. W3C는 <a>와 <link> 요소에 rev 속성을 다시 포함하기로 했습니다. rev 속성은 현재 문서와 링크된 문서의 관계를 역방향으로 지정합니다. 널리 사용되는 구조화 데이터 마크업 포맷 RDFa 지원을 위해 포함됐습니다.

각각 레슨을 담은 두 문서 예시로, rel과 rev 속성으로 링크 정의…

//URL "chapter1.html" 문서 <link href="Lesson2.html" rel="next" rev="prev"> //URL "chapter2.html" 문서 <link href="Lesson1.html" rel="prev" rev="next"> <link href="Lesson3.html" rel="next" rev="prev">

3. 정보 표시/숨기기

새 <details>와 <summary> 요소로 콘텐츠에 확장 정보를 추가할 수 있습니다. 요소를 클릭해 추가 정보 블록을 표시하거나 숨길 수 있습니다. 추가 정보는 기본적으로 숨겨집니다.

코드에서 <summary> 태그를 <details> 태그 안에 넣으세요. <summary> 태그 뒤에 숨기고 싶은 나머지 콘텐츠를 추가합니다.

<section> <h3>오류 메시지</h3> <details> <summary>네트워크 오류로 이 파일을 다운로드하지 못했습니다.</summary> <dl> <dt>파일명:</dt><dd>Passcode.txt</dd> <dt>파일 크기:</dt><dd>8 KB</dd> <dt>오류 코드:</dt><dd>342a</dd> </dl> </details> </section>

2. 더 많은 입력 타입

HTML 입력 요소가 week, month, datetime-local 세 가지 입력 타입으로 확장됐습니다.
이름에서 알 수 있듯 처음 두 개는 사용자가 주나 월을 선택하게 합니다. 브라우저 지원에 따라 둘 다 드롭다운 달력으로 렌더링돼 특정 주나 연월 선택 가능합니다.

datatime-local은 시간대 없는 날짜와 시간 입력 필드 지정입니다. 데이터는 월이나 주 입력과 유사하게 선택 가능하며, 시간은 별도 입력 가능합니다.

<section> <h2> 주, 월, Datetime-local </h2> <form action="action_page.php"> 주 선택: <input type="week" name="year_week"> <input type="submit"> </form> <form action="action_page.php"> 생일(월 및 연도): <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="action_page.php"> 입사(날짜 및 시간): <input type="datetime-local" name="bdaytime"> <input type="submit" value="전송"> </form> </section>

1. 반응형 이미지

W3C는 CSS 없이 반응형 이미지를 구현하는 몇 가지 새 기능을 도입했습니다. 이들은…

srcset 이미지 속성

srcset 속성으로 픽셀 밀도가 다른 여러 대체 이미지 소스를 정의할 수 있습니다. 브라우저가 사용자 기기에 적합한 품질의 이미지 선택 가능. 예를 들어 모바일 기기, 느린 네트워크 사용자에겐 저해상도 이미지 표시가 좋습니다.

srcset 속성에 자체 x 수정자를 사용해 각 이미지 픽셀 비율 설명 가능. 예시처럼 사용자 픽셀이 3이면 고해상도 이미지 표시.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x" >

다른 픽셀 비율 대신 w 수정자로 다른 크기 이미지 표시 선택 가능. 이 경우 고해상도 이미지는 1600px로 정의.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

sizes 이미지 속성

대부분 작성자는 화면 크기별 다른 이미지 표시를 원합니다. sizes 속성으로 가능. 화면 너비를 이미지에 할당된 공간으로 변환하고, scrset 속성으로 적합한 이미지 선택. 예시…

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

이 경우 sizes 속성은 뷰포트 너비가 25em 초과 시 뷰포트 너비 100%를 이미지 너비로, 25em 이하 시 60%로 정의합니다.

picture 요소

picture 요소로 화면 크기별 여러 소스를 가진 이미지 선언 가능. <img>를 <picture> 요소로 감싸고 여러 자식 <source> 요소 기술로 구현.

참고 읽기: 웹 디자이너를 위한 유용한 HTML 및 CSS 프레임워크 35+

<picture> 태그만으론 아무것도 표시되지 않습니다. src 속성 값으로 기본 이미지 소스 선언하고, 대체 이미지 소스는 scrset 속성 내에 넣어야 합니다.

<picture> <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x "> <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x "> <img src="clicks/default/medium-res.jpg"> </picture>