댓글 목록

HTML head요소

페이지 정보

작성자 운영자 작성일 17-10-29 16:10 조회 1,465 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

동영상 강좌보기

 


HTML <head>요소

<head>요소는 메타데이타에 대한 컨테이너이고 <html>태그와 <body>태그 사이에 위치합니다.

html 메타데이타는 HTML문서에 대한 데이터입니다. 메타데이타는 브라우저에 의해 화면에 표시되지 않습니다.

메타 데이터는 일반적으로 문서 제목, 문자 세트, 스타일, 링크, 스크립트 및 기타 메타 정보를 정의합니다.

다음 태그 <title>, <style>, <meta>, <link>, <script> 및 <base>는 메타 데이타를 설명합니다.


HTML <title>요소

<title>요소는 문서의 제목을 정의하고 모든 HTML/XHTML문서에서 필요합니다.

<title>요소:

  • 브라우저 탭에 표시되는 제목을 정의합니다.
  • 즐겨찾기에 추가될 때 페이지의 제목을 제공합니다.
  • 검색엔진 결과에 페이지 제목을 표시합니다.
<!DOCTYPE html>
<html>

<head>
  <title>페이지제목</title>
</head>

<body>
문서의 내용은 여기에......
</body>

</html>

HTML <style>요소

<style>요소는 하나의 HTML페이지에 대한 스타일 정보를 정의하는데 사용됩니다.

<pre class="line-numbers"><code class="language-markup"><style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style></code></pre>

HTML <link>요소

<link>요소는 외부 스타일 시트에 연결하는데 사용됩니다.

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

HTML <meta>요소

<meta>요소는 페이지 설명, 키워드, 제작자 및 다른 메타 데이타, 문자세트 등을 지정하는데 사용됩니다.

메타 데이타는 브라우저(내용 표시 방법), 검색엔진(키워드) 및 기타 웹 서비스에서 사용됩니다.


웹문서의 문자세트를 정의합니다.

<meta charset="UTF-8">

웹문서에 대한 설명을 정의합니다.

<meta name="description" content="html강좌">

검색엔진에 대한 키워드를 정의합니다.

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

페이지 작성자를 정의합니다.

<meta name="author" content="365ok">

10초마다 웹문서를 새로 고침합니다

<meta http-equiv="refresh" content="10">

다음은 <meta>태그의 종합 예입니다.

<meta charset="UTF-8">
<meta name="description" content="html강좌">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="365ok">

뷰포트(viewport) 설정하기

HTML5는 웹디자이너가 <meta>태그를 통해 뷰포트를 제어할 수 있게 하는 메소드를 도입했습니다.

뷰포트는 사용자가 볼 수 있는 웹페이지의 영역입니다. 그것은 장치에 따라 다르며 휴대전화의 경우 컴퓨터(PC)보다 작습니다.

모든 웹페이지에 다음과 같은 <meta>뷰포트 요소를 포함해야 합니다.

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

<meta>viewport요소는 페이지의 크기와 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.

width=device-width부분은 페이지의 너비를 장치의 화면 너비에 따라 설정합니다.

initial-scale=1.0부분은 브라우저가 페이지를 처음 로드할 때 초기 줌레벨을 설정합니다.


HTML <script>요소

<script>요소는 클라이언트측 Javascript를 정의하는데 사용됩니다.

다음 자바스크립트는 id="demo"인 HTML요소에 "안녕 자바스크립트!"를  추가합니다.

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "안녕 자바스크립트!";
}
</script>

HTML <base>요소

<base>요소는 페이지의 모든 상대 URL에 대한 기본 URL과 기본 대상(target)을 지정합니다.

<base href="https://365ok.co.kr/images/" target="_blank">


댓글목록 0

등록된 댓글이 없습니다.