티스토리 뷰

프로그래밍/HTML

HTML 배우기 (3)-웹 페이지의 제목 <title>태그

polaris 2020. 7. 10. 16:43
728x90

오늘 알아볼 건 HTML에 <title> 태그입니다.

title 하면 뭐가 떠오르시나요?

바로 제목 입니다.

title 태그는 문서의 제목을 나타내는 태그입니다.

 

 

 

이처럼 페이지 상단에 이름을 나타내 줍니다.

한번 웹 사이트의 코드를 살펴볼까요? F12를 누르시면 그 페이지의 소스 코드를 볼 수 있습니다.

이런 창이 뜨시는 걸 보실 수 있으실 겁니다.

이 코드들 중 우리는 title은 head태그 안이 있음으로 화살표를 클릭하여 열어 줍시다.

뭔가 비슷한 영어들이 좌르륵 있지만 전혀 겁먹으실 필요 없습니다.

title 태그는 바로 head 아래 위치해 있거든요.

저번 시간에 배운 meta charset 태그가 보이네요.

그 아래 바로 title태그로 감싸져 있는 NAVER이 보입니다.

우리도 한번 실습해 볼까요?

perl.it 에 들어가 HTML 문서를 만들어주시면

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

이런 코드가 보이실 겁니다.

하지만 저기엔 현재 우리가 필요 없는 코드들이 다수 존재합니다.

전부 날려주시고 우리가 아는 기본 구조로 만들어 줍시다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    
    
  </head>
  <body>
   
  </body>
</html>

title태그는 시작 태그 <title>와 종료 태그 </title>로 이루어져 있으며 그 사이에 들어갈 문자를 작성해 주시면 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>도토리공방</title>
    
  </head>
  <body>
   
  </body>
</html>

그리고 RUN 버튼을 눌러봅시다.

하지만 달라진 게 없어 보이네요...

주소창 옆에 있는 버튼을 눌러주시면 내가 코딩한 창이 새로운 창으로 뜨게 됩니다.

사이트에 제목이 잘 나온 걸 확인할 수 있습니다.

 

다음엔 출력 테그인 <p>테그를 알아보겠습니다.

저작자표시 (새창열림)

'프로그래밍 > HTML' 카테고리의 다른 글

HTML 배우기 (5)-<pre> 태그  (0) 2020.12.22
HTML 배우기 (4)-줄바꿈 <br> 태그  (0) 2020.07.11
HTML 배우기 (2)-HTML의 기본 구조  (0) 2020.07.10
HTML 배우기 (1)-HTML이란?  (0) 2020.07.08
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함
250x250