<head> 태그는 다음 태그들을 감싸는 container이다. <title>,<style>,<meta>,<link>,<script>, <base>
<head> 태그는 메타데이터를 위한 태그이다. (메타 데이터는 문서에 표시되지 않습니다.)
메타 데이터는 일반적으로 문서 제목, 문자 세트, 스타일, 스크립트 및 기타 메타 정보를 정의합니다.
title 태그
- <title> 요소는 문서의 제목을 정의하며 모든 HTML 문서에 필요합니다.
- 브라우저 탭에서 제목을 정의합니다.
- 즐겨 찾기에 추가 될 때 페이지 제목을 제공합니다.
- 검색 엔진 결과에 페이지 제목을 표시합니다.
link 태그
<link> 요소는 external 스타일 시트에 연결하는 데 사용됩니다.
meta 태그
<meta> 요소는 사용되는 문자설정, 페이지 설명, 키워드, 작성자, 기타 메타 데이터를 지정하는 데 사용됩니다.
메타 데이터는 브라우저 (컨텐츠 표시 방법), 검색 엔진 (키워드) 및 기타 웹 서비스에서 사용됩니다.
<meta charset="UTF-8"> //인코딩 정의
<meta name="description" content="설명 적으면 됨"> //웹 페이지에 대한 설명을 정의
<meta name="keywords" content="HTML, CSS, XML, JavaScript"> //검색 엔진에 대한 키워드를 정의
<meta name="author" content="John Doe"> //페이지 작성자를 정의
<meta http-equiv="refresh" content="30"> //30 초마다 문서를 새로고침
뷰포트 설정(viewport)
뷰포트의 정의 : 화면 Display상의 표시 영역을 뜻합니다. 뷰포트는 웹 페이지에서 사용자가 볼 수있는 영역입니다
뷰포트가 필요한 이유
현재 스마트폰 브라우저는 모바일 환경에서도 데스크탑 환경처럼 웹 페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀 브라우징을 지원합니다.
이 때문에 데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 viewport가 980px이고 이로 인해 내용이 작게 보입니다.
결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율 축소가 발생해 가독성이 떨어지게 됩니다.
바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.
HTML에는 웹 디자이너가 <meta> 태그를 통해 뷰포트를 제어 할 수있는 방법이 있습니다.
뷰포트는 웹 페이지에서 사용자가 볼 수있는 영역입니다. 장치에 따라 다르며 컴퓨터 화면보다 휴대 전화에서 더 작습니다.
모든 웹 페이지에 다음 <meta> 뷰포트 요소를 포함해야합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta> 뷰포트 요소는 페이지의 크기와 크기를 제어하는 방법에 대한 브라우저 지침을 제공합니다.
width = device-width 부분은 장치의 화면 너비에 따라 페이지 너비를 설정합니다.
initial-scale = 1.0 부분은 페이지가 브라우저에 의해 처음로드 될 때 초기 줌 레벨을 설정합니다.
값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.
base 태그
base요소는 HTML문서의 기준 URL을 명시합니다.
<base> 요소는 페이지의 모든 상대 URL에 대한 기본 URL 및 기본 대상을 지정합니다.
- href : 문서의 기준이 되는 URL을 지정합니다.
- target : 링크를 어떤 프레임에 열것인지를 결정합니다.
- _blank : 새창에 엽니다.
- _parent : 부모창에 엽니다.
- _self : 자신의 창에 엽니다.
- _top : 화면이 여러 프레임으로 이루어져있는 경우 모든 프레임을 지우고 전체 화면에 엽니다.
- [name] : 지정된 이름에 링크를 엽니다.
href 속성이나 target 속성중 반드시 하나 이상을 써야하며 둘 다 사용할 수도 있습니다.
'HTML5' 카테고리의 다른 글
| w3스쿨즈 HTML(11) - 반응형 웹디자인 (0) | 2022.04.04 |
|---|---|
| w3스쿨즈 HTML(10) - 의미론적인 태그 (0) | 2022.04.04 |
| w3스쿨즈 HTML(8) - iframe, File Path (0) | 2022.03.31 |
| w3스쿨즈 HTML(7) - class, id (0) | 2022.03.29 |
| w3스쿨즈 HTML(7) - block, inline (0) | 2022.03.29 |
댓글