"메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다.
HTML 문서의 <head>와 </head> 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다."
메타태그의 속성
메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다.
http-equiv="항목명"
웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.
content="정보값"
meta 정보의 내용을 지정합니다.
name="정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<div id="root">
<form action="">
<fieldset>
<legend>필수 정보</legend>
<input type="text" name="id" id="id" />
<label for="id">아이디</label><br />
<input type=":password" name="pw" id="pw" /> 비밀번호
</fieldset>
<input type="text" name="q" placeholder="q" />
<input type="text" name="oq" placeholder="oq" />
<input type="text" name="aqs" placeholder="aqs" />
<input type="text" name="sourceid" placeholder="sourceid" />
<input type="text" name="ie" placeholder="ie" />
<button>보내기</button>
</form>
<label for="pw">비밀번호</label>
<input type="password" name="pw" id="pw" />
<input type="number" name="age" placeholder="나이" />
<input type="email" id="email" placeholder="메일주소" />
<label for married>
<input type="checkbox" id="married" />
결혼유무
</label>
<input type="checkbox" id="email" />
<label type="married" name="age"> 나이 </label>
<input type="radio" name="gender" id="man" value="man" />
<label for="man">남자</label>
<input type="radio" name="gender" id="woman" />
<label for="woman">여자</label>
<input type="date" name="birthday" id="birthday" />
<label for="birthday">생일</label>
<input type="color" name="color" id="color">가장 좋아하는색<br />
<form>
<input type="checkbox" name="vehicle1" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car">I hace a car<br>
<input type="checkbox" name="vehicle3" value="There's neither">둘 다 없다<br>
<br />
<br />
</form>
<form name="device">
<p>원하는 기종을 선택하시오.(체크박스안에 클릭)</p>
<ul>
<li><input type="checkbox">아이폰</li>
<li><input type="checkbox">갤럭시</li>
</ul>
</form>
<br />
<form name="device">
<p>원하는 기종을 선택하시오(텍스트 클릭 포함)</p>
<ul>
<li>
<label for="option_1">
<input id="option_1" type="checkbox"/>아이폰
</label>
</li>
<li>
<label for="option_2">
<input id="option_2" type="checkbox"/>갤럭시
</label>
</li>
</ul>
</form><br>
<form name="device">
<p>원하는 기종을 선택하시오.(둘다 아이폰만 선택)</p>
<label for="holly">
<input id="holly" type="checkbox">iphone<br/>
<input id="holly" type="checkbox">galaxy<br/>
</label>
</form>
<textarea
name="description"
id="description"
cols="30"
rows="10"
placeholder="자기소개" ></textarea>
<select name="like" id="like">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="mango">망고</option>
<option value="computer">컴퓨터</option>
</select>
<botton type="reset">reset</botton>
</div>
</body>
</html>출력 값
HTML에서 사용할 수있는 다른 input type은 다음과 같다
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="month">
<input type="image">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="range">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Input Type: text
<input type="text"> 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input:
ex)
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>위의 HTML 코드는 브라우저에서 다음과 같이 보여진다
Input Type: submit
<input type="submit"> 는 폼 -헨들러 (form- handler)에게 폼을 제출하 는 버튼을 정의합니다.
폼-헨들러(form-handler)는 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지이 다.
폼-헨들러(form-handler)는 폼의 action 속성에 명시되며 일반적으로 수신된 입력을 가지고 무언가를 수행합니다.
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.
Input Type: checkbox
<input type="checkbox"> 체크박스(checkbox) 를 정의 합니다.
체크박스는 제한된 선택들 중에서 사용자가 임의의 개 수를 선택할 수 있게 해준다.
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다
Input Type: button
<input type="button"> 버튼(button) 을 정의:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Input Type: Number
<input type="number"> 는 숫자 값을 포함해야 하는 입력필드에 사용됩니다.
숫자에 한계를 설정할 수 있습니다.
브라우저의 지원에 따라서, 한계를 입력 필드에 표시될 수도 있다.
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Type: time
<input type="time"> 사용자가 시간을 선택할 수 있게 해준다 (no time zone).
브라우저의 지원에 따라서, 시간 선택기(time picker)가 입력 필드로 표시될 수도 있다.
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type: datetime
<input type="datetime"> 사용자가 날짜와 시간을 (시간대와 함께) 선택할 수 있게 해준다.
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
Input Type: datetime-local
<input type="datetime-local">사용자가 날짜와 시간을 (시간대 없이) 선택할 수 있게 해준다.
브라우저의 지원에 따라서, 날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type: email
<input type="email"> 는 e-메일 주소를 포함해야 하는 입력 필드에 사용된다.
브라우저의 지원에 따라서, 폼이 제출 될 때 e-메일 주소가 자동으로 유효성 검사가 될 수 있습니다.
<form>
E-mail:
<input type="email" name="email">
</form>
Input Type: search
<input type="search"> 는 검색 필드에 사용됩니다. (검색 필드는 일반 텍스트 필드처럼 동작된다.)
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
'블록체인 sw개발자' 카테고리의 다른 글
| HTML에 CSS 적용하기 (0) | 2023.06.15 |
|---|---|
| [HTML] 폼(form) (0) | 2023.06.14 |
| 웹 브라우저와 웹 편집기 및 Visual studio code 설치와 기능 (0) | 2023.06.13 |
| 웹 브라우저의 종류 와 구조 (0) | 2023.06.13 |
| HTML 기초 (0) | 2023.06.13 |
