# 명품 웹 프로그래밍 정리 노트 : 3. HTML5 문서 구조화와 웹 폼 - Author: @laetipark - Published: 2022-07-09 - Updated: 2022-07-09 - Source: http://blex.me/@laetipark/%EB%AA%85%ED%92%88-%EC%9B%B9-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%A0%95%EB%A6%AC-%EB%85%B8%ED%8A%B8-3-html5-%EB%AC%B8%EC%84%9C-%EA%B5%AC%EC%A1%B0%ED%99%94%EC%99%80-%EC%9B%B9-%ED%8F%BC - Tags: javascript, html, web, css, 생능출판사 --- ## HTML5의 문서 구조화, 시맨틱 웹 - 시맨틱 웹 : 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹이다. *

,

,

등 태그를 사용하는 HTML 기존 태그들은 문서의 구조나 의미 전달이 어렵다. *
,
,
,
,
, , 같은 시맨틱 태그를 사용해 문서의 구조와 의미 전달을 용이하게 한다. ### 시맨틱 태그 -
: 페이지나 섹션의 머리말 표현으로 페이지 제목, 페이지를 소개하는 간단한 설명이 있다. -
: 하이퍼링크들을 모아 놓은 특별한 섹션으로, 페이지 내 목차를 만드는 용도이다. -
: 문서의 장(chapter, section)을 구성해 여러
이 가능하며, 헤딩 태그(
~
)를 사용하여 주제를 작성한다. -
: 블로그 포스트, 댓글 등 기타 독립적인 내용을 담는 부분으로 여러
둘 수 있다. -
: 본문에서 약간 벗어난 노트나 팁으로 페이지의 오른쪽이나 왼쪽에 주로 배치한다. -
저자나 저작권 정보 등이 있는 꼬리말 영역이다. - 시맨틱 태그 사용으로 위치나 색, 모양이 자동으로 결정되지 않는다. 즉, CSS3을 이용해 위치와 색, 모양을 지정해야한다. ```HTML ``` ![](https://static.blex.me/images/content/2022/7/9/20227914_JrqxBPgMaG595yhI6n21.jpg) -
: 본문에 사진, 차트, 소스 코드 등의 블록을 하나의 '그림'으로 묶는 블록 태그이다. -
,
:
는 정보를 열고 닫을 수 있는 상세 정보를 담는 시맨틱 블록 태그로
태그를 안에 작성해 블록의 제목을 작성한다. - 태그 : 하이라이팅(형광펜) 효과를 주는 시맨틱 인라인 태그이다. - 태그 : 텍스트의 내용이 시간임을 표시하는 시맨틱 인라인 태그이다. - 태그 : 주어진 범위나 %의 데이터 량을 표시하는 시맨틱 인라인 태그이다. - 태그 : 작업의 진행 정도를 표시하는 시맨틱 인라인 태그이다. ```HTML 시맨틱 블록 태그와 인라인 태그 연습
시맨틱 블록 태그와 인라인 태그 연습

<details>와 <summary>태그

<mark>
<time> 09:00
<meter> 70%
<progress>

``` ![](https://static.blex.me/images/content/2022/7/9/20227914_BbFbFVONIikkcs4ZpuSO.jpg) ### 웹 폼 - 웹 폼 : 로그인, 검색, 예약 등 웹 페이지에서 사용자 입력 받는 폼 -
태그 : 폼 작성할 때 이용하는 태그로 , , <select> 등으로 구성 ```HTML <form name="폼의 이름" action="submit 누르면 지정된 웹 서버 응용프로그램(Java, PHP, C/C++ 등으로 작성)에 실행 요청" method="폼 데이터를 웹 서버로 전송하는 방식(GET 또는 POST)" enctype="폼 데이터를 웹 서버로 전송할 때 암호화 방식" target="웹 서버 응용 프로그램으로부터 받은 데이터를 출력할 윈도우 이름"> 폼 구성 태그 작성 </form> ``` - <input> : 사용자가 입력하는 부분을 처리하는 태그 ```HTML <form> <input type="유형" name="요소 이름" maxlength="최대 입력 가능한 문자 개수" size="입력 창의 크기, 문자 개수" value="초기 텍스트"> 폼 구성 태그 작성 </form> ``` - <input> 태그의 id 속성 - 여러 번 사용된 폼 요소를 구분하기 위해 사용 - <label> 태그를 통해 캡션을 붙일 수 있으며, CSS를 이용해 원하는 형태로 꾸밀 수 있다. - 폼 요소 종류 - <input type="text"> : 한 줄 텍스트 입력 창 - <input type="password"> : 한 줄 패스워드 입력 창(* 등 다른 문자로 출력) - <input type="file"> : 로컬 컴퓨터의 파일 선택 - <textarea> : 여러 줄 텍스트 입력가능한 태그 창 ```HTML <form> <textarea cols="열 개수" rows="행 개수" name="요소 이름" wrap="자동 줄바꿈 처리 지정 : OFF/HARD/SOFT"> 출력 텍스트 ``` - : 목록 리스트를 작성하는 태그로 ``` - : 폼 요소과 캡션을 한 단위로 묶는 태그로, 캡션 텍스트를 명료하게 하는 장점이 있다. ```HTML 사용자 ID :
비밀 번호 : ``` ![](https://static.blex.me/images/content/2022/7/9/20227914_ShJMPSXlli4JhHt269Du.jpg) - 색 입력 폼 : 태그로 색 입력이 가능하다 ```HTML ``` - 시간 정보 입력 : 태그로 입력창을 만든다. - : 년/월(value="2022-03") - : 년/주(value="2022-W09") - : 년/월/일(value="2022-03-01") - : 시/분(value="21:30") - : 해당 나라의 시간(value="2022-03-01T21:30:10.32") value 속성으로 시간 정보 입력 가능 내용을 입력하세요. - 스핀 버튼과 슬라이드바 : 태그로 만들 수 있다. ```HTML 내용을 입력하세요. - 형식을 가진 텍스트 입력 : 태그로 이메일, URL, 전화번호, 검색키워드 등 형식을 가진 텍스트를 입력할 수 있다. ``` -
, : 폼 요소를 그룹으로 묶는 태그, 태그로 그룹 제목을 정할 수 있다. ### 문서 구조화 순서 1) 웹 페이지 전체를 구조화하여 시맨틱 태그로 분할한다. 2) 전체 제목과 소개는
태그로 작성한다. 3) 본문은
으로 묶고 본문 내 각 절이나 영역은
로 작성한다. 4) 링크나 메뉴들은
태그로 작성한다. 5)
,
,
,
등에 헤딩 태그(
~
)를 이용해 제목을 붙인다. 6) 배경 음악을 사용하면