[HTML] 7. HTML 문서의 기본 구조

[HTML] 7. HTML 문서의 기본 구조
/category/Programming/HTML

2021. 3. 23. 23:42

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다.

문서의 구조와 슈퍼스타들 - 생활코딩

--- 우리는 HTML의 문법을 마스터했다고 말씀드렸습니다. 말하자면 문장을 만드는 방법을 마스터했다고 할 수 있습니다. 더 복잡한 것은 단언컨대 존재하지 않습니다. 문장이 모이면 무엇이 되나

www.opentutorials.org

<title> 태그

우리의 웹페이지는 파일의 이름으로 저장한 '1.html'이라는 도메인 주소를 가지고 있다.

하지만 다른 웹페이지들은 제목이 내용을 잘 표현하고 있다.

내가 가진 웹페이지의 제목을 지정하기 위해서는 <title>이라는 태그를 사용하면 된다.

<title>이라는 태그를 사용해서 아래와 같이 코드를 작성해보자.

<title>WEB1 - html</title>

코드에서 작성한 것과 같이 웹페이지의 제목이 바뀐 것을 확인해볼 수 있다.

한글이 깨질 때

앞서 다른 게시글에서 간단히 설명한 것과 같이, 한글을 입력할 때 글자 깨짐 현상이 나타나면 아래와 같은 코드를 입력하면 된다.

<meta charset="utf-8">

기본 구조 태그들

HTML에 기본적으로 들어가야하는 태그들이 있는데 그 태그들을 다 써보면 아래와 같다.

<!doctype html>
<html>
	<head>
     	<title>WEB1-html</title>
    </head>
    <body>
    	<h1>HTML</h1>
        <p>Hello web!</p>
    </body>
</html>

- <!doctype html>

이 웹페이지가 HTML로 만들어졌다는 것을 표현하기 위해 관용적으로 쓰는 태그

- <html> </html>

<head> 태그와 <body> 태그를 감싸는 전체의 큰 영역 태그

- <head> </head>

본문을 설명하는 태그

- <body> </body>

전하고자 하는 정보가 들어간 본문