본문
151222P(화)
HTML5
<!DOCTYPE html>
Document type이 html이라고 알려주는 부분
html5를 사용한다고 알려주는 것
단락표시
<p>HyperText Markup Language</p>
줄바꿈
<br>
이미지
<src="img.jpg" height "300" alt = "산 이미지" title = "산 이미지" >
height와 width를 모두 입력하면 종횡비 깨짐
둘중 하나만 입력하면 종횡비 유지
alternative text - alt="산 이미지"
이미지가 깨질때 산 이미지라고 글자가 뜬다
장애인이 웹을 사용할 때 보다 편리하게 사용가능하게 해준다.
테이블
tr : table row
td : table data
입력
submit를 누르면 action의 주소로 각 name의 정보를 담아서 보낸다.
아마도 get방식으로 보내는듯 하다
텍스트 입력
< form action = "" >
선택
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 (다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>
multiple은 ctr키를 눌러야 여러개 선택 가능하다.
사용자가 알기는 쉽지않을것 같다. -> check box가 훨씬 낫다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>
radio에서 name을 같은 것으로 지정해줘야 단일 선택이 가능하다.
그룹핑 해준다고 생각하자
버튼
<html>
<head><meta charset="utf-8"></head>
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
</body>
</html>
submit과 별개로 button은 javascript로 기술한다.
데이터전송 hidden
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html>
ui가 필요없거나 몰래 보내야할 때
컨트롤의 제목 - lable
< form action = "" >
< p >
<label for="id_txt">text</label> : < input id="id_txt" type = "text" name = "id" value = "default value" ></ p >
< p >
<label>password :
< input type = "password" name = "pwd" value = "default value" >
</label>
</ p >
< p >textarea :
< textarea cols = "50" rows = "2" >default value</ textarea >
</ p >
</ form >
무언가의 이름표라고 markup
해당 text를 클릭하면 textfield가 활성화 된다.
id를 주기 귀찮으면 해당 영역 전체를 label 태그로 감싼다.
markup 언어의 효율성을 높이므로 될수있으면 쓰는게 맞다.
'낡은 서랍장 > HTML5' 카테고리의 다른 글
| 151231P(목) (0) | 2015.12.31 |
|---|---|
| 151230P(수) (0) | 2015.12.31 |
| 151224P(목) (0) | 2015.12.24 |
댓글