일단 적는
html 기본 양식 본문
텍스트 에디터: Visual Studio Code
먼저 에디터에 .html 확장자 파일을 생성한다.
! + tab 또는 html5 + tab 을 치면 기본 양식이 자동완성된다.
안될 경우 파일 확장자가 .html 인지 인터프리터가 html인지 확인하면 해결될 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<HTML tag의 구조>
<a href="http://tistory.com"> content </a>
태그에 들어가는 내용들을 하나씩 살펴보자
<!DOCTYPE html>DTD(Doctype Declaration)는 브라우저에게 우리가 작성한 문서의 타입을 전달해준다.
html만 입력하면 html5의 태그를 사용하겠다고 알려준다.
<html lang="en">
lang는 본문 중간에도 삽입 가능하다.
헤드의 내용을 보면 <meta> 태그로 시작하는 문장들이 있다.
해당 문서에 대한 정보인 메타데이터를 정의할 때 사용한다.
우리가 링크를 보냈을 때 url 사이트의 정보를 나타내주는 og(오픈그래프)도 있다. 다음에 살펴보기(link) 연결
<meta charset="UTF-8">charset = 글자집합 = 글자가 만들어지는 시스템
utf-8(unicode transformation formular)
유니코드 변환 8번째 공식이라는 뜻이다.
내가 사용하는 에디터인 vsc의 우측 하단을 보면 인코딩 방식이 utf-8로 나타나있다.
따라서 헤드의 chareset에서도 utf-8로 인식하도록 작성해주어야 인코딩 오류가 나타나지 않는다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><title> 웹 페이지를 열었을 때 상단 탭에 나타나는 제목이다.
탭 사이즈가 줄어도 정보를 알아보기 쉽게 핵심내용이 앞에 나타나도록 작성하기를 권장한다.
❌ <title>티스토리블로그 | html 기본양식</title>
⭕ <title>html 기본양식 | 티스토리 블로그</title>
추가로 들어갈 수 있는 태그들
<link rel="연결될 파일의 관계" href="연결파일 경로">
<script src="연결파일경로" ></script>
'html css' 카테고리의 다른 글
| [HTML] 특수문자 코드표 (0) | 2023.01.19 |
|---|---|
| [HTML] self closing tag 목록 (0) | 2023.01.18 |
