티스토리 뷰
Head 태그 안에 들어가는 태그들에 대해 정리해 보도록 하겠습니다. Head 태그는 HTML문서의 머릿글이라고 할 수 있습니다. 시작 태그와 닫는 태그가 함께 사용되어야 합니다.
1. Title 태그
Head 태그 안에 사용할 수 있는 대표적인 태그는 바로 Title 태그입니다. 웹문서에 제목을 달아주는 것인데요, 문서의 전체적인 의미를 대표할 수 있는 주제어를 담게 됩니다. 브라우저의 맨 위에 표시되며 문서의 본문에는 나타나지 않습니다.
1 | <title> 맛있는 과일가게 </title> | cs |
2. Meta 태그
Meta 태그는 웹페이지에 대한 색인정보를 입력할 수 있습니다. Meta 태그를 활용해서 키워드와 설명을 넣음으로써 그 페이지에 대한 정보를 제공하고 검색엔진에서 상위에 노출될 수 있도록 해줍니다. Head 태그 뒤에 놓일 수도 있는데 일반적으로는 Head 태그 안에 입력합니다. 주의할 점은 반드시 Body 태그 앞에 위치해야 한다는 것입니다.
Meta 태그는 닫는 태그가 없으며 Name 속성과 Content 속성을 가집니다. 이 때 Name 속성에 따라 Content 속성의 내용을 인식하게 됩니다.
1 2 | <meta name="Description" Content="과일가게 쇼핑몰"> <meta name="Keywords" Content="사과, 배, 수박, 복숭아"> | cs |
Name 속성이 Description이면 해당 웹페이지가 어떤 정보를 담고 있는지에 대한 간략한 설명이 들어갑니다. 예제에서는 과일을 판매하는 쇼핑몰로 가정해 보았습니다. 그리고 Name 속성이 Keyworkds인 경우에는 웹페이지의 키워드를 지정하게 됩니다. 쇼핑몰에서 판매하는 과일의 종류를 나열해 보았습니다.
위에서 설명드린 HTML문서의 전체적인 구조를 살펴보면 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title> 맛있는 과일가게 </title> <meta name="Description" Content="과일가게 쇼핑몰"> <meta name="Keywords" Content="사과, 배, 수박, 복숭아"> </head> <body> </body> </html> | cs |
추가로 몇가지 속성을 더 알아보자면
1 | <meta Name="Author" content="과일가게 사장님"> | cs |
웹페이지를 작성한 저자를 표시하는 것인데 특별하게 어떤 작동을 하지는 않습니다. 그림을 그리거나 붓글씨를 마무리할 때 낙관을 찍는 것과 비슷한 느낌입니다.
1 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | cs |
이것은 브라우저에서 한글이 깨져보일 때 사용하면 정상적으로 볼 수 있습니다 UTF-8은 유니코드 인코딩 방식인데 다양한 사용자 환경에서 동일한 페이지를 구현하려면 잊지말고 넣어주는 것이 좋겠죠.
1 | <meta http-equiv="refresh" content="3; url=https://www.fruit-mall.com"> | cs |
지정한 시간 후에 페이지를 리디렉션시키는 기능입니다. 예제는 지정한 url로 3초 후에 이동하게 됩니다. url을 생략하면 해당 웹페이지를 자동으로 새로고침(리프레시)하게 됩니다.
'HTML' 카테고리의 다른 글
| [HTML] 문단 관련 태그 - BLOCKQUOTE 태그, HR 태그, PRE 태그 (0) | 2018.10.10 |
|---|---|
| [HTML] 헤드라인 태그 - Hn 태그, H1 태그, H2 태그 (0) | 2018.10.09 |
| [HTML] 문자관련 태그 - B태그, I태그, U태그 (0) | 2018.10.07 |
| [HTML] 문단, 단락 태그 - P 태그, BR 태그 (0) | 2018.10.05 |
| [HTML] HTML 웹문서의 기본구조 - Head 태그, Body 태그 (0) | 2018.09.26 |
- Total
- Today
- Yesterday