Snippet 본문

확장형

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
PC
설명
2줄 이상의 확장형
미리보기
Html
<ol class="rank_comm">
    <li class="fst">
        <span class="img_sample ico_rank ico_rank1"></span>
        <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>
        <span class="img_sample ico_rank ico_rank2"></span>
        <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>
        <span class="img_sample ico_rank ico_rank3"></span>
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타</a>
        </span>
        <span class="info_change">
            <span class="img_sample ico_stay">변동없음</span>
        </span>
    </li>
    <li>
        <span class="img_sample ico_rank ico_rank4"></span>
        <span class="tit_rank">
            <a href="#none">롯데시네마 라페스타</a>
        </span>
        <span class="info_change">
            <span class="img_sample ico_new">신규진입</span>
        </span>
    </li>
    <li>
        <span class="img_sample ico_rank ico_rank5"></span>
        <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:100%;height:10px;margin-top:4px;clear:both}
.rank_comm .fst {margin-top:0}
 
.rank_comm .ico_rank {display:block;float:left;width:14px;height:13px;margin:2px 6px 0 0;text-indent:-999em}
.rank_comm .ico_rank1 {background-position:0 -120px}
.rank_comm .ico_rank2 {background-position:0 -150px}
.rank_comm .ico_rank3 {background-position:0 -180px}
.rank_comm .ico_rank4 {background-position:0 -210px}
.rank_comm .ico_rank5 {background-position:0 -240px}
 
.rank_comm .tit_rank {overflow:hidden;float:left;width:130px}
 
.rank_comm .info_change {float:right;width:30px;margin-top:3px;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 ] 바로가기