본문 바로가기
Frontend Developer/HTML

[HTML] <head> 태그와 <body> 태그 채우기 ( <title>, <link>, <style>, <meta>, <script> )

by 똑쥐 2021. 2. 4.

 

 

지난 포스팅에서 <html> 요소는 자식 요소로 <head>와 <body>만 가질 수 있다고 했다. 그럼 <head>와 <body> 각각의 요소에 대해 알아보자!

 

<head> 요소

<head> 요소는 보통 문서의 메타데이터(metadata)를 나타낸다. 메타데이터란 흔히 '데이터를 설명하는 데이터'로 정의된다. 예를 들어, HTML이라는 문서 데이터가 있고 HTML의 <head> 태그 안에는 문서의 작성자가 누구인지 또는 문서의 제목, 문서 요약 등과 같이 그 문서를 설명하는 데이터(=메타데이터)를 넣을 수 있다. 즉, 메타데이터는 스타일, 스크립트, 브라우저의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가진다. 우리가 브라우저에서 어떤 페이지에 들어갈 경우 시각적으로 보여지는 정보는 모두 <body> 요소 안에 작성된 것들이고, 페이지에 직접적으로 나타나지는 않지만 그 페이지의 정보에 관한 것들은 <head> 요소 안에 포함되어 있다고 생각하면 되겠다.

 

그럼 이러한 메타데이터 즉, <head> 요소가 가질 수 있는 자식 요소들이 무엇인지 알아보자.

 

<title> 태그

<title> 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 아래 이미지처럼 구글 홈에 들어가면 페이지 탭에 'Google'로 표시되고, 만약 로그인 버튼을 누른다면 로그인 페이지가 새로운 탭으로 열리고 페이지 탭의 이름 또한 '로그인 - Google 계정'으로 바뀔 것이다.

이처럼 문서의 title은 이 문서가 무엇에 관한 내용인지 센스있게 작성하는 것이 중요하다. title을 잘 쓰기 위한 팁으로는, 키워드의 단순한 나열은 피하고, 페이지마다 각 페이지를 잘 설명할 수 있는 title로 변경하는 것이 좋다. <title> 태그 작성은 검색 최적화(Search Engine Optimization)에도 매우 중요한 요소가 되니 대충 지으면 안된다. 중복 혹은 유사한 제목은 검색 결과의 정확도를 떨어뜨리는 요인이다.

<head>
  <title>문서의 대제목</title>
</head>

 <title> 요소는 텍스트만 포함할 수 있으며, 닫는 태그 </title> 작성은 필수이다. 닫는 태그가 없으면 브라우저가 페이지의 나머지 내용을 무시한다. 

 

<link> 태그

HTML <link> 요소는 현재 문서와 외부 리소스(resource)와의 관계를 명시하고 연결한다. 보통 CSS style sheets를 첨부하는 데 사용하지만, 웹 폰트를 임베드하거나 사이트 아이콘 연결 등 여러가지로 쓰일 수 있다. 

<head>
  <link rel="stylesheet" href="style.css">
</head>

<link> 요소는 대표적인 빈 요소로 닫는 태그를 작성하지 않는다. <link> 태그를 사용하기 위해 꼭 알아야 하는 attribute(속성)은 위 코드에서 처럼, 'rel' 과 'href'이다.

  • rel : 연결된 문서와의 관계(relationship)를 나타낸다.

  • href : 연결하려는 리소스의 URL을 지정한다. URL은 절대 경로와 상대 경로 모두 가능하다.

<head>
  <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
</head>

위 코드는 스포카 한 산스 네오를 웹폰트로 사용하기 위한 연결 태그로, 후에 <style> 태그 안에서 해당 폰트를 사용하겠다는 선언을 하면 폰트가 적용이 된다. 구글 폰트도 마찬가지고 이렇게 무료로 제공되는 웹폰트의 경우 사용 방법과 임베드하기 위한 코드를 함께 제공하기 때문에 어렵지 않게 사용할 수 있다. 

스포카 한 산스 네오 (Spoqa Han Sans Neo) 폰트 제공 사이트 ‣ https://spoqa.github.io/spoqa-han-sans/ko-KR/

 

Spoqa Han Sans Neo

Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ

spoqa.github.io

 

<style> 태그

<style> 태그는 HTML 문서 내에 CSS 스타일링 코드를 작성할 때 사용한다. 

<html>
  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

위 코드 처럼 <head> 안에 <style> 태그로 <h1>의 글자 색상을 지정하는 스타일링 코드를 작성한 경우, Hello! 로 나올 것이다. 하지만! 일반적으로 스타일 코드는 외부 스타일 시트(style.css)에 작성하고, <link> 요소로 연결하는 것이 좋다. 

