html 5.1을 소개합니다.

html 5.1을 소개합니다.

html 5.0에 비해 지원하는 브라우저의 제한이 있고 많은 변화가 있는 것은 아닙니다.

하지만 html의 중요성이 커지고 있고

w3c가 웹을 선도하는 만큼 변화를 미리미리 파악하는 것은 중요합니다.

6~7가지 정도의 변화를 소개하겠습니다.

1. 우클릭으로 menuitem(context) 설정하는 기능입니다.

<menu>태그가 하위에 <menuitem>태그를 가지며 type 속성에 

checkbox, command(함수를 실행할수 있게 해줌), radio 속성을 주는 것입니다.

현재 파이어 폭스 49이상 에서만 지원합니다.

<p contextmenu="popup-menu">테스트</p>

<menu type="context" id="popup-menu">

  <menuitem type="checkbox" checked="true"> 체크박스</menuitem>

  <menuitem type="command" label="Command" onclick="alert('여기에 함수 실행')">커맨드 체크박스</menuitem>

  <menuitem type="radio" name="testA" checked="true">선택된 래디오 버튼</menuitem>

  <menuitem type="radio" name="testA">선택안된 래디오 버튼</menuitem>

  <menuitem type="checkbox" disabled>Disabled 된 항목</menuitem>

</menu>

p {

  padding: 10px;

  color: black;

  display: inline-block;

  background: yellow;

}

2. <summary>태그와 <details> 태그 입니다

클릭하면 상세설명을 보여주고 토글이 되는 기능입니다.

지금까지는 스크립트로 구현했던건데 태그만으로 구현해놓았습니다.

이렇게 되면 오히려 angular2 보다도 간단하게 구현됩니다.

크롬과 파이어폭스에서 테스트 가능합니다.

<details>

  <summary>

    안녕 넌 누구니

  </summary>

  <p>

     숨겨왔던 나~~~의~~~

  </p>

</details>

details {

   padding: 30px;

}

summary {

  cursor: pointer;

  background: yellow;

}

여기까지가 좀 눈길을 끄는 변화인것 같고 이후부터는 간단한 언급만 하겠습니다.

3. input type에 week, month, datetime local 을 구분해서 입력할수 있게 해놓았습니다.

<div>

  <div>

    <label>로컬 시간</label>

    <input type="datetime-local" onchange="intoVal('datetime-local', event.target.value)">

    <span id="datetime-local"></span>

  </div>  

  <div>

    <label>주</label>

    <input type="week" onchange="intoVal('week', event.target.value)">

    <span id="week"></span>

  </div>  

  <div>

    <label>월</label>

    <input type="month" onchange="intoVal('month', event.target.value)"> 

    <span id="month"></span>

  </div>

</div>

div {

  margin-bottom: 10px;

  background-color : yellow;

}

label {

   display: inline-block;

  text-align: right;

}

input {  

  vertical-align: text-top;

}

function intoVal(name, val) {

  document.getElementById(name).innerHTML = val;

}

4. 미디어 쿼리가 하던 기능의 일부를 tag에 옮겨왔습니다.

srcset 이라는 속성입니다.

사용자 화면 크기나 기기에 적합한 픽셀을 가진 이미지를 제공할 수 있게 해줍니다.

<img src="images/low-standard.jpg" srcset="

  images/low-srandard.jpg 1x, 

  images/middle-standard.jpg 2x, 

  images/high-standard.jpg 3x"

>

1x, 2x, 3x 대신 1000w, 2000w 등을 사용 할 수 있습니다.

미디어 쿼리 의 기능을 볼 수 있는 sizes 속성도 있습니다.

여기에 sizes 속성을 추가하면

sizes="(max-width: 100px) 80vw, 40vw" 

미디어 쿼리의 효과를 낼 수 있습니다.

5. <picture> 태그로 완전히 다른 이미지를 표시할 수 있습니다.

<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>

6. script에서 form.reportValidity() 로 양식 유효성 검사를 할 수 있습니다.

그런데 이렇게 해도 추가로 구현해야 하는 부분이 있기 때문에

그다지 메리트는 느껴지지 않습니다.

위의 내용들은 

https://www.sitepoint.com/whats-new-in-html-5-1/?utm_content=bufferfc921&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

의 일부를 참고했습니다.