-
HTML 기초 - 3 | HTML 의 기본구조와 태그프로그래밍 언어/HTML 2020. 5. 13. 23:30
HTML 태그
HTML 에서 사용하는 태그에 대해서 알아보자.
우선 태그의 생김새부터 알아보자.
태그의 생김새
<tag></tag>위와 같은 형태가 태그의 기본적인 생김새이다.
tag이름을 '<', '>' 와 같은 꺽쇠로 감싸주면 된다.
대부분의 tag는 여는태그와 닫는태그로 이뤄져 있다.
(정확한 표현은 아니다. 또한 여는태그만 있는 태그도 있다.)
<tag>위와 같은 형태가 여는태그 이다.
</tag>위와 같은 형태가 닫는태그 이다.
이렇게 여는태그와 닫는태그 사이에 적고 싶은 내용을 적어주면, 웹페이지는 그 내용을 감싸는 태그를 보고 그 내용의 종류를 이해하고 분류한다.
HTML 의 기본 구조
HTML에는 기본적인 구조가 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>index</title> </head> <body> </body> </html>이렇게가 가장 기본적인 구조라 생각하면 된다.
여러 태그들이 태그와 태그사이에 들어가있는게 보이는가?
이렇게 여는태그와 닫는태그 사이에 다른 태그를 넣을때는 들여쓰기를 해 그 구조를 명확하게 한다.
들여쓰기는 Tab키 를 이용하거나 띄워쓰기 2칸을 사용하면 된다. 우리는 VSCode 를 사용하므로 Tab키 를 사용하면 프로그램이 알아서 띄워쓰기 2칸을 해준다.
자 그러면 이 태그들에 대해서 하나씩 살펴보자.
<!DOCTYPE html>HTML의 버전을 표시해주는 태그이다.
HTML은 여러 가지의 버전이 있는데, 현재 사용하는 버전은 HTML5 이다.
현재 작성된 HTML 문서가 HTML5 로 작성되었다는 것을 알려주는 역할을 한다.
<html> </html>html 태그이다.
모든 HTML 내용은 이 html 태그 사이에 위치해있어야 한다.
<head> <meta charset="UTF-8" /> <title>index</title> </head>head 태그이다.
head 태그에 담긴 내용은 실제 웹 페이지상에 드러나지 않는다.
대신 이 웹페이지의 여러 정보를 담고 있다.
head 태그 안의 meta 태그와 title 태그는 다음 글에서 간단하게 설명하겠다.
<body> </body>body 태그이다.
실제 웹 페이지상에서 드러나는 부분을 작성하는 곳이다.
이제부터 배우는 대부분의 태그들은 모두 이 body 태그 사이에 위치한다고 생각하면 된다.
이렇게 HTML 문서의 기본적인 구조를 살펴보았다.
다음 글에서는 head 태그 사이에 들어갈 태그에 대해 간단하게 알아보자.