(1)

<!DOCTYPE HTML

이것은 어떤걸 의미하나요??
>

http://webstoryboy.co.kr/refer/refer_html/dtd.html

문서타입 설정(DTD)

문서타입 설정

HTML 4.01

  • Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 1.0

  • Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 1.1

  • 아시아 언어를 지원하기 위한 문서 유형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

<!DOCTYPE html>

* 비교: 스마트폰에서 홈페이지 접근시 아라비아 글자로 깨져 나오는 예:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>붓 </title>
<meta name="generator" content="Namo WebEditor v3.0">
<style type="text/css">
<!--
p {font-seize:12px; line-height:2;}
-->
</style>
</head>
 
<body bgcolor="#dddddd" text="black" link="blue" vlink="purple" alink="red">
................

** 해결 방법:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

현재소스에 utf-8 로 지정되어 있으면 utf-8 대신에 euc-kr 로 바꿔 보셔야 할 것 같습니다.

(아래 같이 바꾼 후 글자 안 깨짐)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>사해 가는 길</TITLE>
<!--
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-->
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
p {font-seize:12px; line-height:2;}
-->
</style>
</HEAD>
<BODY bgcolor="#ccffff">
....................

관련링크

목록

본문

Document Type(DTD)에 따라서 다르게 표현되는 현상이 확인되어 포스팅 합니다.

일반적으로 사용하는 DTD 형식은 다음과 같습니다.

HTML 4.01 Transitional
HTML 4.01 Strict
HTML 5
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.1
XHTML 1.1
XHTML Mobile 1.0


위의 2개의 HTML 화면이 있습니다. Tabel 로 구성된 HTML 문서이며, DTD 형식이 다릅니다.


DTD 사용시 표현방법에 따라서 아래와 같이 오류와 정상으로 표시되는 것을 정리했습니다.
그외의 것들은 Table 이 아닌 DIV 를 사용해서 화면 구성해야만 의도한 모습으로 표현이 되니 사용이 주의가 요합니다.

1) < 정상 > HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

2) < 오류 >HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

3) < 오류 > HTML 5
<!DOCTYPE html>
<html lang="ko">

4) < 정상 >XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

5) < 오류 >XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

6) < 오류 >XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

7) < 오류 >XHTML Mobile 1.0
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


이것에 대한 해결방법이나 이유를 아시는분 코멘트 부탁드립니다.
>
 
테이블 하고 css 소스를 봐야 답변이 달릴듯합니다.

>
독타입에 따라 다르게 표현되는거 맞아요
CSS 아무리 적용해도 독타입때문에 오류 생기기도 하더라구요
>
무조건 1px의 귀신사이즈가 생김. margin border padding 없에도 오류있는 독타입은 문제가 많아요

>
테이블 하고 css 소스를 봐야 답변이 달릴듯합니다. 2人
>
테이블이 깨지는 현상은 CR/LF 코드를 특수문자로 인식할 때 나타났습니다. 브라우저 마다 소스코드 편집기에서 붙게 되는 개행문자를 무시하는 것도 있고 인식하는 것도 있었습니다.
편집기에서 엔터를 쳐서 줄바꿈을 하면 문자열 끝에 이런 개행 문자가 붙는다는 건 자료구조 시간에 다 배우는 것이니...
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
두 개의 독타입을 봤을 때 xhtml 규정을 loose, transitional로 엄격하지 않게 적용했을 때 테이블이 깨지지 않는 걸로 봐서 css 보다는 브라우저 종류와 버전에 영향이 있는 거 같습니다.
CR/LF를 특수문자로 해석해서 브라우저에 송출했을 때 table 태그를 해석 할 때 이것을 무시하느냐 그대로 브라우저에 출력하느냐에 차이가 있는 거 같습니다. loose나 transitoinal은 그렇게 까다로운 독타입이 아니니 아마도 태그 해석 할 때 특수 문자(눈에는 보이지 않지만 저장 했을 때 바이너리 코드 형태로 존재하는)는 무시하는 게 아닐까 싶네요.

약 2,3년 전에 이런 테이블 개행문자 인지로 인한 테이블 깨짐 현상을 접했는데 물론 제가 틀렸을 수도 있습니다. 코드를 봐야 알겠지만 당시에는 <tr><td> 태그를 개행하지 않는 걸로 해결을 봤습니다.
>
개행으로도 재미 볼 수 있고요...
font-size:0px;
을 넣어주시면 원하는 사이즈로 변경 됩디다..
>
폰트 사이즈를 0 으로... 오..
테스트 해봐야겠네요. 감사합니다.


