HTML5의 시맨틱 태그, 폼 태그

시멘틱 웹 이란?

검색엔진이 좋아하는 웹 사이트가 있다.  html5의 문서 구조는 우선 기존 html이 웹 문서 구조를 표현하는 태그가 없다는 한계를 극복해낸 구조이며 검색엔진이 좋아하는 웹 페이지를 작성하기 위한 필요성이 나타나면서 중요해지면서 문서 구조화가 등장했다. 

 사이트의 가치를 올리기 위해서 검색 엔진이 좋아하는 웹사이트의 구조로 작성해야 한다. 예를들어 <header>, <article>, <section>, <main>, <mark>, <time> 등의 태그는 문서의 구조와 의미를 표현한다. 웹에서 검색을 했을때 웹페이지의 해당 코드를 찾아 그 정보를 기반으로 의미 있는 내용이 출력되도록 하며 그런 웹을 시맨틱 웹이라고 한다.

- 시맨틱 태그 : head, section, article, main, summary, mark, time

- 시맨틱 웹 : 웹 문서를 구조화하여 의미 있는 내용을 탐색하는 웹

1. <header>

페이지나 섹션의 머릿말 표현하는 태그로서 페이지 타이틀이나 페이지를 소개하는 간단한 설명이 추가된다.

2. <nav>

navigation의 nav으로 하이퍼링크를 모아놓은 부분이다.

3. <article>

본문에 관련되어 있으나 보조적인 요소로 기사나 댓글등이 담긴다.

4. <section>

챕터 역할을 한다. 보통 여러 섹션을 구성할 수 있으며, 헤딩태그로(EX.<H1>) 주제를 표시 할 수 있다. 

5. <aside>

본문에서 약간 벗어난 번외적인 내용을 추가하기 위해 사용하며, 보통 페이지의 양 옆에 배치한다.

6. <footer>

보통 웹페이지의 말미에 위치하지만, 위치는 바뀔 수 있으며 저작권 정보를 포함한다.

HTML5 시멘틱 블록 태그

1. <figure>

  문서 작성시 본문에 삽입하는 사진이나 차트, 소스코드 등을 블록화 하는 시맨틱 태그이다. <figure>태그를 이용해서 콘텐츠를 블록화 할 수 있다.

 블록화 한 그림의 제목은 <figcaption></figcaption>이라고 입력한다.

<figure>

   <img src="/img/tbbrother.gif" alt="logo">

   <figcaption>tbbrother 블로그 로고 입니다.</figcaption>

</figure>

2. <details>, <summary>

 <details>는 세부정보를 담는 시맨틱 블록 태그며 블록에 대해서 핸들을 표시 할 수 있다. 핸들을 표시하여 클릭을 통해 보이거나 감춰지게 한다. <summary>태그는 <detail> 블록의 제목을 표시해준다.

<details>

   <summary>예상질문</summary>

   <p>오늘의 점심 메뉴는?</p>

</details>

<details>

   <summary>예상답변</summary>

   <p>돈가스 입니다.</p>

</details>

3. 시맨틱 인라인 태그

* <mark> : 중요한 텍스트를 노란색 음영(기본)으로 표시

* <time> : 텍스트가 시간 정보인것을 표시

* <meter> : 주어진 범위 및 % 표시

     - min : 최소 , max : 최대

     - low : 하한 , high : 상한

     - optinum : 최적

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

     - value : 완료된 값

     - max : 전체 작업 값

     - form : 관련된 form요소 표시

ex) 

 <p>올해의 수석합격자는 <mark>신은지</mark> 입니다.<br>

 입학식은 <time>10:00</time>에 시작 됩니다.<br>

 회신율 <meter value="0.9">90%</meter><br> 입니다.

 입장현황(10%) <progress value="2" max="10"></progress><br>

 </p>

form 태그

웹 페이지에 입력 하는 폼을 webform 이라고 한다. <input>, <select> 등의 태그로 로그인이나 글쓰기 등등 사용자의 입력을 받기 위한 곳에서 사용되고있다. 

<form name="easy" method="get">

</form>

폼 엘리먼츠는 위와 같이 <form></form> 안에 담아야 한다.

1. name 속성

 폼의 이름을 지정하여 JS에서 쓸 수 있다.

 

2. action 속성

 폼 데이터를 처리할 웹 서버 응용프로그램을 지정하여, submit 버튼을 클릭하면 action 속성의 서버에 연결하여 웹 서버 프로그램을 실행할 것을 지시하며 폼 데이터가 전송된다.

3. method 속성

 submit 버튼을 클릭할때 폼 데이터를 웹 서버로 전송되는데 그때 어떤 방식으로 전송할지를 결정한다. 대표적인 속성은 GET, POST 방식이 있다.

form elements

1. <textarea> : 여러 줄의 텍스트 입력 칸

<textarea cols = "열"

rows = "행"

name = "엘리먼츠 이름"

wrap = "off|hard|soft"> 안녕하세요. </textarea>

2. <input type="text"> : 한 줄의 텍스트 입력 칸

3. <input type="password"> : 암호 입력에 사용하며 한 줄의 텍스트가 가려짐

4. <input type="button"> : 버튼 기능

5. <input type="submit"> : 웹 서버로 폼값을 전송

6. <input type="reset"> : 입력된 데이터 초기화

7. <input type="image"> : 이미지 버튼

8. <input type="checkbox"> : 항목을 선택 할 수 있는 체크박스

9. <input type="radio"> : 항목을 선택 할 수 있는 라디오 버튼

10. <select> : 클릭하면 드롭다운 목록이 나타나는 콤보박스

<select name="country">

<option value = "1">미국</option>

<option value = "2">중국</option>

<option value = "3">인도</option>

</select>

11. <input type="month|week|date|time||datetime-local">  : 시간정보 입력 칸

12. <input type="number|range"> : 숫자 입력 칸

13. <input type="file"> : 컴퓨터의 파일을 선택할 수 있는 요소

14. <input type="tel" placeholder="258-487-5217"> : 전화번호를 입력하는 칸(형식이 다양하기 때문에 placeholer 입력 추천)

15. <fieldset> : 폼 엘리먼츠를 그룹으로 묶을 수 있으며 <legend>태그로 그룹의 제목을 표현.