head 태그
웹 페이지를 정의하는 HTML 문서는 아래와 같이 2가지 요소로 나누어집니다.
-
<head>: 검색 엔진과 브라우저에게 웹페이지 정보(메타데이터)를 알림 -
<body>: 웹페이지에 표시할 내용을 정의
HTML 문서 내 <head> 요소로 정의된 내용은 웹페이지의 제목, 설명, 키워드, 스타일과 같은 메타 정보를 포함합니다.
head 태그 내 주요 요소들
head 태그 내에는 다양한 웹페이지 정보를 담을 수 있으나, 주로 사용되는 요소들은 아래와 같습니다.
title 요소
웹페이지의 제목을 정의합니다. 이 제목은 브라우저의 탭에 표시됩니다.
웹페이지 제목 정의
<head>
<title>나의 첫 웹페이지</title>
</head>
meta 요소
검색 엔진에게 표시할 메타데이터(웹페이지에 대한 정보)를 정의합니다.
예를 들어 <meta> 태그로 웹 페이지 문자 인코딩 방식(문자를 컴퓨터가 사용할 수 있는 형태로 변환), 뷰포트(화면에 보여지는 영역) 설정, 페이지 설명 등을 설정할 수 있습니다.
메타데이터 정의
<head>
<!-- 문자 인코딩 방식 -->
<meta charset="UTF-8" />
<!-- 페이지 설명 -->
<meta name="description" content="웹사이트 설명" />
<!-- 화면 너비 및 줌 초기값 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
link 태그
웹페이지를 외부 리소스를 연결할 때 사용합니다.
주로 글꼴(폰트)를 불러오거나, 스타일시트(웹페이지의 스타일을 규정한 CSS 파일)를 연결할 때 사용합니다.
외부 리소스 연결
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
rel="stylesheet"
/>
script 태그
웹사이트의 두뇌 역할을 하는 자바스크립트 파일이나 코드를 불러옵니다.
자바스크립트는 페이지의 동작(예: 버튼 클릭 시 액션)을 제어합니다.
자바스크립트 파일 불러오기
<head>
<script src="script.js"></script>
</head>
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!