(4) <meta name="GENERATOR" content="TAGFREE Active Designer v3.0"> 이게 뭔가요.?
gud****
 

html문서 보니

<meta name="GENERATOR" content="TAGFREE Active Designer v3.0">

위와 같은 메타 테그가 들어 있던데요...이게 무었을 의미 하는지..

또 테그에 어떤 효과가 나타 나는지 알려주세요..꾸벅...

질문자 채택

punchto님의 답변입니다.

채택답변수5
2010.06.10. 13:44

질문자 인사

답변 덕분에 많이 알아갑니다!

홈페이지 HTML 소스 상단에 삽입하여,

이 페이지가 어떤페이지인지를 표기하는 메타태그입니다.

이 메타태그를 잘 정리해서 삽입해놓으면,

검색엔진 로봇이 읽어가서 검색엔진의 상위에 뜰 수 도 있는 유용한 기능입니다.

---------------- 메타태그 정리 ----------------

<META name="generator" content="저작 프로그램">
홈페이지를 만드는데 사용한 프로그램 프로그램 이름을 넣으려면 content="EditPluse 3.0.2" 과 같은 식으로 적으시면 됩니다.

<META name="author" contents="제작자 이름">
홈페이지를 만든 제작자를 넣으려면 content="놀라운넘" 와 같이 적으시면 됩니다.

<META name="keywords" content="Key or Tag">
홈페이지가 담고 있는 내용을 content="[Tip] META태그의 모든것" 와 같이 ',' 를 단어 사이에 넣어 나열하시면 됩니다.
검색엔진에서 검색어를 입력하고 찾기를 할 때 불러들이는 부분들입니다. 메타태그의 핵심기능이라고 할 수 있습니다.


<META name="description" content="간략한 설명">
홈페이지에 대한 간단한 소개글을 적습니다.

<META http-equiv="refresh" content="3; url=http://tuning.egloos.com">
3초 후에 http://tuning.egloos.com 로 자동으로 이동하게 하는 옵션입니다.


<META http-equiv="Pragma" content="no-cache">
캐쉬에서 해당 페이지를 읽어들이는 걸 방지합니다. 들어올 때마다 새로고침을 한 것과 같은 효과입니다

정리내용 출처 : http://tuning.egloos.com/3614011
그 외 참고 : http://nlife4u.tistory.com/301 
>
>

 meta name = robots 에관해서
sha****
질문 10건 질문마감률57.1%
2009.01.23. 09:34
추천 수0
답변
1
조회
3,361

meta 태그에 대해서 궁금한 점이 있어서요

홈페이지 공부중인데

어떤 홈페이지가 meta name="Robots"이라는 걸 사용하더라고요

그래서 인터넷에 찾아보니 아래와 같은 내용이 나왔습니다.

http://tong.nate.com/ramieee/47957988

근데..

<meta name="Robots" content="ALL">
<meta name="Robots" content="index,follow"> //이 문서도 긁어가고 링크된 문서도 긁어감
<meta name="Robots" content="noindex,follow"> //이 문서는 긁어가지 말고 링크된 문서만 긁어감
<meta name="Robots" content="index,nofollow"> //이 문서는 긁어가고 링크는 무시함
<meta name="Robots" content="noindex,nofollow"> //이 문서도 긁지 않고 링크도 무시함

여기에서 긁어간다 라는 표현이 무슨 뜻인가요?

문서를 어딘가에 저장한다는 건가요?

이걸하면 속도저하가 생기지 않나요?

가르쳐주세요 고수님!

질문자 채택이 되지 않은 경우, 질문 최종 수정일 기준으로 15일 경과되어 추가 답변 등록이 불가합니다.

답변

sss7411님의 답변입니다.

채택답변수23
2009.01.30. 21:59

긁어간다는 표현은 정보를 수집해간다는 뜻입니다.

홈페이지 공부중이시라니 메타태그에 대해서는 아시리라 생각되고요...

보통 검색에이전시는 수많은 웹페이지를 다니며, 정보를 수집하는데요....

첫번째로 메타태그 관련 정보를 수집하겠지요...

검색에이전시(로봇)이 정보를 수집해갈때, 옵션을 주어 수집해가거나, 수집안해가거나...란 뜻으로 보여집니다.

