[HTML5] 10. 여러 가지 시맨틱 태그들 + <figure>, <summary>, <details> 태그의 활용 + 시맨틱 인라인 태그

# 문서 구조화 시 권장 사항

- 웹 페이지 전체를 구조화 후 시맨틱 태그로 분할

- 웹 페이지 전체 제목과 소개는 <header> 태그로 작성

- 본문은 <section> 으로 묶고, 본문 내 각 절이나 영역은 <article> 로 작성

- 링크나 메뉴들은 <nav> 태그로 작성

- <head>, <section>, <article>, <aside> 등에는 헤딩 태그(<h1> ~ <h6>) 를 이용하여 제목 붙이기

- 배경 음악을 연주하는 <audio>태그는 <header>영역에 삽입하기

- 문서의 모양( <head>, <section>, <article>, <aside> 의 배치 )는 CSS3 스타일 시트로 꾸미기

# 여러 가지 시맨틱 태그들

시맨틱 블록 태그	시맨틱 인라인 태그
- <figure> : 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화나 소스 코드 등을 통상적으로 '그림'으로 표현한다. - <details> : 상세 정보를 담는 태그 - <summary> : <details>로 구성되는 블록의 제목 표현	- <mark> : 중요한 텍스트임을 표시 - <time> : 텍스트의 내용이 시간임을 표시 - <meter> : 주어진 범위나 %의 데이터량 표시 - <progress> : 작업의 진행 정도 표시

# <figure> 태그 활용

# <details> 와 <summary> 태그의 활용

ex 1)

ex 2)

# 시맨틱 인라인 태그 활용

저작자표시

[HTML5] 12. 선택형 입력과 콤보 박스 + <select> + <label> 태그 + 폼 요소와 캡션 (0)	2022.07.18
[HTML5] 11. 웹 폼 + <input>, <select>, <textarea> 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + <datalist> + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기 (0)	2022.07.18
[HTML5] 9. 문서의 전형적 구조 + HTML5의 문서 구조화 + 시맨틱 태그와 시맨틱 웹 (0)	2022.07.17
[HTML5] 8. 인라인 프레임 <iframe> + 브라우저 윈도우와 인라인 프레임의 계층 관계 (0)	2022.07.17
[HTML5] 7. <a> 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target 속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 <audio>, <video> 태그 (0)	2022.07.16

🕰️ 공부하자 공부 🕰️