728x90
HTML 문서 정보
HTML문서는 웹 문서 자체의 정보와 브라우저에게 알려주어야 하는 정보 등 여러 가지 정보를 가지고 있어야 한다. 이러한 정보는 head 태그 안에 명시되어 사용자에게는 보여지지 않는다.
Title 태그
타이틀 태그는 웹 페이지의 제목을 명시하여 주는 Tag이다. 타이틀 태그는 다른 태그와는 다르게 사용자가 웹 페이지를 통해 확인 할 수 있는 태그이다.
<!-- 웹페이지의 제목(이름) -->
<title> 제목 태그 </title>타이틀은 아래 그림에서 보이는 것처럼 브라우저의 TAB 부분에서 확인할 수 있다.
Meta 태그 : <meta/>
메타 태그는 Empty Tag 로서, 웹페이지에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공하는 태그이다.
<!--
문자 인코딩, 텍스트 렌더링 과정 중 문자 인코딩 방식에 관한 정보
charset : utf-8, euc-kr, ...
-->
<meta charset="UTF-8">
<!--
검색엔진, 브라우저 등에게 정보를 제공하기 위한 태그
name(검색엔진 등에 제공하기 위한 정보의 종류) : author, description, keyword, viewport ...
content : name or http-equiv 속성의 값을 제공
-->
<!-- 제작에 대한 태그 -->
<meta name="author" content="mms">
<!-- 웹페이지에 대한 설명 태그 -->
<meta name="descripttion" content="html 공부">
Link 태그 : <link/>
외부 문서를 연결할 때 사용하는 태그이다.
<!-- link
외부 문서를 연결하기 위한 태그
rel : 필수로 지정해주어야 하고, 현재 문서와 외부 문서와의 관계를 지정 : stylesheet, icon ...
href(hyper text reference) : 외부 문서의 위치를 지정
-->
<link rel="relation(관계)" href="hiper text reperence(경로)">
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="favicon.ico">
Style 태그
css를 외부문서가 아닌 html문서 내부에 작성할 때 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 제목 태그 </title>
<!-- html 내부에서 스타일 지정 -->
<style>
h1 { color : green; } /* h1 태그의 글자 색을 초록색으로 변경 */
</style>
</head>
<body>
<h1>초록색 글씨</h1>
</body>
</html>아래와 같이 글자색이 초록색으로 바뀐 것을 확인할 수 있다.
Script 태그, NoScript 태그
css는 link or style 태그를 활용해 외, 내부에서 작업을 한다면 JS(JavaScript)는 script 태그로 두가지 방식(외부, 내부)을 모두 사용한다.
<!--
SCRIPT 속성
src : 참조할 외부 script url
type : MIME 타입
async : script의 비동기적 -> boolean, src 속성 필수
crossorigin : 별도의 도메인을 사용하는 사이트의 오류 로깅을 허용하기 위해 사용
defer : 문서 파싱 후 작동 여부, html문서를 읽고 나서 JS 실행 -> boolean, src 속성 필수
-->
/* 간단 사용 예제 */
<!--
JS 파일을 외부에서 가지고 올 때에는,
해당 JS 파일의 경로를 script에 src 속성에 넘겨줌
-->
<script src="test.js"></script>
<!--
JS를 내부에서 선언을 해 줄 때에는,
script 요소의 content 부분에 js 코드를 넣어줌
만약, script 속성 src를 통해 js 코드를 넘겨받을시 해당 content는 무시됨
-->
<script>
function btnOnClickHandler(event) {
console.log("click");
}
</script>
<!--
noscript : 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의
-->
<noscript>
<p>Your browser doos not support JavaScript</p>
</noscript>728x90
'Web > HTML' 카테고리의 다른 글
| [HTML] Style 속성 (0) | 2023.10.20 |
|---|---|
| [HTML] 속성(Attribute) (0) | 2023.10.19 |
| [HTML] TAG - Heading (0) | 2023.10.19 |
| [HTML] TAG - Paragraph(with. Entity) (0) | 2023.10.19 |
| [HTML] 기본 작성 문법 - DTD, Tag (0) | 2023.10.19 |