• html에는 크게 head와 body가 있다.

• head태그의 요소에는 다음과 같은 요소들이 포함되어야 함
  • title
  • style
  • base
  • link
  • meta
  • script
  • noscript

• head태그는 body태그와 다르게 페이지에 표시되지 않음

• 대신 페이지에 대한 metadata를 포함

• html5에서는 head요소를 생략할 수 있도록 변경됨

meta

• meta태그는 해당 문서에 대한 정보(메타데이터)를 정의할 때 사용

• meta태그 요소는 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용됨

• 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용

charset 속성

• meta 태그의 charset 속성은 해당 HTML 문서의 문자 인코딩 방식을 명시

• lang 속성을 사용하면 meta 요소의 charset 속성으로 명시한 문자 인코딩 방식을 재정의 가능

문법
<meta charset="문자셋">

속성값
문자셋 : HTML 문서의 문자 인코딩 방식을 명시
		유니코드(Unicode)를 위한 문자셋인 UTF-8이 가장 많이 사용됨.

• 한국에서 사용되는 인코딩 방식은 크게 euc-kr방식과 UTF-8방식이 있음

euc-kr 방식

euc-kr 방식은 원래 영어만을 고려한 1byte 길이의 ASCII 라는 인코딩 방식을 확장하여 한글을 사용할 수 있도록 만든 2byte 길이의 국가 언어 코드.

국가 언어코드, 즉 우리나라에서만 쓸 수 있도록 만든 코드이며 세계 어디에서나 공통으로 사용되는 인코딩 방식이 아니기 때문에 다른 언어를 사용하는 환경(외국 등)에서는 한글 페이지를 제대로 볼 수 없는 문제가 발생.

• 이를 해결하기 위해 개발된 인코딩 방식 중 가장 보편화된 방식이 UTF-8
  • UTF-8은 3byte
  • 예전에는 용량이 작은 ecu-kr방식을 선호하는 곳들도 많았음
  • 현재는 용량보단 표준화 및 글로벌 환경을 고려하여 UTF-8 인코딩 방식을 강력하게 권고

UTF-8 방식

• UTF-8 사용 예시

HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5
<meta charset="UTF-8">

• UTF-8은 전세계적인 character 집합으로 많은 언어, 문자들을 포함

• 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미

• 위에서 말씀드린것처럼 작성할 모든 페이지에서 인코딩 방식을 utf-8을 사용하는 것이 좋음

content 속성

• name 속성이나 http-equiv 속성과 관련된 값(value)을 명시

문법
<meta content="텍스트">

속성값
텍스트 : 메타데이터의 값

• name이나 http-equiv속성이 명시되었다면 반드시 content속성도 함께 명시되어야 함
  • 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없음

• content 속성 예시

1. 검색 엔진을 위한 키워드(keyword)를 정의하는 예제
<meta name="keyword" content="HTML, meta, tag, element, reference">

2. 웹 페이지에 대한 설명(description)을 정의하는 예제
<meta name="description" content="HTML meta tag page">

3. 문서의 저자(author)를 정의하는 예제
<meta name="author" content="TCPSchool">

4. 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 많은 meta 요소가 name 과 content 속성을 가짐
  • name은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줌
  • content는 실제 메타데이터의 컨텐츠

http-equiv 속성

• content 속성에 명시된 값에 대한 HTTP 헤더를 제공

• HTTP 응답 헤더를 시뮬레이션할 때 사용

• http-equiv 속성이 명시되어 있다면, 반드시 content 속성도 함께 명시되어야 함

문법
<meta http-equiv="content-type / default-style / refresh">

속성값
content-type : 해당 문서의 문자 인코딩 방식을 명시
ex) <meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-style : 우선적으로 적용할 스타일시트를 명시
	content 속성값은 동일 문서에 존재하는 link 요소의 title 속성값,
	또는 style 요소의 title 속성값과 일치해야만 함
ex) <meta http-equiv="default-style" content="preferred stylesheet">

refresh : 해당 문서를 새로고침(refresh)할 시간 간격을 명시
	refresh 속성값은 사용자로부터 페이지에 대한 제어를 빼앗아오기 때문에 주의를 기울여 사용해야 함
