오늘은 저번에 봤던 <base> 태그 이후의
<link>, <meta>
에 대해서 알아보겠습니다.
1. <link> 태그
<link> 태그의 경우 외부의 문서를 (html 또는 기타 스타일 시트 문서)를 페이지에 추가하는 역할을 합니다.
C언어를 배워 보셨던 분이라면 #include 명령을 아실 겁니다.
그런 역할을 해주는 아이라고 생각하시면 좋은데요.
보통의 경우에는 이 <link> 태그를 통해서 다른 웹 문서를 불러오는데 사용하는 것이 아닌,
개발자가 미리 정해놓은 스타일 시트 문서(*.css)나 스크립트 문서를 불러오는데 사용하죠.
<link>가 왜 유용한지는 나중에 css나 javascript를 배우기 시작하시면 확실히 아실 수 있을 겁니다. 여기서는 사용하는 이유만 말씀을 드리겠습니다.
<link> 태그 위에서 말씀 드린 것처럼 다른 문서를 현재 문서에 불러오는 기능을 합니다. 사용법은
| <head>
<link rel="stylesheet" type="text/css" href="mainCss.css" /> </ head> |
가 되겠습니다.
ㅎㅎㅎ 위에를 보시면 rel 은 불러오는 문서가 어떤 문서인지를 나타내주는 것이라고 생각하시면 편할 겁니다.
정확히는 현재 불러오는 문서와의 관계를 나타내는 것입니다.
type 부분은 문서의 종류를 말해줍니다. 앞의 rel 보다 조금 더 기술적인 설명을 해주는 부분이라고 보시면 됩니다.
그리고 href 부분은 문서의 경로를 나타내 줍니다.
자, 이제 해석을 해보죠. ㅎㅎㅎㅎㅎ
저는 문서를 불러올겁니다. 그 문서는 이 문서의 스타일을 정의해주는 문서가 될 것이고 사용한 언어는 css입니다. 그리고 파일은 mainCss.css 라는 이름을 갖고 있습니다.
라고 해석하시면 됩니다.
보통의 경우 스타일 시트는 하나를 가지고 사용을 하는 경우가 많습니다. 웹페이지의 통일성 때문이죠. 예를 들어서 네이버 검색창에 검색을 했더니, 다음 검색 화면 배경이 나오면 모두들 이상하시겠죠?? 아무리 같은 사이트라고해도 말이죠. 그것을 막아주기 위해서 보통의 경우 비슷한 형식을 유지하게 되는데 그 형식을 유지해주는 것이 한번에 정의된 스타일 시트입니다.
이 부분은 나중에 css와 javascript를 공부할 때 제대로 공부하도록 하겠습니다.
2. <meta> 태그
<meta> 태그는 제작 된 홈페이지를 설명하는 부분이라고 생각하시면 편합니다. 그렇다면, 그 설명을 듣는 대상은 누구일까요?
쉽게 생각하면, 인터넷 세상입니다. ㅎㅎㅎㅎ
무슨 말인지 이해가 잘 안되죠? 쉽게 말해보겠습니다.
여러분이 네이버에서 검색을 하였습니다.
그리고 나서 웹페이지 부분을 보면 개인들이 운영하는 사이트가 나오는 걸 볼 수 있으실 거에요. ㅎㅎㅎ 자 그렇다면, 이 네이버는 그 사이트들을 어떻게 찾는 걸까요?
바로 이 <meta> 태그에서 명시해준 키워드들을 검색하는 겁니다.
바로 사용법 확인해볼게요 ㅎㅎㅎ
| <meta name="subject" content="안녕하세요 이민준입니다.">
<meta name="title" content="meta"> <meta name="author" content="minjuneLee"> <meta name="keywords" content="<meta>, 홈페이지 강좌, 이민준"> |
<meta> 태그는 name 속성과 content 속성으로 이루어져 있습니다. 위의 태그를 실제로 사용해 보실 분은 아무래도 실무를 뛰고 계시는 분들이라고 생각이 되는데요. 저는 그냥 처음 시작하는 분들께 너무 어렵게 다가가지 않도록 하기 위해서 가장 친숙한 keywords 부분만 설명 하겠습니다.
이 keywords 부분은 검색 엔진에게 홈페이지 검색 키워드를 제공합니다. 즉, 네이버에 ‘홈페이지 강좌‘라고 검색을 하면 제 홈페이지가 나와야 하는 것이죠.
물론 요새는 그렇게 잘 나오지 않지만요 ㅎㅎㅎㅎㅎ
이 정도면 그냥 어떤거구나 하고 감이 오시겠죠???? ㅎㅎㅎㅎ
그리고 또 하나의 <meta> 태그의 기능은 웹 브라우저에 메시지를 전달하는 기능이라고 말할 수 있겠습니다.
가장 자주 사용하시게 될 부분은
| <meta http-equiv="refresh" content="5; url=http://tistory.com/"> |
입니다. 바로 쉽게 보실 수 있으실 텐데요.
원래 <meta> 태그에서 name 부분이었던 속성이 http-equiv로 다른 속성으로 변경 되었습니다. 이 것은 위에도 말씀 드린 것처럼 브라우저의 상태를 나타내는 것입니다. 브라우저에서 저 줄을 실행 시키게 되면 페이지가 refresh 상태가 되는 것입니다.(다시 로딩) 끝의 conent의 내용에서 5는 refresh가 적용되는 초를 나타내고, url은 http://tistory.com 으로 페이지를 refresh 한다는 의미입니다.
이 부분은 매우 유용한 부분으로 앞으로 홈페이지를 제작하시는 분들께 매우 중요한 역할을 해 줄 것입니다.
생각보다 연재를 하는데 엄청 오래걸리네요. 앞으로 저 많은 카테고리를 제가 아는 내용들로 가득 채우려면,,,,,,,
생각만해도 암담 ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
그래도 꾸준히 기다려 주실 수 있으시죠???
제 블로그에 모든 내용이 가득 찰 때까지,
홈페이지 제작의 기초가 될 수 있는 그날이 올때까지 열심히 달려보겠습니다!!!!!
여러분의 댓글은 제게 매우 큰 힘이 됩니다!!!!
'Web Programing Language > HTML' 카테고리의 다른 글
| html - <body>태그란? - 문자를 다루는 태그를 알아봅시다. (p, br , hr태그) (0) | 2012.07.19 |
|---|---|
| html - <body> 태그란? (0) | 2012.07.19 |
| HTML의 기초 - 4 (<head> 태그의 사용) (0) | 2012.06.29 |
| HTML 의 기초 - 2 ( <head>태그의 사용 ) (0) | 2012.06.20 |
| 첫 글 테스트겸 html의 기초 (0) | 2012.06.18 |
