코딩 7일째
*form은 블럭. 그 안에는 인라인 요소
*가장 많이 사용되는 것은 input 태그 <input type="">
*radio: 답 하나 체크
*checkbox: 답 다중 체크
*ntt 코드
= 스페이스
*한 줄 이상 입력할 때 사용 <textarea></textarea> 크기 조절 가능!
*지원 안되는 것
<input type="datetime">
*단독 사용 불가(유효성 검사)
<input type="email">
<input type="search">
<input type="tel">
<input type="url">
*select 태그는 모바일 UI가 끝내줘욧!!!
<select>
<option></option>
</select>
--------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>양식태그</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--HTML4 까지 p.99~-->
<form>
<input type="text"><br>
<input type="password"><br>
<input type="file"><br>
<input type="submit"><br>
<input type="reset"><br>
<hr>
<input type="radio"><br>
<input type="checkbox"><br>
</form>
<br>
<form>
<label>아이디 : </label>
<input type="text">
<br>
<textarea>글씨</textarea>
</form>
<hr>
<form>
<input type="color"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="month"><br>
<input type="number"><br>
<input type="range"><br>
<input type="search"><br>
<input type="tel"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week"><br>
</form>
<!-- HTML5 p.109-->
<select>
<option>김밥</option>
<option>튀김</option>
<option>라면</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
</html>
--------------------------------------------------------------------------------------------
*<fieldset></fieldset>
테두리
fieldset과 legend는 세트다!!
*<input type="text" id="name" placeholder="이름" required value="표기값" readonly disabled>
placeholder는 칸 안에 적힌 것
value는 미리 적인 값
readonly 수정불가능, 읽기전용
disabled 사용불가
size 처음 나온 크기
maxlength 제한글자
autocomplete 자동완성
autofocus 자동 커서
----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--p.113-->
<form>
<br><br>
<fieldset>
<legend>입력양식</legend>
<table>
<tr>
<td><label for="name">이름</label></td>
<td><input type="text" id="name" placeholder="이름" required value="표기값" readonly disabled ></td>
</tr>
<tr>
<td><label for="mail">이메일</label></td>
<td><input id="mail" type="email" placeholder="이메일" required size="12" maxlength="12" autocomplete="on" autofocus></td>
</tr>
</table>
<input type="submit" id="post">
</fieldset>
</body>
</html>
--------------------------------------------------------------------------------
css는 디자인을 바꾸는 것
* 전체선택자
h1, li 태그선택자
cf) <ul><li></li></ul>의 경우 ul에 적용할 경우 적용되지 않는다. li에 직접 적용하여야 한다.
--------------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS선택자1</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<h1>css 선택자</h1>
<ul>
<li>전체 선택자</li>
<li>tag 선택자</li>
<li>id 선택자</li>
<li>class 선택자</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------
*gnb
global navigation bar
*lnb
local navigation bar
--------------------------------------------------------------------------------
교재 131~133 연습
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------