말씀듣고.. > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

말씀듣고.. 정보

HTML 말씀듣고..

본문


일단 기존에 하던건 나두고

또다시새롭게 ㅎㅎ~

혹시 제가짠게 잘못된 레이아웃일까요?

지적 부탁드려요 ㅎㅎ

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title> New Document </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="style.css" type="text/css">
 </head>

 <body>
 
  <div id="whole">
 
  <div id="head">

  <div class="shortcut"></div>

  <div class="logo"></div>
 
 <div class="menu"></div>
 
 </div>
 
  <div id="contents">

  <div class="left"></div>
 
  <div class="center"></div>

  <div class="right"></div>
 
  </div>

  <div id="tail"></div>

 
  </div>


 </body>
</html>

<style>

body { text-align:center; margin:0px; padding:0px;}

#whole { width:970px; margin:auto; text-align:left; }

#head { width:970px;}
 
 .shortcut { height:22px; text-align:right; border-bottom: 1px solid #000000; }
 
 .logo { float:left; height:100px;}
 
 .menu { clear:both; height:35px;}

#contents { width:970px;}
 .left { width:250px; float:left;}

 .center { width:450px; float:left;}

 .right { width:250px; float:left;}

#tail { clear:both; }




</style>

추천
0
  • 복사

댓글 10개

블록 height 초기값이 auto여서 눈에 보이지 않는 것이에요. 내부 컨텐츠를 넣으면 그에따라 높이가 잡힙니다. float된 요소를 사용할 경우 #shortcut에는 width는 넣어주고요. #tail 블록은 #content안에 넣고요. 값이 0인경우는 px 쓰지 않아도 됩니다. 그게 편해요. 그럼 문제 없을 것 같네요.
Short Tag뿐만 아니라 Omit Tag는 HTML4.01 Transitional/에서 허용된 문법입니다. Strict에서 쓰면 안되는 것이죠. ㅎㅎ

http://www.w3.org/TR/1999/PR-html40-19990824/sgml/sgmldecl.html
self-closing 은 전적으로 xhtml 작성을 위해 예약하는 목적임으로 HTML4.01 Transitional 이던 HTML4.01 Stric이던 예약을 하기위해서는 xhtml로 바꾸시는것이 맞습니다
또한 meta는 self-close고 밑의 <link rel="stylesheet" href="style.css" type="text/css">는 self-close 가 없으세요. 일관성이없다는 말이죠
범용테그라해서 남용하게되면 해를 입게되죠

또한
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
은 <title></title>테그 위에 위치해야합니다
위처럼하면 브라우저제목은 캐릭셋이 정해지지 않기때문이에요
예를들면 http://ritchen.co.kr/ 같은사이트를 파폭에서 여시면 브라우져 제목이 꺠져서 나오는것을 보실수있을꺼에요

현제DTD를 유지하신다면
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> New Document </title>
 <link rel="stylesheet" href="style.css" type="text/css">
 </head>
이렇게 작성하시는것이 맞습니다
self-close는 상위버전에서 나온것임으로 하위버전에서 방치한것뿐이지 해당 DTD에서 self-close를 원래부터 범용으로 마련된것이 아니에요
아~우.... XHTML은 XML 문법에 맞게 써진 것이고요. XHTML과 HTML은 서로 다른 처음시작인 SGML DTD가 아닌 SGML Declaration이 전혀 다른 서브셋에 있는 것입니다. 이들은 상위나 하위버전이 아닙니다. 잘못 알고들 계신거고요.

또 HTML5라는 것을 생각만해도 왜 XHTML5는 없을까라며 추측이 가능할텐데... 이런 '전적으로'라는 말까지 써가면서 상상을 하여 결론을 내리지 않을 텐데요. HTML5문서가 XML문서로도 올바른 문서가 되기 위해서는 XML이 보다 문법적으로 까다롭기에 이를 처음부터 염두하고 작성하는 의미와 HTML4.01에서 empty tag를 처리 하는 것과 차이가 없습니다.  HTML문서를 작성하면 동시에 XML 문서로서도 유효하게 작성해 놓으면 좀더 도움이 되겠죠. 첫줄만 바꾸면 되니까.. ㅎ

그리고 마지막으로 맞냐 틀리냐와 이것이 좋다라는 것은 다른 말입니다. title위에 meta 태그가 위치하는 것은 맞냐와 틀리냐의 이야기가 아닙니다. 그렇게 이야기하면 자바스크립트 삽입전에 link나 stylesheet를 먼저 써야 한다는 것부터 여러 이야기가 가능하겠네요.ㅎㅎ 그렇지 않으면 틀리다입니까? ㅎ
XHTML 2.0이 만들어지다가 HTML5로 통합되었습니다.
그리고 XHTML문서의 XML화도 지금도 충분히 가능합니다.
XHTML DTD와 XML 선언을 동시에 써서
웹 페이지임과 동시에 하나의 XML을 만들어내는 경우도 있으니까요.
좀더 첨언한다면 갑자기 HTML5에서 통합하겠다고 해서 공중에서 이전에 오류로 보았던 문법이 허용이 되면서 통합이 되는 것은 아닙니다. 그러기 위해서는 통합이 가능한 상태에 있어야 하고요. 사실 문법적 스타일의 문제이기도 하고요.

그런 내용을 확인하려면 문서를 작성하는데 있어 SGML Declatation, SGML DTD를 살펴보아야 할 필요가 있는 것이며, 엄밀히 말하면 Strict에서의 오류는 DTD이기는 하지만, 그보다 상위에서 OMIT TAG 기능을 허용하였기 때문이며 XML의 소위 Well-formed로 self-closing tag로 받는 부분이 본래 HTML에서도 문법상에 오류가 아니었기 때문이기도 합니다.
© SIRSOFT
현재 페이지 제일 처음으로