[쉽게 배우는 H.C.J] Chapter 3 - HTML 문서 구조 및 주요 태그

1. HTML5 문서 구조

■ 시맨틱 태그(sementic tag) : 의미적 태그. 태그명이 표현하는 데이터를 설명

---

※ 페이지 기술 방식 변화

□ HTML  : 문서를 좀 더 구조적으로 표현하기 위해 <div> 태그로 문서 구조의 각 영역을 구분하였다. 헤더/내용/푸터로 구분하여 가독성을 높이고, 각각 id 속성을 통해 영역을 구분한다.

□ CSS : 문서를 표현하는 곳. HTML 태그로 이루어진 웹 페이지에 디자인을 입혀 표현

□ JS : 웹 페이지에 필요한 작업 처리나 서버에 웹 페이지 요청을 담당.

---

※ HTML5에 추가된 새로운 태그

1) 시맨틱/구조적 태그

1. <header> 태그	사이트의 소개나 내비게이션 등을 표시
2. <nav> 태그	사이트의 내비게이션(메뉴) 항목을 표시. 주로 <header>에 넣어 표시
3. <article> 태그	문서의 내용(글)을 표시하는 태그. 주로 블로그의 글이나 기사와 같이 독립적인 콘텐츠를 표시
4. <section> 태그	문서의 내용을 표시하는 태그. 주로 문서의 영역적인 의미로 사용. 문서 내용을 표시할 때 <article>, <section>, <div> 중 아무거나 사용해도 ok
5. <aside> 태그	본문의 내용과 독립적인 내용(광고 등)인 사이드바 콘텐츠 표시
6. <footer> 태그	사이트 제작자, 주소, 저작권 정보 등 표시

---

2) 웹 폼 태그 - 입력 폼 구성

: 사용자의 입력을 받기 위한 화면을 구성할 때 사용하는 태그들. 입력박스, 체크박스, 버튼 등이 해당

■ 주로 <form> </form> 사이에 넣어 사용자 입력화면 구현

□ <form> 에 이름 붙일 때 <label> 태그를 사용한다.

<label for="name">이름</label>
<input type="text" id="name">

---

□ 웹 폼 태그 그룹화 : fieldset

□ <form> 태그 사용 시, action 속성을 사용하여 폼의 내용을 전달하며, 페이지 내용을 전달하는 이벤트는 <input type="submit"> 태그를 함께 사용해서 발생시킨다.

□ 만약, <form> 태그를 사용하지 않는다면 <div> 태그 등으로 싸준 후, <button> 태그 등을 이용해 폼에 입력한 내용을 전달한 페이지로 넘겨준다. (자바스크립트 사용)

□ form 태그 정의 시 다양한 속성을 사용할 수 있다.

• name 속성 : 폼에 이름을 부여해서 폼을 구별할 때 사용 (웹에서 꼭 필요!!)
• action 속성 : 사용자가 입력한 값을 처리할 페이지명을 값으로 가짐.
• method 속성 : 폼에 입력된 값을 처리 페이지로 넘길 때 HTTP 방식을 지정. 생략 시 기본값은 GET.

□ 현재 웹 프로그래밍이 대부분 Ajax 기반으로 돌아가서 <form> 태그에 속성을 사용하지 않고도 자바스크립트에서 처리할 수 있다.

---

□ 웹 폼 태그 종류

<input>	텍스트 필드, 체크 박스, 라디오 버튼 등을 만들 때 사용
<select>	콤보박스(드롭다운 박스)를 만들 때 사용
<textarea>	여러 줄을 입력하는 입력필드인 텍스트 에리어를 만들 때 사용
<button>	버튼 만들 때 사용

---

(1) input : 웹 폼 태그 중 가장 많이 사용됨. type 속성 값을 지정해서 사용하며 다양한 속성이 존재한다.

1. checked : 체크박스 또는 라디오 버튼에서 선택 항목을 미리 지정할 때 사용. 주요 항목이나 필수 항목 등에 사용함
2. disabled : 웹 폼 태그를 사용할 수 없도록 지정
3. name : 웹 폼 태그의 이름 지정
4. pattern : 정규 표현식. 유효한 값이 입력되도록 정규표현식 지정.
5. placeholder : 힌트. 텍스트 필드와 같이 값을 직접 입력하는 웹 폼 태그에 입력 힌트 값을 지정
6. required : 반드시 입력해야 하는 필수 항목 지정
7. radio : 여러 항목 중 반드시 1개의 값을 선택할 수 있는 라디오 버튼을 생성
8. file : 파일을 선택하고 업로드할 수 있는 필드 제공
9. email : 이메일을 입력받을 수 있는 1줄짜리 입력 필드를 만들 때 사용
10. url : URL 필드 생성
11. date : 날짜 선택 필드 생성
12. time : 시간 선택 필드 생성
13. textarea : 여러 줄 입력 필드 생성
14. button : 버튼 생성
15. audio : 오디오 파일 재생 시 사용
16. embed : 플래시 파일, 동영상 파일, html 파일, 이미지 파일 등을 플러그인 콘텐츠로써 화면에 표시함

등등..

---

＊ 정규표현식 : 특정 문자열 패턴, 비밀번호 패턴 또는 검색어 패턴 등에서 사용되는 글자의 연속적인 나열 방법으로, 이 나열 방법이 규정하는 규칙대로 비밀번호를 작성하거나 검색어를 입력함.

□ 이런 나열 방법을 사용하여, 정확한 값을 입력하도록 유도할 수 있고, 강력한 비밀번호를 작성할 수 있으며, 정확한 검색어의 사용으로 검색 성능을 향상시킬 수 있다.

---

https://dev-k-h.tistory.com/53
https://dev-k-h.tistory.com/54
https://dev-k-h.tistory.com/55
https://dev-k-h.tistory.com/57

이미 작성해 놓은 HTML 정리들 참고!