html 기본 문서 만들기 1 - title 태그로 페이지 타이틀 만들기
네 안녕하세요, 이번 포스팅에서는 html 기본 문서 만들기 첫 번째,
바로 페이지의 제목을 짓는 방법에 대하여 알아보도록 하겠습니다.
페이지의 제목은 우리가 어떤 페이지를 들어갔는지 알아보도록 해주는 기능을 하기 때문에 꼭 있어야 합니다.
그럼 바로 시작해보도록 하겠습니다.
1. html 타이틀 달기 : title 태그 이용
html에 보면 제목이 있죠?
이 제목도 그냥 써서 붙이는 것이 아닙니다.
바로 title 이라는 태그를 이용을 해서 붙입니다.
이걸 이용을 하면 브라우저를 띄웠을 때 보이는 탭에 제목이 적혀 있는 것을 볼 수 있습니다.
그래서 우리가 어떤 페이지를 들어갔는지 한 번에 알 수가 있습니다.
그럼 그와 관련된 간단한 코드를 힌 번 작성해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫 타이틀</title>
</head>
<body>
페이지에 타이틀을 다는 예제 입니다.
타이틀은 브라우저의 타이틀바에 보여집니다.
</body>
</html>이제 이 코드에 대한 설명을 하겠습니다..
일단 여기 보시면 <meta> 태그가 보이실 텐데, 여기에 보통 제작자명이나 기본 세팅이 무엇으로 되어있는지 적습니다.
그래서 여기에 utf-8이라고 적혀있을 텐데, 이는 유니코드를 기반으로 사용을 한다는 의미입니다.
유니코드는 전 세계에서 사용하고 있는 모든 문자를 컴퓨터에서 다룰 수 있도록 만들어낸 국제적인 표준이고,
유니코드가 만들어져 있기 때문에 지금의 우리는 한글이며, 영어, 한자 등 여러 가지 언어를 타이핑을 할 수 있는겁니다..
현재는 유니코드를 8비트 체계로 쓰기 때문에 utf-8이라고 씁니다.
그리고 'viewport'라고 적힌 것을 보실 수가 있을건데,
이는 페이지를 반응형으로 만들겠다는 뜻입니다.
그래서 화면 크기가 변화함에 따라 알아서 비율이 맞춰집니다.
그리고 보실 수 있듯이 <title> 태그에 '첫 타이틀'이라고 제목을 붙였습니다..
그러면 브라우저 창 최상단에 첫 타이틀이라고 쓰여 있는 탭을 보실 수 있습니다.
그리고 바디 부분에는 글을 적었는데요, 이 글은 이제 우리가 보고 있는 창에 저렇게 뜰 겁니다.
그럼 결과 화면이 어떻게 나오는지 보도록 하겠습니다.
이런 식으로 브라우저 창 최상단에 첫 타이틀이라고 적힌 것이 보이죠?
이렇게 창의 제목을 달아서 우리가 어떤 사이트에 접속을 하고 있는지에 대하여 볼 수 있습니다.
여기까지 html 페이지 제목을 다는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 문단 제목 설정하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 (0) | 2023.03.01 |
|---|---|
| html 기본 문서 만들기 4 - p 태그로 문단 나누기 (0) | 2023.02.28 |
| html 기본 문서 만들기 3 - title 속성으로 툴팁 달기 (0) | 2023.02.28 |
| html 기본 문서 만들기 2 - h 태그로 문단의 제목(장, 절, 소제목, etc...) 달기 (0) | 2023.02.28 |
| html의 기본 개념 알아보기 (0) | 2023.02.28 |
댓글