Web page 구성 기본tag
1. 문서 형식 정의 tag (해당 버전: HTML 5)
출력할 웹 페이지의 형식을 브라우저에게 전달.
<!DOCTYPE html>
2. html tag
html 태그는 모든 HTML 요소의 부모 요소. 웹페이지에 단 하나만 존재.
모든 요소는 html 요소 내부에 기술해야 함 , <!DOCTYPE>는 예외.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>
■html은 글로벌 어트리뷰트를 지원 (lang 어트리뷰트 사용)
예) 한국어
<html lang="ko">
3. head tag
메타데이터를 포함하기 위한 요소. 웹페이지에 단 하나만 존재.
※메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음.
head요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함 불가.
3.1 title tag
문서의 제목을 정의. 브라우저의 탭에 표시됨.
3.2 style tag
style 정보를 정의.
<style>
body {
background-color: yellow;
color: blue;
}
</style>
3.3 link tag
외부 리소스와의 연계 정보를 정의. html과 외부css파일 연계에 주로 사용.
<link rel="stylesheet" href="style.css">
3.4 script tag
client-side JavaScript를 정의함.
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>
※ 결과물에서 클릭하면 PPU 뜸. coment : Clicked.
※ src 어트리뷰트를 사용시 외부 JavaScript 파일 로드 가능.
<script src="main.js"></script>
3.5 meta tag
description, keywords, author, 기타 메타데이터 정의에 사용.
브라저, 검색엔진등에 의해 사용됨.
3.5.1 브라우저가 사용할 문자셋을 정의 : charset
<meta charset="utf-8">
3.5.2 SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords 정의
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3.5.3 웹페이지의 설명을 정의 : description
<meta name="description" content="Web tutorials on HTML and CSS">
3.5.4 웹페이지의 저자를 명기 : author
<meta name="author" content="hannah">
3.5.5 웹페이지를 30초마다 갱신 : refresh
<meta http-equiv="refresh" content="30">
4. body tag
HTML 문서의 내용을 나타냄. 메타데이터를 제외한 웹페이지 구성하는 대부분 요소가 body 내에 기술.