head 태그는 현재 html 문서에 대한 정보를 정의합니다.
head 태그 안에는 <meta>, <title>, <style>, <script>, <link> 태그 등이 사용될 수 있습니다.
head 태그는 직접적으로 브라우저 화면에 보일 내용이 들어가지는 않습니다. 현재 html 문서에 이름이 무엇이고 어떤 언어로 만들어져 있는지 어떠한 브라우저에서 작동하는지 어떤 외부 소스를 가져오는지 등을 정의합니다.
그러므로 당연히 하나의 웹문서에는 하나의 head태그만이 존재합니다.
기본적인 사용방법
<head>
<meta charset="UTF-8">
<title>html 강좌</title>
</head>
meta 태그는 현재문서(컨텐츠)를 표현하기 위한 정보를 정의한 태그입니다.
정보를 위한 정보라고 볼 수 있습니다. 가령 집에서 온 가족이 같은 크기의 김치만두완 고기만두를 빚었다고 합시다. 그리고 한 통에 담아 냉장고 냉동실에 보관했다고 하면 다음에 김치만두만 먹고 싶을 때 구분하기는 쉽지 않을 것입니다. 그래서 따로 담고 라벨지로 얘는 김치만두, 얘는 고기만두라고 붙였다고 한다면 이 라벨지와 같은 역할을 하는 것이 meta 태그입니다. 라벨지에 얘는 첫째가 만든 것 얘는 둘째가 만든 것이라고 붙일 수도 날짜를 붙일 수도 있을 겁니다. 결국 목적은 내가 먹고 싶을 것을 먹기 위한 정보를 작성해 놓는 것입니다.
즉 특정 목적을 위해 정의해 놓는 태그라고 생각하시면 됩니다.
위 예제에서 mata 태그의 속성을 보면 charset="UTF-8"이라고 되어 있는데 현재의 html 문서의 문자 인코딩 방식이 utf-8이라는 형식으로 만들어졌다는 것을 의미합니다.
인코딩이란 문자, 기호, 숫자 데이터를 부호화하는 것이고
디코딩이란 반대로 부호화된 데이터를 문자, 기호, 숫자로 되돌리는 것을 말합니다.
이 태그를 정의하지 않으면 글자가 깨져 보이는 현상이 발생할 수 있으니 잘 모르겠더라도 반듯이 정의해 주어햐 합니다.
title 태그는 현 html 문서의 제목이라고 보시면 됩니다.
title 태그를 정의하면 위와 같이 페이지 탭에 표시됩니다.
현시점에서 가장 일반적인 사용방법
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html 강좌</title>
</head>
위 소스를 보면 기본적인 사용방법보다 2가지 meta 태그가 추가되어 있습니다.
이 태그에 대한 이야기를 하려면 웹브라우저의 과거부터 좀 더 알아야 됩니다. 현재 시점부터는 점차 사용이 없어질 것이라 예상은 되지만 가볍게 언급하고 지나가겠습니다.
과거 windows OS가 기본적으로 웹브라우저를 internet explorer를 내장하면서 많은 사용자들이 웹브라우저라고 하면 인터넷 익스플로러만 생각했습니다.
웹브라우저 = 인터넷 익스플로러
당연히 개발자나 디자이너들도 웹문서를 만들 때 인터넷 익스플로러에서 잘 작동이 되는지만을 확인하면 되었고요
그런데 사실 당시만 해도 웹브라우저는 다양하게 존재하고 있었습니다. 넷스케이프라던지 사파리 파이어폭스등 지금까지도 여전히 사용되고 있습니다. 모두들 자기네 브라우저가 우수하다고 자기네 브라우저에 맞는 웹문서를 만들라고 요구하고 있었습니다. 하지만 거의 대부분의 컴퓨터는 운영체제로 windows를 사용했기 때문에 (한국은 더더욱 높을 점유율) 다른 웹브라우저는 고려의 대상에서 벗어났습니다.
하지만 어느 순간부터 더욱더 우수한 웹브라우저가 나타나기 시작했습니다. 사람들의 더 빠르고 더 보기 좋은 브라우저로 사용하기 시작했습니다.
그런데 문제는 인터넷 익스플로러에서 문제없이 보였던 화면들의 다른 브라우저에서는 보이지 않는 현상이 발생했습니다. 그리고 알게 모르게 발생하던 보안 문제도 발생되었습니다. 이유는 웹문서가 브라우저 회사들 마다 자기들에게 특화된 코딩 방법으로 브라우저의 표현과 보안을 강화했기 때문이었습니다. wndows도 질 수 없으니 인터넷 익스플로러를 업그레이드하기 시작했고 결국 버전이 11까지 나오게 되었습니다.
이런 문제로 개발자들은 엄청난 스트레스를 받았습니다. 가장 많은 질문은 "왜 홈페이지 화면이 안 보이지요?"였습니다. 그때마다 어떤 브라우저를 사용하고 계시나요 하고 반문해야 했습니다.
결국 웹브라우저 회사들은 더 이상은 안 되겠다고 판단했습니다. 브라우저의 사용방식을 표준화하고 현시점부터는 자기들에게 특화된 브라우저의 표현기법을 버리고 공통으로 정한 표준에 맞춰 가자는 것이었습니다.
이렇게 정한 표준을 웹표준 이라 부르게 되었습니다.
인터넷 익스플로러도 이런 문제점을 인지하고 익스플로로8 이후 버전부터는 웹표준을 가능한 맞추려고 노력했습니다. 물론 한 번에 딱 맞출 수는 없었습니다. 왜냐 하면 이미 웹표준이 아닌 형식으로 만들어진 홈페이지가 대부분이었기 때문입니다. 그렇다고 이미 만들어진 홈페이지를 볼 수 없게 한다는 것은 기존 사용자들에게 너무 불합리한 일이었기에 결국 인터넷 익스플로러는 호환성 보기라는 것을 만들어 냈습니다. 즉 "지금부터는 웹표준으로 만드세요. 안 보이는 홈페이지는 과거처럼 호환성 보기 버튼을 클릭하면 보실 수 있습니다."
이야기의 종착점입니다. 지금까지의 문제점 때문에 과거에 만들어진 홈페이지들은 위 소스의 3번 라인
http-equiv="X-UA-Compatible" content="IE=edge"을 추가했습니다. 웹브라우저의 표현방식이 엣지 브라우저에 맞게 동작하라는 것입니다.
- http-equiv="X-UA-Compatible" content="IE=5"
- http-equiv="X-UA-Compatible" content="IE=7"
- http-equiv="X-UA-Compatible" content="IE=9"
같은 의미로 웹브라우저의 표현방식을 인터넷 익스프로로 5, 7, 8에 맞게 동작하라는 것입니다.
현재도 언젠가 과거가 될 테니까 위 3번 라인 meta 태그는 추가해 주는 것이 좋습니다.
자 이제 마지막 4번 라인 name="viewport" content="width=device-width, initial-scale=1.0" 에 대해 설명드리겠습니다.
글로 쓰려니 많이 길어지네요..
viewport 메타태그는 모바일기기가 생기면서 생성된 메타 태그입니다.
모바일 기기(휴대폰, 태블릿)에서는 화면사이즈가 다양하게 존재하기 때문에 초기에는 화면사이즈를 정할 필요가 있습니다. 지금 시점에는 가변 하는 사이즈에 맞춰 반응하는 반응형 웹으로 제작되지만 불가 얼마 전까지만 해도 모바일과 PC형의 홈페이지가 따로 구동되었으니까요. 현재도 사실상 완벽한 반응형 웹은 쉽지 않습니다.
name="viewport" content="width=500"이라 지정하면 기기의 화면 사이즈가 500 이상 이던지 이하이던지 모두 500px 사이즈로 강제로 맞추어 표현됩니다.
initial-scale=1.0는 초기 배율을 원래 사이즈로 맞춰라는 뜻입니다. 모바일 기기에서는 화면의 확대축소가 자유롭기 때문에 생긴 속성입니다. initial-scale=2.0으로 하면 당연히 2배가 되겠지요
즉 4번 라인이 메타 태그 name="viewport" content="width=device-width, initial-scale=1.0" 은 가로사이즈는 화면에 맞추고 기본배율은 1배 즉 원래크기대로 표현하라는 뜻입니다.
네 줄 설명하는데 많이 길어졌습니다. 앞으로의 html 강의의 head 태그 안에 기본적으로 위 4줄이 들어간다고 보시면 되겠습니다.
지금까지 읽어주셔서 감사합니다.
'강좌 및 설정 > HTML 기본강좌' 카테고리의 다른 글
| 개발자 도구의 활용 (0) | 2022.11.14 |
|---|---|
| body (1) | 2022.10.05 |
| 픽셀 및 해상도 (0) | 2022.10.05 |
| html tag 사용법 (0) | 2022.09.28 |
| html 기본구조 (0) | 2022.07.17 |