HTML5 추가 기능

현시점에서 최신 웹 기술인 HTML5에 추가된 기능에 대해 몇가지 정리.

• video tag
  HTML5 이전에는 video를 브라우저에 담을 표준이 없었으며 youtube와 같은 동영상 페이지는 flash와 같은 플러그인을 이용하여
  동영상을 웹페이지에서 재생하곤 하였으나, HTML5에 video tag가 등장함으로서 플러그인 없이 동영상 재생이 가능하게 됨.
• <video> : control속성을 이용하여 재생 설정 가능 (자세한 내용은 사용할때 document 참조.)
      <source src="동영상 경로 및 파일 이름"> : 브라우저마다 지원하는 코덱이 다르기때문에 여러 확장자의 동영상을 삽입해 주어야 함.
  </video>

• CanIUse(http://caniuse.com/)
  : 새롭게 도입된 기술들은 모든 웹브라우저에 적용되는 것이 아니라 웹브라우저마다 지원하는 종류가 달라짐.
  따라서 해당 기술이 어느 웹브라우저에 적용이되고 적용이 안되는지 확인 할 수 있는 사이트.

• HTML5의 입력 양식
  
• 입력 type 제한
  : input tag의 type형식을 지정하여 사용자의 입력을 제한 할 수 있음
• 자동 기억
  : form tag에 autocomplete="on" 속성을 통해 해당 폼 하위의 모든 input tag의 입력값을 브라우저가 기억하여 이후 자동완성 가능
  (하위 input tag에 autocomplete기능을 이용하여 on/off 할 수 있음.
• input tag의 placeholder="내용" 속성을 통해 input 칸에 내용이 출력됨. 입력이 시작되는 순간 내용은 사라짐.
• input tag에 autofocus속성을 통해 자동으로 커서가 준비되도록 할 수 있음
• 입력값 체크
  : html5의 기능으로 체크하는것을 100% 신뢰해서는 안됨. 서버단에서 좀더 체크를 해주어야 함.
• 필수적으로 입력되어야 하는경우 required속성을 부여하면 제출되지 않음.
• pattern이라는 속성을 이용하여 특정 패턴을 강제 할 수 있음(정규 표현식을 이용하여 설정)
  
  

2016.09.17 생활코딩(https://opentutorials.org)참조