튜토리얼 - 올블로그

CSS 제약조건

다음과 같은 제약사항이 있습니다.

  • media 문은 무시됩니다.
  • @rule은 사용할 수 없습니다.
  • CSS rule은 html, head와 그 아래에 속하는 태그를 포함할 수 없습니다.
  • CSS rule은 특정 HTML id를 지칭하는 # 제어자를 사용할 수 없습니다.
  • 다른 사항에 대해서는 사용자가 이용하는 브라우저의 기능을 따릅니다.

XHTML 제약조건

  • id, accesskey 속성을 사용할 수 없습니다.
  • onclick, onmouseover 등과 같은 이벤트 핸들러 속성을 사용할 수 없기 때문에 자바스크립트를 통해 동적으로 이벤트를 지정해야 합니다.
  • a 태그의 href 속성은 "javascript:"로 시작하는 값을 가질 수 없습니다.
  • Internet Explorer에서 인식하는 conditional comment는 지원하지 않습니다.
  • h1, h2, h3 태그는 위자드팩토리와 위자드닷컴에서 다른 용도로 사용 중이므로 문서의 구조화를 위해 사용을 지양해 주십시오.
<style type="text/css">
/*<![CDATA[*/
body {
    background: #ffffff;
}
div.container {
    border: 1px solid #b6b6b6;
}
div.logo {
    background: url(http://image.widget.wzdfactory.com/wzd_allblog/logo.gif) no-repeat;
    height: 29px;
    border-bottom: 1px solid #c7c7c7;
}
div.loading {
    text-align: center;
}
ul.posts  {
    padding: 0 0 3px 0;
}
ul.posts li {
    background-image: none;
    padding: 4px 8px 8px;
    border-bottom: 1px solid #DFE5E9;
}
ul.posts li.even {
    background-color: #F4F6F7;
}
ul.posts li.odd {
    background-color: #FFF;
}
ul.posts li span.title {
    padding-bottom: 2px;
    font-family: Dotum, sans-serif;
}
ul.posts li span.title {
    display: block;
    font-weight: bolder;
    margin: 0;
    width: 100%;
    padding: 4px 0 2px;
    height: 16px;
    line-height: 18px;
    overflow: hidden;
    letter-spacing: -1px;
}
ul.posts li span.title a {
    overflow: hidden;
    color: #265EA8;
    font-size: 12px;
    text-decoration: none;
    border: 0;
}
ul.posts li span.title a:link,
ul.posts li span.title a:visited {
    text-decoration: none;
}
ul.posts li span.desc {
    display: block;
    font-size: 11px;
    color: #B5B5B5;
    padding-top: 3px;
    height: 12px;
    line-height: 14px;
    overflow: hidden;
    white-space: nowrap;
}
ul.posts li span.desc a:link,
ul.posts li span.desc a:visited {
    color: #B5B5B5;
}
ul.posts li span.desc a:hover,
ul.posts li span.desc a:active {
    color: #B5B5B5;
    text-decoration: underline;
}
div.pager {
    margin: 0;
    padding: 3px 0;
    text-align: center;
}
/*]]>*/
</style>
</head>

<body>
<div class="container">
    <div class="logo"></div>
    <div class="loading"><img src="http://image.widget.wzdfactory.com/common/wait_loading.gif" alt="Loading..." /></div>
    <ul class="posts" style="display: none;"></ul>
    <div class="pager"></div>
</div>
</body>
미리보기