HTML
HTML
Hypertext Markup Language
HTML은 프로그래밍 언어가 아닙니다!
우리가 노션에 글을 마크다운으로 구조화하며 적는 것처럼,
웹사이트의 뼈대를 구축하기 위한 언어입니다.
기본 템플릿
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
</html>
HTML 문서는 위와 같은 구조를 가지고 있습니다.
첫줄의 <!DOCTYPE html> 으로 이 문서가 HTML 문서라는 것을 브라우저에게 알려줍니다.
2번째 줄부터 시작하는 <html> 과 맨 밑 줄의 </html> 사이에 코드를 작성하면 됩니다.
<head> 태그
<head> 태그에는 화면에는 직접 나타나지 않는, 우리가 만들 웹사이트에 대한 정보를 입력하는 곳입니다.
이 경우에는 웹사이트에 대한 정보, 즉, 데이터에 대한 정보 : 메타데이터를 적는 곳입니다.
대표적으로 <meta> 태그와 <title>태그가 있습니다.
<meta>- 현재 웹사이트가 어떤 문자셋(charset)을 사용할지 정의하고, 화면 크기에 대한 정보를 정의합니다.
<title>- 현재 웹사이트의 제목이자, 브라우저의 탭에 표시될 제목을 적어주면 됩니다.
<link>- 현재 웹사이트에서 사용할 리소스들을 불러오고, 연결해주는 태그입니다. 주로 CSS, Javascript 파일을 별개로 만들고,
<link>태그로 HTML 안에 불러와서 사용합니다.
<style>- 현재 웹사이트의 디자인을 담당하는 CSS를 적는 곳입니다.
<script>- 현재 웹사이트에 로직을 담당하는 javascript를 적는 곳입니다.
<body> 태그
실제로 웹페이지에 표시될 내용들을 적는 곳입니다.
이 글은 저작권자의 CC BY 4.0 라이센스를 따릅니다.