본문으로 건너뛰기
실습하기

head 태그

웹 페이지를 정의하는 HTML 문서는 아래와 같이 2가지 부분으로 나눠져 있습니다.

  1. 검색 엔진과 브라우저에게 웹페이지 정보(메타데이터)를 알려주는 <head>

  2. 웹페이지에 표시할 내용을 정의하는 <body>

<head> 태그로 정의된 내용은 웹브라우저 화면에 보이지 않으며, 웹 페이지의 제목, 설명, 키워드, 스타일과 같은 메타 정보를 포함합니다.


head 태그 내 주요 요소들​

1. title 요소​

웹 페이지의 제목을 정의합니다. 이 제목은 브라우저의 탭에 표시됩니다.

웹페이지 제목 정의
<head>
  <title>나의 첫 웹페이지</title>
</head>

2. meta 요소​

검색 엔진에게 표시할 웹페이지에 대한 정보(메타데이터)를 정의합니다.

예를 들어, meta 태그로 웹 페이지 문자 인코딩 방식(문자를 컴퓨터가 사용할 수 있는 형태로 변환), 뷰포트(화면에 보여지는 영역) 설정, 페이지 설명 등을 설정할 수 있습니다.

메타데이터 정의
<head>
  <!-- 문자 인코딩 방식 -->
  <meta charset="UTF-8" />

  <!-- 페이지 설명 -->
  <meta name="description" content="웹사이트 설명" />

  <!-- 화면 너비 및 줌 초기값 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

웹페이지를 외부 리소스를 연결할 때 사용합니다. 주로 글꼴(폰트)를 불러오거나, 스타일시트(웹페이지의 스타일을 규정한 CSS 파일)를 연결할 때 사용합니다.

외부 리소스 연결
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
  rel="stylesheet"
/>

4. script 태그​

웹사이트의 두뇌 역할을 하는 자바스크립트 파일이나 코드를 불러옵니다.

자바스크립트는 페이지의 동작(예: 버튼 클릭 시 액션)을 제어하기 위해 사용합니다.

자바스크립트 파일 불러오기
<head>
  <script src="script.js"></script>
</head>

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!