이렇게 수집된 정보를 가공하여, 네이버나 기타 다른 검색업체들이 서비스를 하지요...

또한 속도저하와는 그리 상관없습니다.



(5)

홈페이지에서 소스 보니깐

<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta name="keywords" content="">
<meta name="description" content="">
< link href="/2003/style.css" rel="stylesheet" type="text/css">

이렇게 되있었는데;;

제가이제 막 시작하는단계라....개념이 안잡혀있네요...

해석좀 해주세요....

racue750님의 답변입니다.

채택답변수143
2009.07.12. 16:21

질문자 인사

답변 덕분에 많이 알아갑니다!

html문서이고 문자 코드는 한글 코드 중에 euc-kr로 지정

<meta http-equiv="content-type" content="text/html; charset=euc-kr">

아래 두 문장은 현재페이지를 웹브라우저에 캐시를 허용하지 않도록함.
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

현재 웹 페이지에 대한 키워드를 지정

<meta name="keywords" content="">

현재 웹페이지에 대한 설명을 지정
<meta name="description" content="">

sytle.css라는 화일에있는 스타일 시트를 이용.
<link href="/2003/style.css" rel="stylesheet" type="text/css">

위의 문장들은 asp와는 전혀 상관없이 html과 css에 대한 내용들입니다.

html을 공부해보면 관련 내용들이 나와있습니다.

>
kwang0481님의 답변입니다.

채택답변수57
2006.10.15. 16:08

하이퍼텍스트 생성 언어(HTML) 문서의 맨 위쪽에 위치하는 태크. HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저검색 엔진을 사용할 수 있도록 문서의 정보를 포함하고 있다.

태그 설명 및 기본형식

META태그는 와 태그에 입력하는 특수 태그입니다. 화면상에 직접 나타나지 않지만 많은 기능을 가지고 있습니다.


① : META태그의 이름을 입력하는 부분
② : META태그의 값을 입력하는 부분

META태그의 여러기법

◈ 한글 폰트로 페이지 나타내기
<★META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-kr">

웹 페이지를 기본적으로 한글 폰트로 인코딩할 때 사용됩니다. 홈페이지를 만들때 우리가 자주 사용하는 태그에서 글자체를 돋움으로 지정해도 브라우저에서 한글속성을 인식못해 아무 반응도 나타나지 않는 경우가 있는데 이 경우 사용합니다. 그리고 자바애플릿 실행시 한글이 깨져 나올때도 이 태그를 사용하여 해결하기도 합니다. 만약 깨지지 않을 경우 이 태그 사용시 반대의 결과가 발생하기도 합니다.

◈ 검색엔진 키워드 검색에서 내 사이트 맨 위에 뜨게 하기
<★META HTTP-EQUIV="keywords" CONTENT="홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지">

검색엔진에서 키워드 검색을 해보면 출력되는 자료가 수없이 많습니다. 그 중에서 상위 리스트에 출력이 된다면 아마도 여러분의 홈페이지에 방문자수가 약간 늘어 날 것입니다. 그래서 위와 같은 태그를 홈페이지내에 삽입하면 "홈페이지"라는 키워드로 검색을 하면 일치도가 100%가 되어 리스트의 상위에 위치하게 됩니다. 홈페이지 홍보를 위한 좋은 방법이라고 생각이 됩니다.

◈ 일정 시간 경과 후 자동으로 다음 페이지 로딩하기
<★META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.ibm.com">