ex) <meta http-equiv="refresh" content="30">

• HTML5에서도 http-equiv 속성을 사용하여 문자 인코딩 방식을 명시하는 것을 여전히 허용하지만, charset 속성을 사용하면 더욱 간단하게 명시 가능

name 속성

• 메타데이터를 위한 이름을 명시

• name 속성이 명시되었다면, 반드시 content 속성도 함께 명시돼야함

• HTML5에서는 meta요소를 통해 viewport를 제어할 수 있도록 name속성에 viewport속성값을 제공

문법
<meta name="애플리케이션 이름 / author / description / generator / keywords / viewport">

속성값
애플리케이션 이름 : 웹 페이지가 나타내는 웹 애플리케이션의 이름을 명시

author : 문서의 저자를 명시
ex) <meta name="author" content="TCPSchool">

description : 웹 페이지에 대한 설명을 명시
	검색엔진은 검색 결과에 이러한 설명을 함께 표시할 수 있다.
ex) <meta name="description" content="HTML meta tag page">

generator : 문서를 생성하는데 사용되는 소프트웨어 패키지 중 하나를 명시
	(수동으로 생성된 페이지에는 사용하지 않음)
ex) <meta name="generator" content="Frontweaver 8.2">

keywords : 검색 엔진을 위해 웹 페이지와 관련된 콤마(,)로 구분한 키워드 목록을 명시
ex) <meta name="keyword" content="HTML, meta, tag, element, reference">

viewport : 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트를 제어
	뷰포트는 장치에 따라 달라지므로, 모바일 화면은 컴퓨터 화면보다 뷰포트가 더 작음
	meta요소의 viewport는 브라우저에게 해당 페이지의 면적과 비율 등을 어떻게 제어할 지에 대한 지침 제공
	따라서 다음과 같은 meta요소를 모든 웹 페이지에 삽입해야만 웹 페이지가 모든 장치에서 잘 보일 수 있음
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
    위 예제에서 "width=device-width" 부분은 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비를 설정
    "initial-scale=1.0"부분은 브라우저에 의해 웹 페이지가 처음으로 로드될 때 초기 확대/축소 레벨을 설정

title

• 해당 문서의 제목(title)을 정의할 때 사용

• 브라우저의 제목 표시줄이나 페이지 탭의 제목으로 사용

• 즐겨찾기 등록 시 해당 페이지에 대한 즐겨찾기 이름으로도 사용

• 검색 엔진에 의한 검색 결과 페이지에서도 해당 페이지의 제목으로 나타남

• 모든 HTML 문서에는 title 요소가 필요
  • 두 개 이상의 title 요소를 포함할 수는 없음
  • 문서에 title이 존재하지 않으면 유효성 검사를 통과 못함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test page</title>
</head>
<body>
    테스트페이지의 보여지는 영역
</body>
</html>

• 위 코드를 실행하면 띄워지는 브라우저 창
  

link

• 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용

• link 요소는 빈 태그이며, 속성만을 포함

• head 내부에만 위치할 수 있으며, 개수에는 제한이 없음

• 주로 외부 스타일 시트를 연결할 때 사용

<head>
    <link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>

• HTML5에서는 charset, rev, target 속성을 더 이상 지원하지 않음
  • crossorigin 속성과 sizes 속성이 새롭게 추가

script

• 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용

• 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조 가능
  • src 속성이 명시된 script 요소에는 스크립트 코드를 직접 명시해서는 안됨

• 참조된 외부 스크립트 파일을 실행시키는 방법
  1. async 속성이 명시된 경우
     = 브라우저가 페이지를 파싱되는 동안 스크립트가 실행됨.
  2. async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우
     = 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
  3. async 속성과 defer 속성이 모두 명시되어 있지 않은 경우
     = 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

• noscript를 사용하면 클라이언트 사이드 스크립트를 사용하지 않도록 설정 가능

• 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의 가능

예제
<script type="application/javascript">
    document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>

• HTML 4.01에서는 script 요소에 type 속성을 반드시 명시해야 했음
  • HTML5에서는 명시하지 않아도 됨

• HTML5에서는 script 요소의 xml:space 속성이 더 이상 지원되지 않음
  - async 속성이 새롭게 추가