웹디자인기능사 자격증 기초 2번째, HTML5의 핵심 기능들을 살펴보고 태그를 하나씩 사용해보려고 한다. HTML 문서 머리 부분에는 HAED, TITLE, META, LINK, SCRIPT 태그가 있다. 이에 대해 알아보도록 하자.
[웹디자인기능사 자격증 기초] HTML5 핵심 기능
HTML5 핵심기능
*위의 목차를 클릭하면 해당 글로 자동 이동 합니다.
HTML 문서 머리 부분 작성하기
HTML문서의 머리에는 HEAD, TITLE, META, LINK, SCRIPT 태그가 사용된다.
<HEAD>... </HEAD> : 문서의 정보를 정의하는 태그로 시작부분에 쓰인다.
<TITLE> ...</TITLE> : 브라우저의 제목 표시줄에 문서의 제목을 보여준다.
<META 속성> ...</META> : 문서의 베타 데이터를 정의하는 태그로 작성자, 검색 키워드, 문서 파기 일자 등 브라우저 본문 상에는 실제적으로 나타나지 않는 문서에 대한 정보들을 나타낸다.
<LINK> : HTML문서와 외부 리소스(다른 문서)간의 관계를 나타내는 태그로, 외부 스타일 시트(CSS) 삽입할 때 사용한다.
<SCRIPT> : 클라이언트 측 스크립트를 정의하는 태그로 자바스크립트(JS)를 삽입할 때 사용한다.
<TITLE> 태그
<TITLE> 태그와 </TITLE> 사이에 HTML 문서의 제목을 기입한다. 문서의 제목은 웹 브라우저 제목 표시줄에 나타나게 된다.
<TITLE> 티스토리 </TITLE>
<META> 태그
<HEAD> </HEAD> 사이에 <META>태그와 속성을 사용해 문자 세트를 표현한다.
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
*charset=utf-8 : 컴퓨터가 문자를 처리할 수 있도록 바이트 형식으로 변환하는 것을 인코딩이라고 한다. charset은 문자 인코딩의 구성 문자 집합(문자 세트)를 의미한다. HTML문서에 한글이 포함되어 있는 경우에는 인코딩 방식을 KSC 완성형인 'EUC-KR'을 사용한다. 한글 폰트 없이도 한글을 볼 수 있게 하려면 'UTF-8' 인코딩을 사용한다.
**http-equiv="Content-Type" content="text/html" : 이 부분은 HTML 문서 페이지가 어떤 언어로 제작된 것인지 알려주는 속성이다. 앞으로 표시되는 예시에는 이 속성이 표시되어 있으나 HTML5 문서에는 이 속성 부분을 생략할 수 있다.
<LINK> 태그
<LINK> 태그는 외부에 별도로 존재하는 스타일 시트(CSS) 파일을 HTML 본문 문서와 연결할 때 사용된다. <HTML>과 </HTML> 사이에서 사용되며, 'css' 폴더 아래에 있는 'style.css'문서를 HTML본문과 연결할 수 있다.
<link href="css/style.css" type="text/css" rel="stylesheet">
<LINK> 태그의 rel 속성은 현재 HTML 문서와 href 속성 값에 의해 지정된 다른 문서와의 관계를 정의할 때 사용된다. 스타일 시트 문서를 연결할 때는 "rel="stylesheet"를 사용한다.
<SCRIPT>태그
<SCRIPT> 태그는 JavaScipt를 정의하거나 JavaScipt 코드를 기록해 놓은 외부 js 문서 파일을 HTML 본문 문서와 연결할 때 사용한다.
<script src="javascript/jquery-1.12.3.js" type="text/javascript"></script>
<script src="javascript/script.js" defer="defer" type="text/javascript"></script>
* defer 속성은 script의 실행을 지연시키는 속성이다. 이 속성이 필요한 이유는 언제 스클비트를 실행할 것인지를 지정하기 위해서이다. 웹 브라우저는 HTML 문서를 렌더링하는 과정에서 HTML 문서의 머리인 <HEAD> 태그 안에서 스크립트 파일을 만나면 곧바로 실행하게 된다. 그러나 defer 속성을 사용하면 HTML 문서의 <BODY> 태그까지 모두 렌더링한 후에 스크립트를 실행하게 된다. defer 속성을 사용하지 않는 경우 <SCRIPT> 부분을 </BODY> 태그 다음에 위치함으써 렌더링을 지연시키는 방법도 있다.
간단하게 HTML 머리의 핵심 부분을 알아보았다. 원래 이론보다는 실전이 더 재밌는 법이다. 지금은 어렵지만 이를 프로그램에 직접 실행해보면 재밌을 것이다. 다음엔 문서 몸체 부분 작성하기로 돌아오겠다.
'트렌드 > 웹디자인' 카테고리의 다른 글
| 웹디자인기능사 기초: HTML5 기본 문법과 시맨틱 태그 (0) | 2023.05.27 |
|---|