자신의 홈페이지가 다른 곳으로 이동해 방문자가 이전의 홈페이지에 방문했을때 자동으로 바뀐 주소로 이동하게 하거나 첫 화면에 회사 로고를 몇 초 보여준 후 회사 메인 홈페이지로 들어가게 하거나 여러 장의 웹 문서를 슬라이드 효과를 나타내는 데 이용되는 태그 입니다. 위의 태그의 경우 5초후 IBM(http://www.ibm.com)사의 홈페이로 이동한다는 뜻 입니다.

◈ TRANS META 태그 효과
<★META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans (Duration=3, Transition=23)">

메타태그는 페이지를 나갈때나 들어올때 여러가지 효과로 페이지를 나타나게 하는 Trans Meta 태그입니다. 이 메타태그는 넷스케이프에서는 지원을 하지 않고 프레임을 가진 문서에도 지원을 하지 않는 단점이 있습니다.
>

4872net님의 답변입니다.

채택답변수165
2006.10.15. 18:31

메타 태그란? 

메타 태그란 자신의 홈페이지에 관한 정보를 담아놓는 장치입니다.
그 종류에는 여러 가지가 있습니다. 메타 태그는 head 와 /head 사이에 들어가는데,

그 종류별로 알아보도록 하겠습니다.
검색사이트의 원하는 정보를 쉽게 찾아주는 검색로봇이라는게 있는데, 그 검색 로봇이

검색하기위한 키워드를 지정해 줄 수도 있고 자동으로 다음 페이지로 이동 시킬수도

있습니다.

그럼 메타태그의 종류를 알아 보도록 하겠습니다.

① <★meta http-equiv="content-type" content="text/html:charset=euc-kr">

이 메타태그는 현재의 문서가 한글로 작성되었다는 것을 의미 합니다.
굴림체란 글꼴을 지정하고 이 메타태그를 지정하면 브라우저에서 굴림체의 글꼴을 볼

수 있습니다. 이 메타태그를 쓰지 않는다면 기본 글꼴만 볼 수 있습니다.
☞ 드림위버에서 html문서를 편집할려면 ①번 메타태그는 꼬옥 삽입되어 있어야 합니다.


② <★meta http-equiv="refresh" content="5;url=http://옮길 홈페이지 주소">

예전의 다른 주소에서 새로운 홈페이지 계정을 얻어 주소를 옮기는 경우가 있을 겁니다.
지금까지 가지고 있던 홈페이지의 인트로 화면의 head 부분에, 위에 보이는 것과 같은

메타태그를 넣어 주시면 지금까지 가지고 있던 홈페이지에 방문객이 들어 왔을 때 자동

으로 새로 옮기는 홈페이지 주소로 접속을 하게해줍니다.

content=5 라고 적은 것은 5초후에 url 에 적힌 주소로 이동한다는 말입니다.


③ <★meta name="keyword" content="Flash,강좌,스타일시트">

이 메타매그는 검색로봇이 검색하기위한 키워드를 입력하기위한 태그입니다.
이 부분을 잘써야지 검색했을때 자신의 홈페이지가 검색랭킹의 상위에 올라가게됩니다.
키워드를 이용하여 자신의 홈페이지를 상위에 올리는 방법에는 키워드의 위치, 키워드의 빈도, spam words 에 따라 달라집니다.
키워드는 "기호, 숫자, 영문, 한글" 순으로 나열하는 것이 좋습니다.
왜냐하면 검색엔진이 앞에와 같은 순서로 홈페이지를 검색하기 때문입니다.
그리고 중요한 단어는 앞에다 먼저 위치시키는게 좋습니다.
물론 영문과 한글 2개의 같은 단어가 있을 때 영문을 앞에 써야 겠지요.
키워드의 갯수에도 어느정도 제한이 있는데 보통 200개 정도까지는 허용되지만 키워드의

갯수가 많아지면 키워드의 빈도가 떨어지기 때문에 우선 순위에 밀려 나오므로 적당히

쓰는게 좋습니다.


④ <★meta name="decription" content="여기는 홈제작강좌를 합니다.">

여기에는 해당 페이지의 내용을 요약하여 서술합니다. 검색엔진이 검색결과를 출력할 때

이 내용이 브라우저에 나타납니다. 즉 해당 웹페이지에 대한 설명을 위하여 이 태그에

적혀있는 내용을 출력한다는 것입니다.
대부분의 사람들이 이 내용을 보고 사이트에 들어갈 것인가를 결정하기 때문입니다.
따라서 페이지의 내용을 잘 요약하여 서술문으로 보기좋고 깔끔하게 작성하는게 중요

합니다. 보통은 검색엔진마다 차이는 있지만 최대 150자를 넘기지 않는 범위에서 중요한

단어들을 호감이 가도록 구성하는 것이 좋습니다.


⑤ <★meta name="author" content="FlashBOY">

홈 페이지의 작자에 대한 정보를 담고있는 메타태그입니다.


⑥ <★meta name="classification" content="Flash와 ActionScript 강좌">

어떤 형식의 홈 페이지인지 분류하는 메타태그입니다.


⑦ <★meta name="generator" content="아름이가 태그로 직접작성">

홈 페이지를 무엇으로 만들었는지 확인하는 메타태그입니다.

** 메타 태그란? (http://cafe.naver.com/namowep/1977)

Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다.(inflearn)



TABLE tag를 대체하는 DIV tag


이 게시물을..