본문 바로가기
디지털 노마드를 꿈꾸며/HTML

HTML 헤드: 타이틀, 스타일, 링크, 메타, 스크립트, 베이스

by 오일러33 2020. 3. 19.

1. 헤드 <head> 요소

헤드는 메타 데이터, 즉 데이터에 대한 데이터를 포함한다. <html>과 <body> 사이에 쓰인다. 메타 데이터는 화면에 표시되지 않으며, <title>, <style>, <meta>, <link>, <script>, <base>가 해당한다.

 

- 제목 <title> 요소

HTML 문서의 제목이다. 웹 브라우저 탭의 제목이거나 즐겨찾기에 포함되거나 검색엔진 결과에 나타나는 결과에 사용된다.

<head>

  <title>This is a title</title>

</head>

 

- 스타일 <style> 요소

단일의 HTML 페이지에 사용되는 스타일 정보를 포함한다.

<style>

  body {background-color: indigo;}

  h1 {color: white;}

  p {color: grey;}

</style>

 

- 링크 <link> 요소

외부의 다른 스타일 시트에 연결한다.

<link rel="stylesheet" href="mystyle.css">

 

- 메타 <meta> 요소

문자열, 페이지 요약, 키워드, 저자, 다른 메타 데이터 등을 포함한다. 

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

 

<meta>태그에서 viewpoint 요소를 지정하면 여러 크기의 장치 및 웹 페이지에서 화면을 볼 수 있다. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • - viewpoint: 페이지 조절
  • - width=device-width: 기기의 스크린 크기에 따라서 웹 페이지의 크기를 조정
  • - initial-scale=1.0: 처음 웹 페이지에 화면이 뜰 때 초기 확대 정도를 설정

- 스크립트 <script> 요소

사용자 측면의 스크립트를 나타낸다. 더 자세한 정보는 다음의 링크를 더 확인해보자. 

 

https://dowhateveryouwant1661.tistory.com/15

 

HTML 식별속성, 아이프레임, 자바스크립트, 파일경로

1. HTML 식별(id) 속성 id 속성은 링크나 스타일을 지정해 놓고 에서 다시 불러들이는 경우에 사용했던 기억이 있다. 특히 북마크 설정과 링크설정에 사용했었다. id의 구체적인 사용과정을 알고싶다면 아래..

dowhateveryouwant1661.tistory.com

- 베이스 <base> 요소

링크가 되는 URL과 화면전환에 대한 정보를 포함한다.

<base href="https://www.w3schools.com/images/" target="_blank">

 

 

 

<html>, <head>, <body>를 생략해도 좋을까? 예/아니오로 선택하라면, 아니오. 써야하는 건 꼭 쓰면서 배우자. 

 

src: w3school.com

 

댓글