ie 에선 position:fixed 구현이 안되므로 꽁수를 써야한다.
이전에 글을 참조하여 더욱 안정적(?)인 fixed 를 구현해보고자 한다.

html 태그에 overflow:auto 항목을 주는 이유는 ie 에선 기본적으로 disabled 된 스크롤바가 나타나는데 이것을 감추기 위함이다.
또한 style 마지막행에 css selector가 기술되는데 ie 에선 파싱하지 못하므로 ie 외 브라우저만 적용이 가능케 된다.


<head>

<style type="text/css">

html{overflow:auto;}

body{

    height:100%;

    overflow:hidden;

    margin:0;padding:0;

}

#body {

       height: 100%;

       overflow:auto;

}

.fixed {position:absolute;}

#body > div.fixed{ position: fixed; }

</style>

</head>

<body>

<div id="body">

       <div class="fixed">

           I'm fixed Layer.

       </div>

</div>

</body>


ie에선 position:fixed; 가 먹히지 않는다.
시중(?)에 많은 핵들이 있는데, 이만큼 간단한 것은 없는거 같다.

검색을 하다가 알아낸(http://www.cssplay.co.uk/layouts/fixed.html) 방법인데, 아주 간단합니다.

body{
    height:100%;
    overflow-y:auto;
}

/* Fixed 할 Element */
.fixed_div{
    position:absolute;
}

XHTML 이란?
XHTML 1.0 은 html 4.01 방식과 동일한 문서 구조를 갖는 xml 이다. 즉, html 이 아니며, xml 구조를 가져감으로써, PC 인터넷 환경을 떠나 모바일 등 많은 외부 머신에도 작동할 수 있는 유연함 및 확장성을 가지고 있다. 또한 dtd 추가 등으로 인해 문서 구조를 확장할 수 있는 이점도 있다.

XHTML 작성법
  1. 문서 header 에  xhtml 을 선언한다. (html 작성시에도 문서 선언은 중요하다. )
    이 문서 선언이 있지 않는 한, 브라우저는 구버젼 방식(2.0, 3.0)으로 화면을 표현하므로, 표준에 의해 의도한 문서 화면이 안 나타날 수 있다. (strict 은 엄격한 지원으로서 표준에 의거하여 작성하지 않으면 정상적으로 표현하지 않는다. tranditional 은 기존 방식을 지원한다. 대세는 strict 이지만, 현재 반드시 strict 을 지원하기 위해 대규모의 소스를 수정할 필요까지는 없다. 따라서 tranditional 을 채택하면 무난하게 작업을 진행 할 수 있다)

    xhtml 문서 최상단에 아래의 문장을 기술한다.
    • xhtml 1.1  선언
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    • xhtml 1.0 tranditional 선언
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • xhtml 1.0 strict 선언
      <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org./TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. html 태그에 네임스페이스를 지정한다. 언어 속성은 변경해 줄 필요가 있다.
    <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8" xml:lang="utf-8">
  3.  모든 태그들은 종료태그를 가져야한다. 기존 html 에서는 <br> 태그나 <img>, <hr> 태그 등은 종료 태그가 필요하지 않았으나, xhtml 은 xml 로서 반드시 종료 태그를 가져야한다. 즉, <br/>, <img src=”your image file”/>, <hr/> 로 작성해야한다.
  4. 모든 태그는 소문자로 작성되어야한다.
  5. 모든 속성 값들은 큰 따옴표로 둘러싸고 값을 가져아한다.
    올바름 : <input type="text" size="4" value="1234" />
    틀림 : <input type=text size=4 value=1234>
  6. html 콘텐츠에 &를 사용하면 안된다. 이 엔티티를 표현해야 한다면 &amp; 를 사용한다.
  7. 문서 구조는 html 4.01 과 동일하다.

다음은 xhtml 1.0 tranditional 버젼에 대한 예이다.
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>slothink.tistory.com : 나는 geek이다</title>
</head>
<body>
</body>
</html>

XHTML 1.1

XHTML 1.0 Strict 버젼에서 1.1로 변경된 점을 요약하면 다음과 같다.
  1. On every element, the lang attribute has been removed in favor of the xml:lang attribute (as defined in [XHTMLMOD]).
  2. On the a and map elements, the name attribute has been removed in favor of the id attribute (as defined in [XHTMLMOD]).
  3. The "ruby" collection of elements has been added (as defined in [RUBY]).
참조 : http://www.w3.org/TR/xhtml11/changes.html#a_changes

  1. 문서 선언
    html 문서 최상단에 다음의 문장을 기술한다.
    • html 4.01 strict 선언
      <!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    • html 4.01 tranditional 선언
      <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <head> 태그안에 <meta> 태그를 추가한다. 언어 속성은 변경해 줄 필요도 있다.. 대세는 utf8 이지만 i-Provision 에서는 euc_kr 을 사용한다.
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf8”>
  3. <head> 태그안에 <title> 태그를 작성한다. 이 태그를 작성하지 않으면 w3c 유효성 검사시, 신뢰할 수 없는 페이지로 인식된다.
  4. <body> 엘리먼트 안으로 넣을 수 있는 것은 오직 블록 엘리먼트들(<h1>, .. <h6>, <p>, <blockquote>, 등)뿐이다. 모든 인라인 엘리먼트와 텍스트는 <body> 엘리먼트에 들어가기전에 다른 블록 엘리먼트안에 들어가야한다.
  5. 블록 엘리먼트는 인라인 엘리먼트들 밖에 두어야한다.
    인라인 엘리먼트 안에는 반드시 인라인 엘리먼트 및 텍스만 들어올 수 있으며, 블록 엘리먼트는 들어올 수 없다. 블록 엘리먼트는 블록 엘리먼트 및 인라인 엘리먼트를 포함할 수 있다.
  6. 블록 엘리먼트는 <p> 엘리먼트 밖에 두어야한다.
    문단(<p>)은 텍스트를 위한 것으로서, 블록 엘리먼트는 문단 밖으로 두는 것이 마땅하다.
  7. 리스트는 리스트 항목만 자식으로 포함하다.
    <ol> 과 <ul> 의 자식으로 오직 <li> 엘리먼트만 사용될 수 있다.
  8. <li> 엘리먼트에는 무엇이든 넣을 수 있다.(텍스트, 인라인, 블록 엘리먼트 등)
  9. <blockquote> 는 블록 엘리먼트만 포함한다.
    인라인 및 텍스트 엘리먼트는 블록 엘리먼트에 포함시켜 <blockquote> 에 넣어야한다.
XHTML 1.1 Strict 기본 템플릿

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>

HTML 4.01 Strict

<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>

HTML 4.01 Transitional

<!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" />
</head>
<body>
</body>
</html>

font-famlily 는 일반적인 특성을 공유하는 폰트의 집합체를 담고 있다.
따라서, 특정한 폰트 지정에 얽매이고 싶지 않은 경우, 폰트 패밀리를 지정하면 된다.

  • sans-serif : 세리프가 없는 폰트들. 매우 깔끔하고 웹에서 읽기 좋다.
    • Verdana
    • Arial Black
    • Trebuchet MS
    • Arial
    • Geneva
  • serif : 세리프가 있는 폰트들. 고상하고 고전적임
    • Times
    • Times New Roman
    • Georgia
  • monospace : 타자기로 친것 같은 폰트들. 같은 간격을 가진다. 코드를 표현할 때 좋다.
    • Courier
    • Courier New
    • Andale Mono
  • cursive : 흘림체. 화려함.
    • Comic Sans
    • Apple Chancery
  • fantasy : 판타지. 화려함
    • Last Minja
    • Impact

+ Recent posts