- 2
- PRASEOD-
- 조회 수 984
안녕하세요 어느덧 세번째네요.
이번에는 head라는 요소에 대하여 알아 보겠습니다.
앞서 html 코드의 기본 구조를 보면, html의 각종 코드들은 xml처럼 홑화살괄호(<>)로 둘러싸여 있습니다.
이제 이걸로 홈페이지를 만들기 전에 우리는 홈페이지가 뭐하는 곳인지를 알려줄 태그를 작성할겁니다.
<head> 요소는 기본적으로 눈에 보이지 않는 부분을 책임집니다. 반면에 <body> 요소는 눈에 보이는 부분을 책임지죠.
<head>
내용
</head>
의 순서로 전개됩니다. <head> 요소 밑에는 <body> 요소가 들어가게 됩니다.
일단 헤드에 들어갈 주요 태그를 알아보도록 하겠습니다.
코드가 더 있겠지만, 이 정도만 알고 계셔도 웹디자인 하는데 큰 지장은 없습니다.
1. <meta>
용법: <meta 속성=내용>
메타태그란 무엇인가
우리가 페이스북이나 그런데 가서 프로필을 보면 이름, 주소, 직업 등등이 나와있죠
이러한 기본적인 정보들을 알려주는 태그입니다.
meta 태그에 속성으로 들어갈수 있는 요소는 대략 다음과 같습니다.
속성에 두가지 요소가 들어가 있다면 이는 두 가지 요소가 같이 쓰여야 함을 말합니다.
| 속성 | 쓰임 |
| charset | 문자열 인코딩 |
| name, content | 각종 정보 표시 |
| http-equiv, content | 문서의 초기정보 |
| property, content | 기타 정보 지정 |
일단 charset부터 보겠습니다. charset은 문자열의 인코딩을 지정해 줍니다.
예를 들어, 인코딩이 설정되지 않았다면 이런 경우가 발생합니다.
어우 내눈...
이렇게 되어버리면 뭐라고 썼는지 알아보기도 힘들겁니다.
그래서 이러지 말라고 인코딩을 설정해줍니다.
UTF-8은 유니코드입니다. 대부분이 이 설정을 사용합니다.
반면 기본적으로는 라틴문자 쪽으로 되어있어서 해외 사이트는 이런거 필요 없을겁니다(?)
한국어 인코딩은 간혹 EUC-KR도 보입니다. 일본어에서는 SHIFT-JIS를 쓰죠.
다음은 name입니다.
여기가 조금 복잡합니다...
name 속성 안에도 많은 부가 속성이 있습니다.
<meta name>
| 부가속성명 | 기능 |
| author | 제작자 |
| keywords | 주요 단어(키워드) |
| viewport | 기기 최적화 |
| description | 설명 |
| og: | 오픈그래프 표시정보 |
| twitter: | 트위터 표시정보 |
| robots | 로봇 사용여부 |
노란색 배경은 <meta property> 요소입니다.
일단 author은 제작자를 의미합니다. content 란에 이름을 적으시면 됩니다.
keywords는 검색을 유도하는 키워드입니다. content에 내용을 적으시면 됩니다.
viewport는 기기 최적화를 위한 옵션입니다. 반응형 웹 디자인에 사용됩니다. content에 적을 내용이 조금 복잡합니다...
내용: width=너비, height=높이, initial-scale=, minimum-scale=, maximum-scale=, user-scalable=(yes/no)
너비와 높이에는 device-width나 600 같은 특정한 값을 사용할 수 있습니다.
initial-scale이란 페이지가 처음 로드될 때의 확대 정도를 말합니다.
maximum/minimum-scale 은 각각 확대/축소를 가능하게 할 최대/최소의 정도를 의미합니다.
확대 정도에 대해서는, 확대하지도, 축소하지도 않은 상태를 1.0 이라고 봅니다. 0.5나 2.0처럼 나타내시면 됩니다.
user-scalable은 사용자가 페이지를 손가락으로 확대/축소를 할 수 있도록 하느냐를 결정합니다. yes 또는 no 로 설정합니다.
description은 그냥 설명이니 넘어갑니다.
og: 는, 오픈그래프라는 것으로
이렇게 제목,내용등을 표시해줍니다.
제목은 og:title, 내용은 og:description 입니다.
og:type이란 종류인데 여기에는 content로 website 쓰시면 됩니다.
twitter:도 마찬가지입니다.
robots는 로봇의 사용여부인데 content 내용에 따라 조금씩 달라집니다.
여기는 조금 복잡한 부분이라 나중에 다루겠습니다.
http-equiv는 크게 필요하다고 생각되지는 않습니다.
그래서 따로 다루지는 않겠습니다.
포함 3명이 추천
공유
TVJ
다음 강의도 기대하겠습니다 ^-^