웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
#1.4 HTML5 Tag - Basic
웹페이지를 구성하는 기본 태그
필사 :
1. 문서 형식 정의 tag
문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다.
문서의 최상위에 위치해야 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같다.
문서의 최상위에 위치해야 대소문자를 구별하지 않는다는 것이 뭘까?
html 이 부분을 소문자로 써도 된다는건가?
<HTML5>
<!DOCTYPE html>
<HTML 4.01>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/org/TR/html4/loose.dtd">
<XHTML 1.0>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. html tag
html 태그는 모든 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
head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다.
메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.
head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.
3.1 title tag
title 요소는 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et delore magna aliqua
</body>
</html>
3.2 style tag
style 요소에는 HTML 문서를 위한 style 정보를 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et delore magna aliqua
</body>
</html>
3.3 link tag
link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et delore magna aliqua
</body>
</html>
rel, href가 뭘까?
3.4 script tag
script 요소에는 client-side JavaScript를 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
document.addEventListerner('click', function () {
alert('Clicked!');
});
</script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et delore magna aliqua
</body>
</html>
client-side JavaScript 부분이 이해가 안간다. 어떤 기능을 할까?
src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et delore magna aliqua
</body>
</html>
3.5 meta tag
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다.
메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.
SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keyword를 정의한다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">작성자가 태그하는 내용이 여기에 추가되나보다.
웹페이지의 설명을 정의한다.
<meta name="description" content="Web tutorials on HTML and CSS">
웹페이지의 저자를 명기한다.
<meta name="author" content="John Doe">
웹페이지를 30초마다 Refresh한다.
<meta http-equiv'="refresh" content="30">
4. body tag
body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다.
메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et delore magna aliqua
</body>
</html>
느낀점 :
HTML의 태그에 대해 알게 되었다.
크게 DTD tag, html tag, head tag, body tag로 구성된다.
세부 기능을 익히기 위해선 직접 만들어봐야 기억에 더 남을 것 같다.
모르는 기능들은 웹에서 어떻게 작동하는지 궁금하다.
다음 자료에 나올 수도 있으니 일단은 직접 해보기 스킵.
'국비학원 전 강의 필사 > 자바스크립트 공부' 카테고리의 다른 글
| #5 텍스트 관련 태그 - <자바스크립트-HTML5> (0) | 2022.08.13 |
|---|---|
| #3 시맨틱 요소와 검색엔진 - <자바스크립트-HTML5> (0) | 2022.08.10 |
| #2 HTML5 기본 문법 - <자바스크립트-HTML5> (0) | 2022.08.09 |
| #1 프런트엔드 개발자 학습 방향 - <자바스크립트-HTML5> (0) | 2022.08.09 |
댓글