HTML 기초 (3) - 기본 태그 (Head 태그에 들어가는 태그)
안녕하세요. 이번 글에서는 저번에 예고드린 대로 <head> 태그 내부에 들어가는 태그들에 대해 알아보도록 하겠습니다.
오늘은 글을 2개를 올렸는데, 이전 포스트에서 <head> 태그 내부 요소를 설명한다고 해놓고서는 제가 잊어버리고 <h?> 태그와 <p> 태그를 설명하는 글을 먼저 써버려서 뒤늦게서야 본 포스트를 쓰게 되었습니다. (글 순서는 올바르게 바꿔 놨습니다.)
<head> 태그 내에는 크게 아래의 5가지 태그들이 들어가게 되는데요, 이 태그들은 원칙적으로는 반드시 <head> 태그 내에 위치해야 합니다. 다만 <script> 태그의 경우에는 최근에 <head> 태그가 아닌 <body> 태그 바깥에 위치하기도 합니다. 자세한 사항은 <script> 태그를 설명하면서 같이 설명하도록 하겠습니다.
1. <title> 태그
<title> 태그는 말 그대로 문서의 제목에 관련된 태그입니다. <title> 태그 내에 입력된 텍스트는 HTML 문서를 웹 브라우저에서 열었을 때 웹 브라우저의 제목 표시줄이나 탭의 제목으로 표시됩니다.
과거에는 웹 사이트의 제목만을 넣어 두는 것이 일반적이었으나, 웹 접근성 향상을 위해 title 태그 내에 웹 사이트의 제목 뿐만 아니라 페이지의 제목도 넣어주는 것이 최근의 추세입니다. 예를 들어 'Project Crestia' 라고만 쓰는 것 보다는 '블로그 소개 | Project Crestia'와 같이 쓰면 현재 페이지의 제목과 웹 사이트의 제목을 둘 다 표시함으로서 사용자가 정확히 어느 웹 사이트의 어느 페이지에 있는 지 명확히 알 수 있게 됩니다. 또한 서브 메뉴의 경로를 표시 (예를 들자면 '블로그 소개 > 저작권 | Project Crestia' 와 같이)하는 방법도 많이 쓰이고 있습니다. 이 태그는 시작과 끝을 표시해야 하는 태그입니다.
예) <title>Project Crestia - 블로그 소개</title>
2. <meta> 태그
<meta> 태그는 HTML 문서에 대한 메타 데이터를 입력하는 태그입니다. meta 태그의 용도는 매우 다양합니다.
첫째로, 메타 데이터들을 입력함으로서 검색 엔진의 봇 (Bot)이 페이지를 크롤링 (Crawling - 긁어 오는 작업)할 때 해당 페이지를 누가 작성하였고, 어떤 정보들이 있으며, 이 정보들에 대한 검색어 (Keyword)는 무엇인지 등에 대해 봇에게 알려주는 역할을 하게 됩니다.
그리고 웹 브라우저가 페이지를 열 때 HTML 문서의 인코딩 (Encoding)이 무엇인지에 대해 알려줄 수 있으며, Internet Explorer의 경우에는 페이지를 표시할 때 사용할 렌더링 엔진을 지시해 줄 때 사용할 수도 있습니다. 그리고 모바일 웹 브라우저에게는 화면의 기본 크기를 알려줄 때도 <meta> 태그를 사용합니다.
마지막으로, http 헤더에 속성 값을 넣어 웹 브라우저에 전달하는 역할도 합니다. HTML 4.x 및 XHTML 1.x에서 인코딩을 정의하는 방법이 이 방법을 사용하며, 기본 스타일 시트 정의 및 페이지 새로 고침 시간을 정의하는 데에도 사용합니다. 그 외에도 여러 가지 표준 및 비표준 속성들이 존재합니다만, 분량이 많기 때문에 사용 빈도가 높은 것들만 추렸습니다. 아, 참고로 이 태그는 단독 사용 태그입니다.
1) 페이지 작성자 : <meta> 태그에 name="author", content="작성자명" 속성을 사용합니다.
예) <meta name="author" content="Crestia">
* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.
2) 페이지 검색어 : <meta> 태그에 name="keywords", content="검색어1, 검색어2, ..." 속성을 사용합니다.
예) <meta name="keywords" content="HTML 튜토리얼, CSS 스니펫, 개발 팁">
* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.
3) 페이지 설명 : <meta> 태그에 name="description", content="간단한 설명" 속성을 사용합니다.
예) <meta name="author" content="Project Crestia의 블로그">
4) 인코딩 정보 : HTML5에서는 <meta> 태그에 charset="인코딩 셋" 속성을 사용하며, HTML 4.x나 XHTML 1.x는
http-equiv="Content-Type", content="text/html;charset=인코딩 셋" 속성을 사용합니다.
예) HTML5 : <meta charset="UTF-8">
HTML 4.x : <meta http-equiv="content-type" content="text/html;charset=UTF-8">
XHTML 1.x : <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
* 주로 사용 되는 한국어 인코딩 셋 : UTF-8 (유니코드), EUC-KR (확장완성형)
* 주의 : 한 HTML 문서 내부에 여러 개의 인코딩이 들어갈 수 없음
5) 렌더링 엔진 지정 : <meta> 태그에 http-equiv="x-ua-compatible" content="IE=버전" 속성을 사용합니다.
예) Internet Explorer : <meta http-equiv="x-ua-compatible" content="IE=edge">
* 버전 속성
* edge : 항상 최신 버전의 렌더링 엔진으로 표시
* 9 : 9.0 렌더링 엔진
* 8 : 8.0 렌더링 엔진
* 7 : 7.0 렌더링 엔진
* 6 : 6.0 렌더링 엔진 (쿼크 모드)
6) 모바일 기기 화면 설정 : <meta> 태그에 name="viewport" content="설정 내용" 속성을 사용합니다.
예) <meta name="viewport" content="width=device-width, initial-scale=1.0">
* 설정 내용 항목
* width : 페이지의 너비. 일반적으로 device-width (기기 화면 너비)로 사용함.
* initial-scale : 페이지를 불러왔을 때 초기 화면의 크기. initial-scale=1.0로 해 놓으면 100%.
* maximum-scale : 최대 화면 크기. maximum-scale=1로 해놓으면 100%가 최대값.
* user-scalable : 사용자 줌 가능 여부 설정. user-scalable=no로 설정하면 페이지 줌 불가능
* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.
7) 페이지 새로 고침 간격 지정 : <meta> 태그에 http-equiv="Content-Type" content="초" 속성을 사용합니다.
예) <meta http-equiv="refresh" content="20">
3. <link> 태그
<link> 태그는 HTML 문서와 외부 파일을 연결해 주는 징검다리 같은 역할을 하는 태그입니다. 주로 외부 스타일시트 파일을 연결할 때 많이 사용합니다. 물론 <meta> 태그처럼 여러가지 용법이 있지만, 처음 시작하는 단계에서는 스타일시트 연결 방법 하나만 아셔도 충분합니다.
스타일시트를 연결할 때는 아래의 예와 같이 rel="stylesheet", href="파일 경로" 속성을 사용합니다. 추가적으로 HTML 4.x 또는 XHTML 1.x는 파일의 형식을 알려주는 type="text/css" 속성도 같이 사용하는 것을 권장하고 있습니다. 여기에 추가적으로 media 속성을 지정해서 각각의 스타일시트별 장치 (화면, 프린터, 스크린 리더 등)를 지정해 줄 수도 있습니다. 단독 사용 태그입니다.
예) 일반적인 사용법
HTML5 : <link rel="stylesheet" href="css/style.css">
HTML 4.x : <link rel="stylesheet" type="text/css" href="css/style.css">
XHTML 1.x : <link rel="stylesheet" type="text/css" href="css/style.css" />
예) 장치 별 별도 지정 (HTML5 기준, 화면용 CSS와 인쇄용 CSS를 별도로 지정할 때)
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/print.css" media="print">
4. <style> 태그
위에서 설명한 <link> 태그를 사용해서 스타일시트를 불러오지 않고, 문서 내에 직접 CSS를 마크업하여 스타일을 정의하는 태그입니다. HTML 4.x 또는 XHTML 1.x는 파일의 형식을 알려주는 type="text/css" 속성도 같이 사용하는 것을 권장하고 있습니다. 여기에 위의 <link> 태그와 같이 추가적으로 media 속성을 지정해서 각각의 스타일시트별 장치 (화면, 프린터, 스크린 리더 등)를 지정해 줄 수도 있습니다. 사용 방법은 아래와 같으며, 저의 경우에는 HTML과 CSS 파일을 오가며 작업하기 귀찮을 때 <style> 태그에서 CSS를 작성해서 테스트 및 속성 변경 작업을 한 뒤 작업이 완료되면 별도의 CSS 파일로 옮기는 식으로 사용하고 있으며, 너무 짧아서 굳이 CSS 파일을 만들 필요가 없을 때에도 사용합니다. 시작과 끝을 지정해야 하는 태그입니다.
예)
<style>
body {
background-color: #000;
color: #ccc;
font-family: 'Helvetica Neue', Tahoma, sans-serif;
font-size: 1 em;
}
</style>
5. <script> 태그
드디어 마지막입니다. <script> 태그에는 JavaScript나 VBScript와 같은 웹 브라우저에서 돌아가는 스크립트 언어의 코드가 들어가게 됩니다. 또한 src 속성을 사용해서 외부 스크립트 파일을 연결하는 데에도 사용할 수 있습니다. 추가적으로 HTML 4.x 또는 XHTML 1.x는 파일의 형식을 알려주는 type="text/스크립트명" 속성도 같이 사용하는 것을 권장하고 있습니다. 시작과 끝을 지정해야 하는 태그이며, 이는 외부 스크립트 파일을 불러올 때에도 마찬가지로 시작과 끝을 지정해야 합니다. (아래의 예제 참고)
예) 스크립트 직접 입력 (HTML 5 기준)
<script>
function showAlert() {
alert('테스트 경고 상자입니다.');
}
</script>
예) 외부 스크립트 파일 연결
HTML5 : <script src="http://code.jquery.org/jquery-lastest.js"></script>
HTML 4.x, XHTML 1.x : <script src="http://code.jquery.org/jquery-lastest.js" type="text/javascript"></script>
참고로 <script> 태그에 대해 약간의 설명을 더 드리자면, 요즈음 제작되는 웹 사이트들은 역동적인 페이지 제작, 사용자 편의성 증대 등을 위해 많은 분량의 JavaScript을 사용하는데, 대량의 스크립트를 <head> 태그 내에 위치시키게 되면 브라우저가 스크립트를 모두 읽어 들일 때까지 페이지 본문이 표시되지 않거나, 페이지 로드 속도가 심각하게 느려지는 문제가 있습니다.
따라서 최근에는 대량의 스크립트 이용 시 <head> 태그 내에는 반드시 웹 페이지 로드 시 또는 로드 완료 직후 바로 실행되어야 할 필수적인 스크립트만 넣고, 페이지 로드 완료 이후에 실행될 스크립트들은 <body> 태그 뒤쪽으로 빼서 사용하는 편입니다. (본 블로그도 로딩 속도 향상을 위해 SyntaxHighlighter 같은 스크립트들은 문서 맨 뒤쪽에 위치하고 있습니다.) 또한 로드 속도를 향상시키기 위해서 minify (전체 코드를 한 줄로 연결해서 로드 속도 향상 및 용량 감소)나 gzip 압축 (용량 감소)을 하기도 합니다.
여기까지 오시느라 매우 수고하셨습니다! 다음 포스트에서는 머리말 태그인 <h?>과 문단 태그인 <p>에 대해서 알아보도록 하겠습니다.