오늘은 HTML로 웹 사이트에 title(제목)을 넣어보도록 하겠습니다.
여러분들 title이 뭔지 아시나요? title이란 제목, 표지라는 뜻을 가지고 있습니다.
저번 시간에 HTML로 웹 사이트에 제목을 넣어보았는데, 그때에는 우리가 볼 수 있는 HTML 제목이었습니다.
볼 수 있다는 말이 무엇이냐면, 웹 사이트에 사용자가 볼 수 있는 걸 말합니다.
title 태그란?
오늘 배울 title이라는 태그는 어디에 사용된다면, 저번 시간에도 말했듯이 검색엔진이 그 글이 어떠한 내용을 담고 있는지 파악 할 수 있다고 했습니다. 이번 시간에 title 이라는 태그는 우리가 검색엔진에서 웹 페이지를 검색했을 때, 사용자가 보았을 때 그 웹 페이지의 제목을 보여주는게 title 이라는 태그입니다. 한 번 예시를 보여드리자면
저는 'pyupbit tistory'라고 검색했습니다. 검색하니까 제 블로그의 글이 보이네요.
이 글의 title을 보겠습니다.
title 태그 안에 '[2] upbit 비트코인 자동매매(BTC_Pyupbit-Autotrade) - Xsop'라고 적혀있었습니다.
검색엔진(구글)에서 검색 내용과 비슷하죠? 검색엔진에서는
'[2] upbit 비트코인 자동매매(BTC_Pyupbit-Autotrade ... - 티스토리'라고 뜹니다.
앞에 있는 내용을 title의 내용과 같고, 그 뒤에 있는 '-' 이 표시는 어느 웹 사이트에서 있는지.
뭐, 네이버 블로그였으면 네이버 블로그라고 떴을 태고, 티스토리 말고 다양한 글이 있을 수도 있었겠죠?
그리고 title은 이렇게
웹 브라우저 탭에서도 제목에 이렇게 뜨게 됩니다.
탭 제목에 title 태그와 같이 뜨게 됩니다.
title 태그는 굉장히 다양한 곳에 사용됩니다. 그럼 title 태그를 사용하는 법에 대해 알아보도록 하겠습니다.
title 태그 사용 방법 및 head, body 태그 사용 방법
title 태그를 사용하는 방법은 먼저 head 태그에 대해서 알아야 합니다.
head 태그란 무엇일까요? 처음 배운 것처럼 한 번 그 태그의 이름을 통해 그 태그가 하는 일을 한 번 유추해 볼까요?
head 태그는 '머리'라는 뜻을 가지고 있습니다. 사람에 머리에는 중요한 감각 기관들이 많이 모였이고, 인체를 조절하는 뇌가 있습니다. 우리가 컴퓨터에 가장 중요한 CPU도 뇌에 많이 비유를 하지 않나요? 그만큼 머리에는 뇌도 있고 다양한 감각 기관들이 있습니다. 그 만큼 head 태그에는 중요한 역할을 한다고 생각할 수 있습니다.
그럼 head 태그는 무엇인지 알려드리도록 하겠습니다.
head 태그란? 일단 페이지를 열었을 때에 웹 브라우저에 표시되지 않습니다.
우리가 보는 p 태그나 h1 태그 같은 것은 글에 효과를 주는 것이라고, 보인다고 표현할 수 있습니다.
이 head 태그는 보이지 않는다고 합니다. 우리가 말한 title이란 태그도 보이지 않습니다.
어.. 보이지 않는다고 표현해야 되는 것보다, 이렇게 말하는 게 좋을 것 같네요.
웹 페이지에서 보이지 않는다고 해야 할 것 같습니다.
우리가 아까 말한 title 태그는 검색엔진에서 제목을 표시하고, 웹 브라우저에 탭에 제목을 표현하는 것입니다.
웹 페이지 내에서는 보이지 않는 태그이죠. 이렇게 head 태그는 보이지 않습니다.라는 것을 알아낼 수 있습니다.
title 태그는 head 태그 안에 들어갑니다.
<head>
<title>제목</title>
</head>▲ title 태그 위치
이렇게 title 태그는 head 태그 안에 들어갑니다.
근데 head 태그 같은 경우에는 보이지 않기 때문에, p 태그나 h1 태그 같은 경우에는 head 태그가 아닌 다른 태그 안에 들어가 있어야 합니다. head 태그가 아니라 이제는 body 태그 안에 p 태그나 h1과 같은 웹 페이지에서 보이는 태그가 여기 들어가야 합니다.
<body>
<h1>간단한 글입니다</h1>
<p>
글 글 글 글 글 글 글 글 글
</p>
</body>▲ body 태그
그럼 웹 페이지는 대충 이러한 구조로 이루어져 있습니다.
<head>
<title>제목</title>
</head>
<body>
<h1>제목입니다</h1>
<p>
안녕하세요. 오늘은 HTML에 대해 알아보도록 하겠습니다.
</p>
</body>▲ 대충(?) HTML 구조
이렇게 HTML 코드는 이런 구조으로 이루어져 있습니다.
하지만 이러한 코드들이 추가되어야지 HTML 작업을 할 때 더 편해집니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<h1>제목입니다</h1>
<p>
안녕하세요. 오늘은 HTML에 대해 알아보도록 하겠습니다.
</p>
</body>▲ HTML 구조
여기에서 추가된 것은 <!DOCTYPE html>입니다.
이 태그는 이 문서는 HTML로 이루어져 있으니, 웹 브라우저도 이 코드를 HTML로 읽어달라고 하는 표현입니다.
그리고 하나 더 추가되었는데, <meta charset="UTF-8">이라는 태그입니다.
이 태그는 이 코드들은 UTF-8이라는 인코딩 방법으로 인코딩한다는 것입니다.
UTF-8이 한글과 영어가 잘 나오기 때문에, 이 태그를 추가하시는 게 좋습니다.
오늘은 title 태그와, HTML의 간단한 전체 구조을 알아보았습니다.
오늘은 HTML의 head 태그와 body 태그를 짧게 다루어서 아쉽네요.
다음에 head, body 태그를 한 번 같이 다뤄보도록 하겠습니다.
지금까지 읽어주셔서 감사합니다.
지금까지 웹 사이트에 title(제목) 넣기 및 head, body 태그 알아보기였습니다.