본문
151231P(목)
HTML5
모바일지원 - viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
외부문서삽입 - iframe
<body>
<iframe src=http://opentutorials.org width="500" hight="500"></iframe>
</body>
유투브의 동영상 공유는 iframe을 사용한다.
iframe 보안 - html5의 sandbox
신뢰하지 못하는 웹페이지를 iframe으로 삽입하면 악의적인 공격을 받을 수 있다.
<body>
<iframe src=http://opentutorials.org sandbox></iframe>
</body>
비디오 - video
flash가 가지고있는 기술로 비디오를 보여주곤 했다.
html5가 탄생함에 따라 웹페이지에 동영상을 표현 가능
<body>
<video width="500" controls autoplay>
<source src="videos/small.mp4">
</video>
</body>
웹브라우저마다 지원가능한 확장자가 다르다.
caniuse.com
최신 웹기술을 사용해도 되는지 여부를 확인해줌
브라우저별 버전으로 지원되는지 아닌지를 표시해준다.
시장 점유율까지 나옴
HTML5의 입력양식(form)
<form action="form.php">
<input type="number" min="10" max="15">
</form>
모바일 웹브라우저에서는 숫자키패드가 뜬다.
유효하지 않은 값 입력시 알아서 컷해준다.
color
date - 날짜
datetime - 국제표준시(지원불가)
datetime-local
email
month
number
range
search
tel
time
url
week
HTML5 입력양식의 속성들
<form action="login.php" autocomplete="on">
<input type="password" name="pass" autocomplete="off">
</form>
placeholder="id를 입력하세요"
백그라운드 글자 표시
autofocus
자동으로 키보드 커서 설정
HTML5 입력 값 체크
form validation
사용자가 입력한 정보의 유효성을 판단
required
필수적으로 입력받아야 한다고 표시해주는 속성
pattern
pattern="정규표현식"
정규표현식
HTML과는 별개
[a-zA-Z].+[0-9]
[a-zA-Z]
첫문자는 알파벳으로 입력
[]로 묶인것을 한 글자로 의미한다.
.
모든 문자와 숫자
+
하나 이상 입력되어야 한다.
[0-9]
숫자가 입력되어야 한다.
<form action="register.php">
<input type="text" name="id" placeholder="아이디를 입력" required pattern="[a-zA-Z].+[0-9]">
<input type="email" name="email" placeholder="이메일 입력">
<input type="submit">
</form>
∴form validation은 보안상의 대책이 될 수 없다.
서버에서 보안하자
'낡은 서랍장 > HTML5' 카테고리의 다른 글
| 151230P(수) (0) | 2015.12.31 |
|---|---|
| 151224P(목) (0) | 2015.12.24 |
| 151222P(화) (0) | 2015.12.22 |
댓글