HTML 기본 HTML 태그 - html, head, body 태그 설명과 예제
페이지 정보
조회 1,288회 작성일 22-03-27 01:38
본문
기본 HTML 태그
<html>, <head>, <body> 설명
홈페이지를 만든다면 가장 기본적으로 알아두어야 할 태그에 대한 설명을 하려고 한다. 특히 초보자의 경우 가장 먼저 기억해 둘 배치 순서가 나온다. 이것을 기억해 두면, 남의 코드 소스를 연구할 때도 쉽게 이해할 수 있게 된다.
기본 HTML 태그 - <html>, <head>, <body> 설명
시작과 끝 태그
홈페이지는 웹브라우저로 본다.
그러므로 "여기서부터 여기까지는 홈페이지 코드다"라는 표시가 있어야 웹브라우저가 화면에 잘 표현할 수 있을 것이다.
그런 태그가 바로 html 태그다. 아래처럼 처음과 끝에 적으면 홈페이지 문서가 완성된다.
[code]
<html> <!-- 이렇게 시작함 -->
</html> <!-- 반드시 이렇게 끝남 -->
[/code]
설명과 작동에 해당하는 태그
생각은 사람의 머리 속에 들어 있다. 생각을 알게 되면 그 사람을 알게 되지만 눈으로 보이지는 않는다.
홈페이지 태그에도 그런 것이 필요하다. 그것이 바로 head 태그다. 영어 뜻처럼 머리 속에 들어 있는 지식이나 성품 같은 역할을 한다.
아래처럼 추가하면 된다.
[code]
<html>
<head> <!-- 이렇게 시작함 -->
여기에 설명이나 동작에 해당하는 코드를 넣는다.
</head> <!-- 반드시 이렇게 끝남 -->
</html>
[/code]
실제로 눈에 보이는 태그
모니터를 보면 홈페이지의 글과 그림, 동영상이 보일 것이다. 이렇게 실제로 보이는 것들을 표현하는 것은 body 태그다.
영어 뜻처럼 몸통에 대한 코드들이 여기에 들어간다.
아래처럼 추가하면 된다.
[code]
<html>
<head> <!-- 이렇게 시작함 -->
여기에 설명이나 동작에 해당하는 코드를 넣는다.
</head> <!-- 반드시 이렇게 끝남 -->
<body> <!-- 이렇게 시작함 -->
여기에 글과 그림 등에 해당하는 코드를 넣는다.
</body> <!-- 반드시 이렇게 끝남 -->
</html>
[/code]
위의 순서는 가장 기본적인 머리와 몸통 태그다. 저 사이사이에 다른 태그들을 입력하면 비로소 홈페이지가 완성된다.
확인하기
아래는 위의 내용을 확인할 수 있게 정리한 것이다. Result를 누르면 홈페이지에 어떻게 나타나는 지를 확인할 수 있다.
위에서 보듯이 <meta charset="UTF-8">라는 것은 head라는 머리 속에 들어 있으므로 결과에 나타나지 않는다.
body에 넣은 글자만 나타났다. 그래서 몸통 body 태그 사이에 글자나 그림을 넣어야 한다는 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
지금까지 가장 기본적인 홈페이지 태그인 html 태그, head 태그, body 태그가 무엇인지를 알아 보았다.
만약 초보라면, 위에서 코드가 배치되는 순서를 기억해 놓는 것이 중요할 것이다. 그래야 내용을 끼워 넣더라도 어디에 넣어야 하는지를 알 수 있을 것이니 말이다.