HTML 구조
2019. 11. 24. 10:45ㆍ웹/HTML
기본 구조
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html>
HTML(전체 범위)
<html>은 HTML 문서의 전체 범위를 지정
DOCTYPE(DTD, 버전 지정)
DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 의미
웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줌.
(HTML은 크게 1, 2, 3, 4, X-, 5 버전이 존재)
사용 예)
<!-- HTML 5 —>
<!DOCTYPE html>
<!-- XHTML 1.0 Transitional —>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HEAD(정보 범위)
웹 브라우저가 해석해야 할 HTML 문서의 정보를 지정
정보란 웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 웹 페이지를 구조화 하기 위한 기본 세팅 값 같은 것을 의미, 화면을 구성하기 위한 기본 설정
- TITLE
웹페이지 제목 - META
웹 페이지 정보, HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공
|
속성 |
의미 |
값 |
|
charset |
문자인코딩 방식 |
UTF-8, EUC-KR 등 |
|
name |
검색엔진 등 제공하기 위한 정보의 종류(메타 데이터) |
Author, description, keywords, viewport 등 |
|
content |
name 이나 http-equip 속성의 값을 제공 |
|
사용 예)
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
</head>
<문서의정보범위>
<정보 문자인코딩방식="UTF-8">
<정보 정보종류="사이트제작자" 정보값="홍길동">
<정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">
</문서의정보범위>
- LINK(CSS 불러오기)
외부 문서를 연결할 때 사용
|
속성 |
의미 |
값 |
|
rel |
(필수)현재 문서와 외부 문서와의 관계를 지정 |
Stylesheet, icon 등 |
|
href |
외부 문서의 위치를 지정 |
경로 |
- STYLE(CSS 작성)
CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용 - SCRIPT(JS 불러오거나 작성)
HTML 문서에서 CSS는, 작성된 CSS를 <link>로 불러오거나 <style></style> 안에 작성
JS는 <script></script> 로 2가지 방식을 모두 사용
BODY(구조 범위)
웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정
구조는 사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미
출처 : heropy.org
'웹 > HTML' 카테고리의 다른 글
| HTML - 컨텐츠 부문 HEADER / FOOTER / H1~H6 / MAIN (0) | 2019.12.11 |
|---|---|
| HTML - 요소 전역 속성 (0) | 2019.11.24 |
| 메타데이터 - LINK / STYLE / MIME Type / BASE (0) | 2019.11.24 |
| 메타데이터 - META 태그 (0) | 2019.11.24 |