<html>
  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
    <style>
      h1 {
        color: white;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

만약 이렇게 두 개 이상의 <style> 요소를 사용하게 되면, 뒤에 오는 <style>이 앞 <style>을 덮어쓰게 돼서 Hello! 로 나올 것이다.

 

<meta> 태그

<meta> 요소는 <title>, <link>, <style> 그리고 밑에서 다룰 <script>과 같은 HTML 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타낸다. 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="똑쥐">
  <meta name="description" content="html 배우는 중">
  <meta name="keywords" content="똑쥐, 프론트엔드, 등등">
</head>

<meta> 요소 또한 빈 요소이므로 닫는 태그는 작성하지 않는다. 기본적인 attribute(속성)을 살펴보자면,

  • charset : html 문서에 대한 문자 인코딩을 선언한다

  • name : metadata의 이름을 지정한다

  • content : name과 관련된 값을 지정한다

name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있다.

 

HTML의 표준 메타데이터 이름은 다음과 같이 정의하고 있다. 

  • viewport : 웹 사이트를 모든 device에서 보기 좋게 만들기 위한 view(화면 영역) 설정

  • author : 페이지 작성자 정의

  • description : 웹 페이지에 관한 설명

  • keywords : 검색엔진을 위한 keywords 정의

 

 

<body> 요소

<body> 요소는 HTML 문서의 내용을 나타낸다. 브라우저에 나타나는 모든 정보 콘텐츠 요소를 포함한다. 다음 포스팅에서 부터  다루게 될 모든 태그는 <body> 태그 안에 작성하면 된다. 예외로, <script> 태그는 메타데이터 콘텐츠임에도 <body> 안에 작성하는 경우가 많은데 그 이유를 다뤄보자.

 

<script> 태그

HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어 특히, JavaScript를 지원한다. 즉, <script> 태그는 HTML 문서 내에 JavaScript 파일을 첨부, 작성할 때 사용한다. 사실 <script> 태그는 <head> 안에 작성해도 된다. 하지만 <body> 안에 작성하는 것이 더 좋다고 하는 이유가 뭘까?! 브라우저는 HTML 문서의 위에서 부터 아래로 한 줄씩 읽어 내려가며 작동한다. <head> 안에 <script> 태그를 작성할 경우, 브라우저는 <script> 태그가 나오는 순간 HTML 문서 읽기를 멈추고 JavaScript 파일의 코드를 읽기 시작한다. JavaScript 코드를 모두 로딩한 후에 다시 HTML 문서를 읽고 작동한다. 따라서 <head> 태그에서 <script> 코드를 로딩이 완료될 때까지 잡고 있으면 그만큼 사용자의 렌더링이 길어진다. 어떤 페이지를 열었는데 아무것도 뜨지 않고 로딩만 되고 있는 상황! 이를 방지하기 위해 <script>태는 <body> 내에서도 가장 마지막에 작성하는 것이 좋다. 사용자에게 먼저 정보 콘텐츠를 제공해 정보를 읽는 사이 동적 콘텐츠를 불러오는 것이다.

<body>
  <script>
    <!-- javascript code -->
  </script>
</body>

이렇게 <script> 태그 안에 직접 JavaScript 코드를 삽입할 수도 있지만, 

<body>
  <script src="./app.js"></script>
</body>

보통은 스타일시트와 마찬가지로 외부 js 파일을 첨부하는 것이 더 좋은 사용법이라 할 수 있다. <link> 태그에서는 외부 리소스 연결을 위해 href 속성을 사용하지만, <script> 태그는 src 속성을 사용한다. 

  • src : 외부 script 파일의 URL을 지정한다.

 

 

이 포스팅에서 다룬 태그들 뿐만 아니라 모든 태그들은 각각 사용할 수 있는 속성 attribute을 가진다. 어떤 속성은 문법(Syntax)적으로 반드시 함께 사용해야 하기도 하고, 상황에 따라 사용해야 하는 속성이 달라지기도 한다. 이 모든 attribute을 외울 필요는 없고 (외울 수도 없다ㅎ) 그때그때 MDN 사이트를 참조해가며 사용하면 된다! 다음 포스팅 부터는 본격적으로 정보 콘텐츠를 마크업하는 태그들에 대해 다뤄보자.

'Frontend Developer > HTML' 카테고리의 다른 글

[HTML] 앵커 태그로 하이퍼링크 만들기 ( <a> )  (0) 2021.02.06
[HTML] 강조, 인용, 출처 태그 ( <em>, <strong>, <blockquote>, <q>, <cite> )  (0) 2021.02.06
[HTML] 제목, 문단, 컨테이너 태그 ( <h1>, <p>, <div>, <span> )  (0) 2021.02.05
[HTML] <!DOCTYPE html> 선언과 문서 구조, 부모・자식・형제 요소  (0) 2021.02.03
HTML이란? HTML의 기본, 태그!  (0) 2021.02.02

관련글

댓글

티스토리툴바