[HTML] progress, 시맨틱 태그

1. progress 태그

- 진행 정도를 나타내는 태그

<progress value="" max=""></progress>

- onclick은 자바스크립트로 버튼을 클릭했을 때 행동할 것을 정의한다.
- id가 'pg'인 값을 증가하고 감소한다는 뜻으로 진행 버튼을 누르면 10을 증가시키고 감소 버튼을 누르면 10을 감소시켜 progress 태그에 나타내준다.

2. 시맨틱 태그

- HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미를 가지는 태그를 제공

- 검색 엔진에 노출되고 싶으면 시맨틱 태그를 사용하는 것이 좋음

• non-semantic 태그
  <div>내용</div>
  - 해당 태그 안에 들어가는 내용의 의미를 크게 유추하기 힘듦
• semantic 태그
  <article>내용</article>
  - 특정 형태의 글이 포함될 것이라는 유추가 가능

3. 시맨틱 태그 종류

header	상단부 / 로고, 머릿말, 검색창, gnb(Global Navigation Bar)
nav	메뉴바 / table, ul을 이용해서 메뉴 배치
aside	사이드 공간 / 광고, 링크모음, ...
section	중심 내용을 감싸는 공간 / 주제별 컨텐츠 영역
article	본문 내용 공간 / 컨텐츠 내용 영역, 웹 사이트 내용, 포스트 내용, ....
footer	하단부 / 제작정보, 저작권정보, nav 사이트메뉴

- 위와 같이 시맨틱 태그는 아무런 기능이 없는 것이기 때문에 CSS나 자바 스크립트로 우리가 기능을 넣어줘야 한다.