03-1(HTML5의 문서 구조화)~3(폼 만들기)

웹페이지는 문서이기 때문에 구조화가 잘 되어야 한다.

시멘틱 웹 - 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹

시맨틱 태그 - 웹 문서를 구조화할 때 쓰이는 태그

<header> 머리말

<nav> 하이퍼링크

<section> 문서의 장, 절을 구성

<article> 독립적인 콘텐츠를 담는 영역, <section>이 필수적인 내용을 담으면 <article>은 웹 페이지의 본질을 훼손하지 않는 내용을 담는 영역으로 보조적인 기사 같은 걸 담는다.

<aside> 웹 페이지 본문 흐름에서 약간 벗어난 것, 오른쪽이나 왼쪽에 주로 배치

<footer> 꼬리말 영역, 주로 저자나 저작권 정보를 입력한다.

 

시맨틱 블록 태그

<figure> 그림을 블록화

<details> 상세 정보를 담음

<summary> <details>로 구성되는 블록의 제목을 표현

 

시맨틱 인라인 태그

<mark> 중요한 텍스트임을 표시

<time> 시간 정보임을 표시

<meter> 주어진 범위나 %의 데이터 양 표시

<progress> 작업의 진행 정도 표시

 

웹 폼 - 웹 페이지를 통해 사용자 입력을 받는 폼

폼 요소 - 폼을 만들기 위한 다양한 태그

 

<form> 폼 태그

• name 속성
• action 속성
• method 속성

<input type="text|password">, <textarea> 텍스트 입력

<datalist> 데이터 목록을 가진 텍스트 입력 창, list 속성 값과 id 속성 값 이용

<input>이나 <button> 텍스트/이미지 버튼 만들기

• 단순 버튼
• submit 버튼
• reset 버튼
• 이미지 버튼

선택형 입력

• 체크박스
• 라디오버튼
• 콤보박스

<label>로 폼 요소의 캡션 만들기

폼 요소 앞에 있는 것이 캡션 예) '사용자 ID:'

<label> 태그를 이용하면 캡션과 폼 요소를 한 단위로 묶어서 표현할 수 있다.

 

<input type="color"> 색 입력

<input type="">을 이용해서 시간 정보 입력 가능

<input type="number"> 스핀버튼으로 정교한 값 입력

<input type="range"> 슬라이드바로 대략적인 값 입력

min, max,  step 속성

 

<input> 태그의 placeholder 속성 - 입력할 정보의 힌트 보여줌

HTML5에서는 이메일의 주소, URL, 전화번호 같이 텍스트가 특정 형식에 맞게 입력되었는지 검사하는 폼 요소들을 제공함<fieldset> 폼 요소들의 그룹핑

<legend> 폼 요소들의 그룹의 제목