* main *

* BBS *

* gallery *

* profile *

* link *



[카테고리]

* 음악 *
* 잡담 *
* SOOL *
* 물건들 *
* 이런저런 추억 *
* 책 이야기 *
* 여행의 추억 *

* 잡다한 고찰 *
* 컴퓨터 관련 *
* 이런저런 메모 *
* 공지사항 *

* 추억의 게임 *
* 추억의 애니 *
* 만화책 이야기 *
* 미드 이야기 *
* 매직 더 개더링 *


[최근 댓글]

야외 운동의 단점이 기후의 영향을 ...
  by 아이어스
 
2019-09-08

오호 저에게도 도움이 되는 글이군...
  by 아리무스
 
2019-09-07

일립티컬이 정말 좋더라.모바일 스...
  by 아이어스
 
2019-09-06

오 역시 일립티칼을 써야 하는 군요...
  by perplex
 
2019-09-05

사실 기구가 좋긴 한데, 흠. 처음에...
  by 아이어스
 
2019-09-04

어이쿠!! 감사합니다. 일단 글 긁어...
  by perplex
 
2019-09-04

그랬구나... 우리나라는 약사 등 의...
  by 아이어스
 
2019-08-27

헉...;;; 네...쓴 경험으로 배우신 ...
  by perplex
 
2019-08-26

사실 레몬과 식초까지 다 해봤는데 ...
  by 아이어스
 
2019-07-26

생선요리 비린내에는 팬에 가루녹차...
  by 나무늼
 
2019-07-26

성분 표시는 모든 성분을 다 표시하...
  by 아이어스
 
2019-07-24

ㄷㄷㄷㄷㄷ 성분표시에 낚이셨군요....
  by 아리무스
 
2019-07-24

hi hi
  by 아이어스
 
2019-05-17

hello hello
  by mooner
 
2019-05-17

아....이럴 수가...그건 참 슬픈일...
  by 아델라이데
 
2019-05-13


추억의 상자


Category List admin  
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 06편 : 메타 태그
 

#1. 메타태그

메타 태그란 일반적으로 head태그 안에 사용해주는 '설정'의 일부라고 생각하시면 됩니다.
접속하는 웹브라우저와 검색엔진이 볼 수 있는 정보를 표시해주는데,
어떤 것은 필수이며, 어떤 것은 필수는 아니지만 최근에 각광을 받고 있는 중요한 태그입니다.

[ META 태그]
메타태그는 발음 그대로 <META> 이렇게 써줍니다.
열고 닫는 것 없이 그냥 저렇게만 써줍니다.

단지 다른 태그와는 다르게 각 용도별로 여러 개의 메타태그를 써줍니다.
그래서 head 태그 안에는 보통 여러 개의 메타 태그가 포함됩니다.

메타태그는 예상하신대로 용도별로 속성과 사용 방법이 있습니다.
우선 메타태그에서 가장 중요한, 필수인 사용법을 하나 살펴보겠습니다.

[ 웹 브라우저에게 html문서에서 사용하는 언어를 알려주자 ]
지금까지 인터넷을 하면서 한 번쯤은 글자가 이상하게 깨져있는 웹페이지에 접속해본 적이 있을 겁니다.
분명히 한국어로 된 홈페이지인데도 글자는 전혀 알아볼 수 없게 되어있는 곳.
혹은 다른 곳은 다 멀쩡한데 페이지 한 중간의 글씨가 알아볼 수 없게 되어있는 곳.
이런 곳들은 모두 지금 이야기하는 메타태그를 지정해주지 않았기 때문에 문제가 발생한 곳들입니다.

웹브라우저는 인터넷의 웹페이지에 접속하면 저희가 작성한 html 을 포함해서 다양한 컴퓨터 언어를 읽어들이고 처리합니다. 이것을 '인코딩'이라고 하는데 사실 특정 국가의 언어만이 아닌 더 넓은 의미입니다. 하지만 저희는 몰라도 됩니다.

요는 이것을 지정하지 않으면 웹브라우저가 어찌할줄 몰라하다가 대충 표시를 해서 글자가 다 깨지게 됩니다. 그러므로 잘 지정해줍시다. 방법은 아래와 같습니다.


