모바일 지원(viewport)
모바일이면 pc보다 웹페이지가 화면을 좁게 쓰는데, 이것을 브라우저가 알아서 화면조절하게 하려면
meta 태그의 viewport를 이용해야한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<html>
<head>
<title>HTML-수업소개</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<h1><a href="index.html">HTML</a> </h1>
<ol>
<li><a href="1.html"></a> 기술소개</li>
<li> <a href="2.html"></a>기본문법</li>
<li><a href="3.html"></a> 하이퍼텍스트와 속성</li>
<li><a href="4.html"></a> 리스트와 태그의 중첩 </li>
</ol>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
웹애플리케이션 만들기
위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
<h2> 수업의 목적 </h2>
본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
</body>
</html>
|
cs |
content="width=device-width
width를 디바이스의 width 만큼 설정하라는 것이고
initial-scale=1.0"
화면의 크기가 줌을 하지 않은 상태에서 웹페이지를 시작하라는걸 의미한다.
내 티스토리의 viewport부분도 이런식으로 구성되어있다
iframe
어떤 문서안에 다른 문서의 내용을 그대로 가져오는 것이다.
|
1
2
3
4
5
6
|
<html>
<body>
<iframe src="http://opentutorials.org" width="500" height="500"></iframe>
</body>
</html>
|
cs |
하지만 안좋은 사이트를 iframe으로 가져오게 되면 보안상으로 매우 취약해진다.
이럴땐 sandbox를 추가해줌으로써 위험을 막아준다.
또한 form action에서도 sandbox를 넣어주면 action에 해당하는 url로 넘어가지 않는다.
HTML5의 입력양식
number
input type을 number로 지정하면 10과 15사이에 숫자만 제출가능하다. (정수만)
숫자가 범위보다 커지면 경고창이뜬다.
즉, input type은 사용자에게 입력해야하는 정보의 특징을 강요(?)할 수 있다.
date
이외에도
추가된 속성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset="utf-8">
<body>
<form action="http://localhost.php"autocomplete="on">
<input type="text" name="id"placeholder="아이디를 입력해주세요"autofocus>
<input type="password" name="pwd" autocomplete="off"placeholder="비밀번호를 입력해주세요">
<input type="submit" value="제출" name="deliver" >
</form>
</body>
</head>
</html>
|
cs |
autocomplete
자동완성 기능이다. 만약 비밀번호는 자동완성하기 싫으면 autocomplete="off"해주면된다.
autofocus
웹페이지 열었을 때 아이디 부분에 바로 커서가 있었으면 좋겠으면 autofocus넣어주면된다.
placeholder
회색으로 사용자에게 아이디를 입력하세요, 비밀번호를 입력하세요 등 기능을 알려주거나 행위를 권장할 때 쓴다.
입력값 체크
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<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>
</body>
</html>
|
cs |
required
아이디는 필수 입력, 이메일은 필수 아닐 때 이메일 옆에 required를 써주면 된다.
pattern
아이디의 첫글자는 알파벳으로 시작하고 마지막은 숫자로 만드는 것을 강제
pattern="[a-zA-Z]"
.은 정규 표현식에서 모든 문자가 가능하다는 것을 의미한다.
[a-zA-Z].
.+
'HTML > 생활코딩' 카테고리의 다른 글
| [HTML기초] 정보로서 HTML - 글꼴/meta/의미론적 태그/검색엔진 최적화 (0) | 2021.11.13 |
|---|---|
| [HTML 기초] 입력양식 -form(3) label/method/post (0) | 2021.11.12 |
| [HTML 기초] 입력양식 - form (2) 콤보박스/체크박스/radio/버튼/hidden (0) | 2021.11.10 |
| [HTML기초] 입력양식 - form (0) | 2021.11.05 |
| [HTML 기초] table (0) | 2021.11.03 |
댓글