[HTML + CSS + Javascript] HTML5 문서 구조화와 웹 폼
* 이 글은 황기태 저자의 HTML5 + CSS + Javascript 웹 프로그래밍 교재를 참고하여 작성했습니다.
HTML 문서 구조화
기존 HTML의 한계 - 웹 페이지 구조화가 제대로 되지 않음
:
:
->>정보탐색이 중요한 시대에서 검색 엔진이 좋아하는 웹 사이트를 만드는 게 중요
시멘틱 웹 - 웹 문서를 구조화하여 의미 있는 탐색이 용이한 웹
시맨틱 태그 - <header>, <section>등 문서 구조화하는 데 사용하는 태그
종류)
1. <header> - 머리말(페이지 제목, 소개)
2. <nav> - 하이퍼링크 또는 목차
3. <section> - 장 또는 절
4. <article> - 독립적인 콘텐츠(보조적인 기사 등)
5. <aside> - 본문 흐름에서 벗어난 노트 등(왼쪽이나 오른쪽 배치)
6. <footer> - 저자나 저작권 정보
시맨틱 블록 태그
1. <figure>
- 그림을 블록화, 그림제목은 <figcaption>태그로
2. <details>, <summary>
-<details>는 상세 정보를 담는다.
-<summary>는 블록의 제목을 표현
시민틱 인라인 태그
1. <mark>
- 중요 텍스트
2. <meter>
- 주어진 범위나 %의 데이터 양 표시
3. <progress>
- 작업의 진행 정도 표시
4. <time>
- 시간 정보임을 표시
웹 폼
웹 폼과 폼 요소
사용자에게 입력 받는 폼 -> 웹 폼, 폼
폼을 만들기 위한 태그-> 폼 태그
<form>, 폼 태그
1. action 속성
- 폼 데이터를 처리할 웹 서버 응용프로그램 지정
2. name 속성
- 폼 이름
3. method 속성
- 폼 데이터를 웹 서버로 전송하는 형식, GET과 POST방식
4. target 속성
- 전송 받은 데이터를 출력할 윈도우 이름
5. enctype 속성
- 데이터의 인코딩 타입(암호화 방식)
폼 만들기
텍스트 입력, <input type="text|password">, <textarea>
<input type="text | password" name="요소 이름", value="초기 값", maxlength="문자 개수", size="입력 창 크기">
<textarea name="요소 이름" cols="열 개수" row="행 개수" wrap="OFF | HARD | SOFT">
데이터 목록을 가진 텍스트 입력, <datalist>
- <input>태그의 list 속성 값과 <datalist>태그의 id 속성값 같게
<input type="text" list="countries">
<datalist id="countries">
<option value="가나">
<option value="스위스">
<option value="브라질">
텍스트/이미지 버튼 만들기
1. 단순 버튼, (type="button")
<input type="button" value="로그인">
<button type="button">로그인</button>
2. submit 버튼, (type="submit")
<input type="submit" value="전송">
<button type="submit">전송</button>
3. reset 버튼, (type="reset")
<input type="reset" value="리셋">
<button type="reset">리셋</button>
4. 이미지 버튼, (type="image")
<input type="image" src="" alt="이미지 버튼">
<button type="button"><img src="" alt="이미지 버튼"></button>
선택형 입력
1. 체크박스 만들기, <input type="checkbox">
<input type="checkbox" name="요소이름" value="요소 값" checked>
2. 라디오 버튼 만들기, <input type="radio">
<input type="radio" name="요소이름" value="요소 값" checked>
* name속성 값이 같은 것끼리 하나의 그룹 생성, 그 중 하나만 선택 가능
콤보박스 만들기, <select>
<select name="">
<option value="">
<option value="">
<label>로 폼 요소의 캡션 만들기
<label><input type="text"></label>
또는
- for 속성과 id 속성으로 연결
<label for="login">로그인</label><input="text" id="login">
색 입력, <input type="color">
<input type="color" value="#000000">
시간 정보 입력
<input type="month | week | date | time | datetime-local">
스핀버튼과 슬라이드바로 편리한 숫자 입력
- 스핀버튼으로 정교한 값 입력: <input type="number">
- 슬라이드바로 대략적인 값 입력: <input type="range">
* max, min, step 으로 조절 값 정할 수 있다
형식을 가진 텍스트 입력
<input type="email | url | tel | search">
순서대로 이메일, url, 전화번호, 검색
폼 요소들의 그룹 핑, <fieldset>
제목은 <legend>태그로