튜토리얼 - 네이버 인기검색어

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[*/
div.container {
    line-height: 13px;
    border: 1px solid #e0e0e0;
    background: #fff;
}
div.loading {
    /* height: 210px; adjust list height */
    text-align: center;
}
div.loading img {
    margin: 10px 0;
}
div.title {
    border-bottom: 1px solid #e9e9e9;
    color: #000;
    padding: 4px;
    font-weight: bold;
}
div.title strong {
    color: #428A02;
}
div.ranking { margin: 12px 10px 0; }
div.ranking li{margin:0; height: 21px; overflow: hidden;}
div.ranking li.num01{background:url(http://sstatic.naver.com/smain/pw/ico_gnum01.gif) no-repeat;}
div.ranking li.num02{background:url(http://sstatic.naver.com/smain/pw/ico_gnum02.gif) no-repeat;}
div.ranking li.num03{background:url(http://sstatic.naver.com/smain/pw/ico_gnum03.gif) no-repeat;}
div.ranking li.num04{background:url(http://sstatic.naver.com/smain/pw/ico_gnum04.gif) no-repeat;}
div.ranking li.num05{background:url(http://sstatic.naver.com/smain/pw/ico_gnum05.gif) no-repeat;}
div.ranking li.num06{background:url(http://sstatic.naver.com/smain/pw/ico_gnum06.gif) no-repeat;}
div.ranking li.num07{background:url(http://sstatic.naver.com/smain/pw/ico_gnum07.gif) no-repeat;}
div.ranking li.num08{background:url(http://sstatic.naver.com/smain/pw/ico_gnum08.gif) no-repeat;}
div.ranking li.num09{background:url(http://sstatic.naver.com/smain/pw/ico_gnum09.gif) no-repeat;}
div.ranking li.num10{background:url(http://sstatic.naver.com/smain/pw/ico_gnum10.gif) no-repeat;}
div.ranking li a{color:#000000; letter-spacing: -1px;}
div.ranking li a:hover{text-decoration:underline;}
div.ranking li div{position:relative; margin-left:20px; padding: 1px 0 7px;}
div.ranking li div p{position:absolute; top:0; right:0; margin:0; padding:0;}
div.ranking li div p.new{position:absolute; top:0; right:5px;}
div.ranking li div p span.change_new{float:left; width:20px; height:15px; 
    background:url(http://sstatic.naver.com/smain/pw/ico_new01.gif) no-repeat 0 3px;}
div.ranking li div p span.change_up{float:left; width:7px; height:15px; 
    background:url(http://sstatic.naver.com/smain/pw/ico_up01.gif) no-repeat 0 2px;}
div.ranking li div p span.change_down{float:left; width:7px; height:15px; 
    background:url(http://sstatic.naver.com/smain/pw/ico_down01.gif) no-repeat 0 2px;}
div.ranking li div p span.num{float:left; width:32px; color:#5B5B5B; font-family:tahoma; font-size:11px; text-align:center;}
div.logo {
    background:url(http://sstatic.naver.com/smain/pw/bg_dot02.gif) repeat-x top;
    padding: 4px 5px;
}
div.logo a {
    display: block;
    text-indent: -9999px;
    background: url(http://openapi.naver.com/logo/logo07_1.gif) no-repeat right;
}
/*]]>*/
</style>
</head>
<body>
<div class="container">
    <div class="title"></div>
    <div class="loading"><img src="http://image.widget.wzdfactory.com/common/wait_loading.gif" /></div>
    <div class="ranking" style="display: none;"></div>
    <div class="logo"><a href="http://dev.naver.com/openapi" target="_blank" >naver openapi</a></div>
</div>
</body>
미리보기