본문 바로가기
HTML

Head 태그 안에 배치할 수 있는 요소

by 감성사진 2024. 1. 22.

head 안에 배치할 수 있는 요소

 

<title>

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 포함될 수 있으며 태그를 포함하더라도 무시한다.

<title>Naver</title>

 

<base>

문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다. 문서에는 하나의 <base> 요소만 존재할 수 있다.

상대경로의 기준을 변경한다.

<base href="/assets/images/" />

 

<link>

현재 문서와 외부 리소스의 관계를 명시한다. <link>는 스타일 시트를 연결할 때 제일 많이 사용한다. 사이트 아이콘 (파비콘 및 홈화면 아이콘) 연결 등으로 쓰인다.

<!-- 파비콘 설정 -->
<link rel="shortcut icon" href="./favicon.ico" />


<!-- Style 시트 연결 -->
<link href="/style.css" rel="stylesheet">

 

<style>

스타일 규칙을 담고 있다.

<style>
.title {
	color: blue;
    }
</style>

 

<meta>

  • <base> <link> <script> <style> <title> 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
  • 카카오톡 링크 보낼 때 나타나는 여러 요소들의 정보를 <meta> 태그에서 표시한다.
<meta property="og:image" content="http://example.com/image.jpg">

 

<script>

데이터나 자바스크립트 코드를 웹문서에 포함할 때 사용한다.

<script src="javascript.js"></script>

 

 


기타 참고 짐코딩

댓글