브라우저에게 정보를 주는 <head> 태그
•문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음.
•문서에서 사용할 외부 파일 링크
문자 세트 등 문서 정보가 들어 있는 <meta> 태그
한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용
<meta charset="UTF-8">이외에도 다양한 문서 정보를 지정
문서 제목을 나타내는 <title> 태그
웹 브라우저에 내용을 표시하는 <body> 태그
•실제 브라우저에 표시될 내용 입력
•대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들
<body>
<h1>프런트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
웹 문서 구조를 만드는 시맨틱 태그
시맨틱(semantic) : 의미론적인, 의미가 통하는
이름만 봐도 의미를 알 수 있는 HTML 태그
왜 사용할까?
•화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해
•할 수 있다
•문서 구조가 정확히 나눠지므로 PC나 모바일 등
다양한 화면에서 웹 문서를 표현하기가 쉽다
•웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다
헤더 영역을 나타내는 <header> 태그
- 헤더 영역
- 사이트 전체의 헤더 or 특정 영역의 헤더
- 검색 창이나 사이트 메뉴 삽입
내비게이션 영역을 나타내는 <nav> 태그
- 내비게이션 영역
- 웹 문서 위치에 영향을 받지 않음
- 문서 안에 여러 개 만들 수 있음(id로 구분)
핵심 콘텐츠를 담는 <main> 태그
- 웹 문서에서 핵심이 되는 내용
- 웹 문서마다 다르게 보여주는 내용으로 구성
- 웹 문서에서 한 번만 사용
독립적인 콘텐츠를 담는 <article> 태그
- 독립된 웹 콘텐츠 항목
(따로 떼어도 콘텐츠가 되는 내용)
- <section> 태그를 포함할 수 있음
콘텐츠 영역을 나타내는 <section> 태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용
- css 적용을 위해 묶는 용도로 쓰지 말 것
사이드 바 영역을 나타내는 <aside>
- 본문 내용 외에 왼쪽이나 오른쪽,
혹은 아래쪽에 사이드 바 표시
- 필수 요소가 아니므로 필요할 경우에만 사용
푸터 영역을 나타내는 <footer>
- 사이트 제작 정보나 저작권 정보, 연락처 등
- 다른 시맨틱 태그 사용해 다양한 정보 포함
여러 소스를 묶는 <div>
- 소스를 묶는 용도
- 영역을 구별하거나 스타일 적용하기 위해
'HTML,CSS > 정리' 카테고리의 다른 글
| 텍스트를 표현하는 다양한 스타일 (0) | 2021.09.17 |
|---|---|
| CSS의 기본 (0) | 2021.09.17 |
| 입력 양식 작성하기 (1) | 2021.09.17 |
| 다양한 내용 입력하기 (0) | 2021.09.15 |
| Visual Stuido Code 설치 & 기본 설정 (0) | 2021.09.15 |