HTML의 기본구조

HTML의 기본구조

브라우저에게 정보를 주는 태그

•문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음.

•문서에서 사용할 외부 파일 링크

문자 세트 등 문서 정보가 들어 있는 태그

한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용

이외에도 다양한 문서 정보를 지정

문서 제목을 나타내는 태그

웹 브라우저에 내용을 표시하는 태그

•실제 브라우저에 표시될 내용 입력

•대부분의 태그가 태그와 태그 사이에서 사용하는 태그들

프런트엔드 웹 개발 HTML CSS 자바스크립트

웹 문서 구조를 만드는 시맨틱 태그

시맨틱(semantic) : 의미론적인, 의미가 통하는

이름만 봐도 의미를 알 수 있는 HTML 태그

왜 사용할까?

•화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해

•할 수 있다

•문서 구조가 정확히 나눠지므로 PC나 모바일 등

다양한 화면에서 웹 문서를 표현하기가 쉽다

•웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다

헤더 영역을 나타내는 태그

- 헤더 영역

- 사이트 전체의 헤더 or 특정 영역의 헤더

- 검색 창이나 사이트 메뉴 삽입

내비게이션 영역을 나타내는 태그

- 내비게이션 영역

- 웹 문서 위치에 영향을 받지 않음

- 문서 안에 여러 개 만들 수 있음(id로 구분)

핵심 콘텐츠를 담는 태그

- 웹 문서에서 핵심이 되는 내용

- 웹 문서마다 다르게 보여주는 내용으로 구성

- 웹 문서에서 한 번만 사용

독립적인 콘텐츠를 담는 태그

- 독립된 웹 콘텐츠 항목

(따로 떼어도 콘텐츠가 되는 내용)

- 태그를 포함할 수 있음

콘텐츠 영역을 나타내는 태그

- 콘텐츠 영역

- 몇 개의 콘텐츠를 묶는 용도로 사용

- css 적용을 위해 묶는 용도로 쓰지 말 것

사이드 바 영역을 나타내는

- 본문 내용 외에 왼쪽이나 오른쪽,

혹은 아래쪽에 사이드 바 표시

- 필수 요소가 아니므로 필요할 경우에만 사용

푸터 영역을 나타내는

- 사이트 제작 정보나 저작권 정보, 연락처 등

- 다른 시맨틱 태그 사용해 다양한 정보 포함

여러 소스를 묶는

- 소스를 묶는 용도

- 영역을 구별하거나 스타일 적용하기 위해

from http://itracoon.tistory.com/221 by ccl(A) rewrite - 2021-09-15 19:27:32