HTML5

2015.12.13 기준 최신 웹 기술인 HTML에서 추가된 기능들을 알아봅니다. 

 

################ 비디오 - video ################

 

1. <video>태그 : 동영상을 문서에 삽입하는 기능
　<video width="수치" controls>
　　<source src="URL">
　</video>

2. 웹브라우저간 호환성 문제
　웹브라우저마다 지원하는 동영상 포멧이 다르므로 여러가지 형태(확장자)의 동영상을 기술하면
　웹브라우저는 자신이 지원하는 기능 중 가장 선호하는 형식의 동영상을 선택해서 화면에 표시한다.

 

################ Can I use ################

 

HTML5같이 웹 최신 기술을 웹페이지에 사용하면 예전 버전 웹브라우저를 사용하는 사용자같은 경우는 사용할 수 없는 호환이 안되는 문제가 생길 수 있다.
이런 최신 기술들을 사용해도 되는지에 대한 의사결정에 도움을 주는 사이트 caniuse.com
- 어떤 기술들이 각 웹브라우저에서 지원되는지, 전세계적으로 얼마나 이 기술을 사용할 수 있는지 알 수 있다.

 

################ HTML5의 입력양식 ################

 

HTML5부터 input type값이 대폭 추가됨.
이것들의 전반적인 특징은 사용자 입력값을 받을 때 좀더 강한 규제, 강제, 유도를 할 수 있다는 것과
모바일에서 사용자들이 좀 더 값에 맞게 입력하기가 쉬워졌다는 것.

• color : 칼라선택
• date : 날짜선택
• datetime : 국제표준시
• datetime-local  : 현재 살고있는 지역 시간대
• email : 이메일 정보 입력강제
• month : 연, 월 입력강제
• number : 숫자 입력강제
• range : 슬라이더(범위 값).
• search : 시각장애인용, 정보설명으로서의 역할
• tel : 전화번호
• time : 시간
• url : url정보입력
• week : 몇번째 주 입력강제

 

 

################ HTML5의 입력양식의 속성들 ################

 

<input> 태그의 속성들
1. autocomplete="on/off" : 사용자가 한 번 입력했던 정보를 기억한 뒤, 자동완성 시켜주는 기능
　 만일 모든 <input>태그들에 동일하게 적용하려면 상위 태그인 <form>태그에 on으로 적용후
　 필요할 경우 특정 <input>태그에만 off로 설정

2. placehorder="내용" : 입력창에 디폴트값으로 내용을 표시, 사용자가 직접 입력시 해당 내용은 사라짐.

3. autofocus : 특정 <input>태그에 입력해두면 사용자가 페이지에 접속시 해당 태그를 오토포커스 해줌.

 

################ HTML5 입력 값 체크 ################

 

<input>태그의 유효성 검사 기능을 갖는 속성들
1. required : 사용자가 반드시 정보값을 채워야만 제출이 가능해짐.(필수입력)

2. pattern : 사용자가 정보값을 입력할때 특정 양식을 따르도록 강제하는 속성

※ pattern 속성의 속성값은 "정규표현식"으로 입력해야한다.(정규표현식은 html과는 별개의 언어)

 

정규표현식강의 -> https://opentutorials.org/course/909/5142