[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>태그로