HTML 메타 태그
오늘은 HTML에서 메타 태그에 들어가는 속성에 대해 자세하게 알아보겠습니다.
먼저 메타 태그를 간단하게 정리하면 HTML에서 head 태그 안에 위치하는 태그로
웹사이트 디자인에는 보이지 않지만 내용에 대한 정보나 검색을 했을 경우
나타나는 정보에 관여하는 등의 안 보이는 곳에서 꼭 필요한 태그입니다.
메타 태그의 속성에는 http-equiv, charset, name, content가 있습니다.
(1)
http-equiv
http-equiv 속성은 content 속성의 속성 값에 대한 http 헤더를 제공하는 속성입니다.
여기서 http 헤더란 클라이언트와 서버에서 요청이나 응답에 대한
정보를 전송할 수 있도록 사용되는데 보통 백엔드에서 사용됩니다.
http-equiv 속성은 주로 content 속성이나 charset 속성과 함께 사용됩니다.
사용되는 속성 값은 content-type, default-type, refresh가 있습니다.
먼저 content-type은 해당 문서의 문자 인코딩 방식을 지정할 수 있습니다.
그래서 다음 속성의 속성 값으로 문자와 관련된 값을 지정해야 합니다.
default-type은 우선적으로 적용할 스타일 시트를 지정할 수 있습니다.
그래서 자음 속성의 속성 값으로 연결한
CSS의 link 태그의 스타일 시트에 대한 내용을 지정해야 합니다.
refresh는 해당 문서를 새로고침을 할 때 시간에 대한 간격을 의미합니다.
그래서 다음 속성의 속성 값으로 시간을 나타내는 숫자를 지정합니다.
(2)
charset
charset 속성은 HTML 문서에 대한 문자 인코딩 방식을 지정할 수 있습니다.
보통 문자 인코딩 방식으로 유니코드를 위해 UTF-8 속성 값을 많이 사용합니다.
여기서 유니코드란 전 세계의 모든 문자를 다루도록 설계된
표준 문자 전산 처리 방식을 의미합니다.
(3)
name
name 속성은 meta 태그에 내용에 이름을 명시할 수 있는 속성입니다.
name 속성은 content 속성과 함께 사용되며
뷰포트를 제어할 수 있는 뷰포트 속성 값을 제공할 수 있습니다.
여기서 뷰포트란 사용자가 볼 수 있는 웹페이지 영역을 의미합니다.
관련 속성 값으로 애플리케이션, author, description,
generator, keywords, viewprot이 있습니다.
먼저 애플리케이션은 웹페이지를 나타내는
애플리케이션의 이름을 지정하는 속성 값입니다.
그래서 다음 속성의 속성 값으로 애플리케이션의 이름을 지정해야 합니다.
author은 문서의 저자를 명시할 수 있는 속성 값입니다.
그래서 다음 속성의 속성 값으로 문서의 저자를 지정해야 합니다.
description은 웹페이지에 대한 설명을 지정하는 속성 값입니다.
그래서 다음 속성의 속성 값으로 부가 설명을 작성해야 합니다.
generator은 문서를 생성하는 데 사용되는
소프트웨어에 대해 지정하는 속성 값입니다.
그래서 다음 속성의 속성 값으로 소프트웨어에 대해 지정해야 합니다.
keywords는 검색 엔진을 위해 웹페이지에 대해
관련한 키워드를 지정하는 속성 값입니다.
그래서 다음 속성의 속성 값으로 웹페이지에 관련된 키워드를 작성하며
키워드를 한 개 이상으로 작성할 수 있습니다.
만약 여러 개를 작성할 때는 콤마(,)를 함께 사용합니다.
마지막으로 viewport는 뷰포트를 제어하는 속성 값으로
그래서 다음 속성의 속성 값으로 화면 너비,
비율에 관련된 속성 값을 지정해야 합니다.
(4)
content
content 속성은 meta 태그의 정보에 대한 내용을 지정할 수 있습니다.
보통 name 속성이나 http-equiv 속성과 함께 사용되며 관련된 값을 지정합니다.
(5)
기본 메타 태그 설명
먼저 <meta charset="UTF-8">를 보시면
'문자 인코딩을 위해서 유니코드를 지정할 수 있는 UTF-8 속성 값을 지정하겠다.'
라고 해석할 수 있습니다.
다음은 <meta http-equiv="X-UA-Compatible" content="IE=edge">는
content 속성의 속성 값인 IE=edge는 IE 브라우저에서
각 버전 중 가장 최신의 버전을 선택하는 것을 의미하고
http-equiv의 속성 값은 X-UA-Compatible는 웹페이지와의 호환성을
원활하게 하기 위해 http 헤더에 정보를 제공해주는 것을 의미합니다.
마지막으로 <meta name="viewport"
content="width=device-width, initial-scale=1.0">은
먼저 name의 속성 값인 viewport는 뷰포트에 대해 지정하는 것을 의미하고
다음 content 속성의 속성 값인 width=device-width, initial-scale=1.0은
디바이스에 따라 보이는 뷰포트가 다르기 때문에 지정을 하는 속성 값으로
해석하면 'width(넓이)를 해당 디바이스에 따라 맞춰라,
initial-scale(초기 화면 비율)을 1인 기본으로 표시해라'라고
해석할 수 있습니다.
정리해보면 '문서의 언어를 유니코드를 나타내는 UTF-8로 지정하고
제공하는 웹브라우저에 대해서 최신 버전으로 지정해라.
그리고 디바이스에 따라 변화되는 뷰포트의 값을
알아서 기본 화면으로 지정해라.'라고 정리할 수 있습니다.
오늘은 메타 태그에 사용되는 속성에 대해 알아보았습니다.
메타 태그는 웹페이지를 구성하시는데 정말 중요하기 때문에 알아두셔야 하지만
초반에는 메타 태그는 어떤 역할을 하는지 정도만 알아두셔도 좋습니다.
감사합니다!!
댓글