<META http-equiv="Content-Type" content="text/html; charset=EUC-KR">


메타 태그는 자세하게 분석해서 알 필요는 없습니다.  그냥 이걸 썼을 때 어떤 효과가 있는지만으로 충분합니다. 만약 나중에 어떤 필요에 의해서 이 태그의 값을 바꿔주게 될 경우 charset=EUC-KR 이 부분을 바꿔주게 될 것입니다. 우선은 그 정도만 알고 넘어가면 됩니다.


그 외 주요 메타태그
<META name="author" content="제작자"> : 홈페이지를 만든 사람의 이름을 써주는 태그입니다.
<META name="copyright" content="저작권자"> : 홈페이지의 저작권을 갖고 있는 사람의 이름을 써줍니다.
<META name="keywords" content="검색어"> : 검색엔진이 해당 페이지를 읽을 때 힌트가 될 검색어들입니다. 콤마로 구분해서 여러개를 씁니다.
<META name="description" content="설명"> : 검색엔진이 참고할 페이지의 설명을 기입합니다.
<META name="robots" content="noindex"> : 검색엔진이 이 페이지를 취급하지 못하게 합니다. (강제력이 있는 건 아님)

<META http-equiv="refresh" content="시간; url=웹페이지 주소"> : 해당 사이트 접속 시 지정 시간(초 단위) 경과 후 자동으로 url에 지정된 사이트로 이동합니다.


메타 태그는 사용하시고 싶은걸 그냥 쭈욱 나열해서 적으시면 됩니다.
예를 들어 위의 태그를 다 쓰고 싶으시면 그냥 다 써버리시면 다 적용됩니다.

이 정도만 알아두면 충분하겠네요. 관심이 있는 분은 더 찾아보시기 바랍니다.
참고로 검색엔진과 관련된 부분은 최근 검색엔진 친화형 사이트라는 개념이 떠오르면서 중요하게 부각되고 있답니다.


#2. 웹페이지에 이름을 달아주자

[ title 태그]

이건 기본 중의 기본이지만 head 태그 내부와 연관있는 것이라서 지금 이야기합니다.
웹페이지에 접속하면 브라우저 좌측상단에 페이지의 이름이 뜨죠?
예를 들면 네이버에 접속하면 네이버라고 뜨고, 제 홈페이지에 접속하면 '추억의 상자'라고 뜨고.
저 이름을 페이지마다 지정해줄 수 있습니다. (지정하지 않으면 untitle이던가 이상한 글자 뜹니다.)

title 태그는 head 태그 안에서 써서 페이지의 이름을 써줍니다.
방법은 다음과 같습니다.

(예)
<head>
     <title>페이지 이름</title>
</head>


끝입니다. 쉽죠?
앞으로 3강 남았습니다 그러면 html 끝입니다.


2012-08-17 05:26:08 | [Comment(0)]




   ☆computer

컴퓨터를 포맷했습니다-_-;  2014-01-21
SNS 플러그인 설치  2012-09-12
[JAVA SCRIPT] getElementById()  2012-09-05
[HTML] link 태그 숏 컷 아이콘 지정  2012-09-03
SEO - 검색엔진최적화  2012-08-22
강아지랑 송아지도 만들 수 있는 CSS 강좌  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 08편 : 그 외   2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 07편 : 폼  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 06편 : 메타 태그  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 05편 : 프레임  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 04편 : 테이블  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 03편 : 글자쓰기와 이미지 출력, 하이퍼링크  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가?  2012-08-17
강아지랑 송아지도 만들 수 있는 홈페이지 강좌 - 인트로  2012-08-17
Chrome 브라우저 등에서의 style.display 속성문제  2012-08-07
사이트맵을 만들어보자  2012-07-31
robots.txt  2012-07-31
[JAVA SCRIPT] 코멘트 창 불러오기  2012-07-31
[mySQL] select로 검색  2012-07-31
[PHP] 따옴표 사용 문제  2012-07-31
[PHP] 정규표현식으로 깨진 문자 없애기  2012-07-31
[HTML] <nobr></nobr>  2012-07-31
컴퓨터 관련된 게시물을 정리하려고 합니다.  2012-07-31








猫愛 - MyoAe - Homepage Mode
Ver. 1.45

by Aierse