[HTML 문서 만들기]
- HTML (Hyper Text Mark up Language) : 웹문서를 만드는 언어
- 기본구조 : <!DOCTYPE html>로 시작해 <html>, <head>, <body> 영역으로 구성
<!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹문서 라는 뜻
<html> </html> : 웹문서의 시작과 끝을 나타내는 태그
<head> </head> : 웹 브라우저가 웹문서를 해석하는데 필요한 정보 입력하는 부분.
<body> </body> : 실제로 웹 브라우저 화면에 나타나는 내용. HTML 태그의 대부분이 <body> 태그 안에 들어감.
- 시멘틱(semantic)태그 : 그 이름만봐도 의미를 알 수 있는 태그
<header> : 헤더 영역
<nav> : 네비게이션 영역
<main> : 핵심 콘텐츠
<article> : 독립적인 콘텐츠
<section> : 콘텐츠 영역
<aside> : 사이드바 영역
<footer> : 푸터 영역
<div> : 여러 소스를 묶는 태그
- 텍스트 관련 태그
- 목록 관련 태그
- 표 관련 태그
- 멀티미디어 관련 태그
- <form> 태그 : <form [속성="속성값"]> 여러폼요소</form>
- <input> 태그의 유형(type)
- <input> 태그의 속성
[실습 예제] 주문 입력양식 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF=8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="prod">주문 상품</label>
<input type="text" id="prod" value="상품용 3KG" readonly>
</li>
<li>
<label for="user-name">이름</label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr" required>
</li>
<li>
<label for="이메일">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" pattern="[0-9]{3}-[0-9]{3,4}-\d{4}" id="phone" placeholder="(입력예시: 010-0000-0000)" required>
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date"> <small>(주문일로부터 최소 3일 이후)</small>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="submit" value="취소하기">
</div>
</form>
</body>
</html>[웹 표출 화면]