프론트엔드

html 5.1을 소개합니다.

CyberI 2017. 1. 25. 18:44



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

의 일부를 참고했습니다.