-
웹앱 어플리케이션이란
웹페이지를 만드는 것에서 만족하는 것이 아니라 웹어플리케이션으로 만들수 있도록 -
정보를 제출할 땐 form 태그
<form action="./result.html" method="get"> //submit 제출 시 result.html로 이동
(어디로 요청을 보내야 되는가에 대한 정보를 가지고 있는것)
*method = 요청방식
<div>
ID : <input name="id" type="text" /> //사용자가 입력한 값을 받을 수 있다.
</div>
<div>
PW : <input name="password" type="text" />
</div>
<input type="submit" value="로그인">
</form>
get: url, ?, & , name=사용자가 입력한 값
post:
- 사용자 입력을 받는 input 태그와 버튼
input태그에는 type, name이라는 속성이 필수적으로 있어야 함. 제출되었을 때 name이 확인하는 구분자로써 사용되기 때문에 웹사이트구조에 따라 필요하지 않을 수도 있다. 그러나 form태그를 통해 정보를 담고있는 역할이기 때문에 필수적이다.
value = "어떠한 값"미리 지정해두면 화면에 이미 채워짐 / 비워두는 것이 일반적
placeholder = hint
<form action="./result.html" method="get">
<div>
ID : <input name="id" type="text" />
</div>
<div>
PW : <input name="password" type="text" />
</div>
<input type="submit" value="로그인"> // form정상적 제출
<input type="button" value="로그인"> // 아무런 반응이 없다
<button type="submit">로그인</button> // 폼 제출됨
<button>로그인</button> // 폼 제출됨
button은 타입과 상관없이 제출됨
</form>- form 태그에서의 드랍다운(dropdown)
<form action="./result.html" method="get">
<select name="color" multiple(다중선택)>
<option value="red">빨간색</option>
<option value="blue">파란색</option>
<option value="green">초록색</option>
</select>
<input type="submit" value="제출">
</form>- 다중선택을 위한 checkbox와 단일선택을 위한 radio
<div>
모자 : <input type="checkbox" name="kind" value="hat">//다중선택
상의 : <input type="checkbox" name="kind" value="top">
하의 : <input type="checkbox" name="kind" value="bottom">
양말 : <input type="checkbox" name="kind" value="socks">
</div>
<div>
남자 : <input type="radio" name="gender" value="man"> //한가지 선택
여자 : <input type="radio" name="gender" value="woman">
</div>
<input type="submit" value="제출">-
태그를 설명해주는 label 태그
이메일비밀번호
<form action="./result.html" method="get">
<div>
<label>이메일
<input type="email" name="" id="">
</label>
</div>
<div>
<label>비밀번호
<input type="password" name="" id="">
</label>
</div>
<input type="submit" value="로그인">
</form>input 타입이 체크박스, 라디오로 규정되어도 label에 부여됨
- 긴 문장을 입력받는 textarea 태그
사용자마음대로 텍스트창 크기를 자유롭게 조절가능
<textarea cols="30" rows="10"></textarea>- 이모티콘 같은 문자는 svg 태그
w3c
https://icons.getbootstrap.com/
div태그 css의 background-img
- head 태그를 구성하는 요소들
<head>
1. css 파일들 <Link>
2. style
3. title
4. meta
//파비콘 삽입
<link rel="icon" type="image/x-icon" href="./panda.ico">
</head>