Snippet 본문

기본형

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
PC
설명
1줄 고정 노출형
미리보기
Html
<ol class="rank_comm">
    <li class="bg_rank1">
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타데시네마라페스타</a>
        </span>
        <span class="info_change">
            <span class="txt_num">540</span>
            <span class="img_sample ico_up">상승</span>
        </span>
    </li>
    <li class="bg_rank2">
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타</a>
        </span>
        <span class="info_change">
            <span class="txt_num">64</span>
            <span class="img_sample ico_down">하락</span>
        </span>
    </li>
    <li class="bg_rank3">
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타</a>
        </span>
        <span class="info_change">
            <span class="img_sample ico_stay">신규진입</span>
        </span>
    </li>
    <li class="bg_rank4">
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타</a>
        </span>
        <span class="info_change">
            <span class="img_sample ico_new">신규진입</span>
        </span>
    </li>
    <li class="bg_rank5">
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타</a>
        </span>
        <span class="info_change">
            <span class="img_sample ico_stay">변동없음</span>
        </span>
    </li>
</ol>
CSS
.img_sample {background:url(/snippet/image?idx=44) no-repeat}
 
.rank_comm {overflow:hidden;width:180px}
.rank_comm li {position:relative;width:160px;margin-top:4px;padding-left:20px;background:url(/snippet/image?idx=44) no-repeat}
 
.rank_comm .bg_rank1 {margin-top:0;background-position:0 -118px}
.rank_comm .bg_rank2 {background-position:0 -148px}
.rank_comm .bg_rank3 {background-position:0 -178px}
.rank_comm .bg_rank4 {background-position:0 -208px}
.rank_comm .bg_rank5 {background-position:0 -238px}
 
.rank_comm .tit_rank {display:block;overflow:hidden;margin-right:30px;white-space:nowrap}
 
.rank_comm .info_change {position:absolute;top:3px;right:0;line-height:12px}
.rank_comm .info_change .txt_num {float:right;margin-left:2px;font:10px tahoma;color:#8c8c8c}
.rank_comm .info_change .img_sample {float:right;margin-top:3px;text-indent:-999em}
.rank_comm .info_change .ico_up {width:7px;height:7px;background-position:0 0} /* 상승 */
.rank_comm .info_change .ico_down {width:7px;height:7px;background-position:0 -30px} /* 하락 */
.rank_comm .info_change .ico_stay {width:5px;height:4px;background-position:0 -57px} /* 변동없음(보합) */
.rank_comm .info_change .ico_max {width:5px;height:4px;background-position:0 0} /* 상한 */
.rank_comm .info_change .ico_min {width:5px;height:4px;background-position:0 -30px} /* 하한 */
.rank_comm .info_change .ico_new {width:22px;height:5px;background-position:0 -90px} /* 신규진입 */

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기