Snippet 본문

기본형

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/11)
Type
Mobile
설명
1줄 고정 노출형
미리보기
Html
<ol class="list_issue">
	<li class="fst">
		<a href="#none" class="link_issue"><em class="num_issue">1</em><span class="screen_out">위</span><span class="txt_issue">새만금특별법 심의통과 글자가 길어질 경우우우우우우우우우우</span><em class="state_issue"><span class="num_rank">86</span><span class="img_g ico_down">하락</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">2</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="num_rank">18</span><span class="img_g ico_up">상승</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">3</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="img_g ico_new">신규진입</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">4</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="img_g ico_stay">변동없음</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">5</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="num_rank">86</span><span class="img_g ico_down">하락</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">6</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="img_g ico_stay">변동없음</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">7</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="img_g ico_new">신규진입</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">8</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="num_rank">86</span><span class="img_g ico_down">하락</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">9</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="num_rank">86</span><span class="img_g ico_up">상승</span></em></a>
	</li>
	<li>
		<a href="#none" class="link_issue"><em class="num_issue">10</em><span class="screen_out">위</span><span class="txt_issue">김태희 시구사진</span><em class="state_issue"><span class="img_g ico_new">신규진입</span></em></a>
	</li>
</ol>
CSS
.img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/511B2F70057D270002) no-repeat 0 0;text-indent:-9999px}

/* high resolution image */
/* ratio 1.5 */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/511B2F6205194B0001);-webkit-background-size:124px 124px;background-size:124px 124px}
} 
/* ratio 2 */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/511B2F5505710F0002);-webkit-background-size:124px 124px;background-size:124px 124px}
}


.list_issue {width:100%;border-bottom:1px solid #dfe1e4}
.list_issue li {overflow:hidden;position:relative;width:100%;height:32px;border-top:1px solid #f6f6f6}
.list_issue .fst {border-top:0 none}
.list_issue .link_issue {display:block;overflow:hidden;height:33px;padding:0 50px 0 12px;font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.link_issue .num_issue {display:inline-block;width:12px;height:12px;margin:9px 8px 0 0;border:1px solid #eb6472;border-radius:1px;font-weight:bold;font-size:10px;line-height:11px;font-family:helvetica;background-color:#f2707d;text-align:center;letter-spacing:-1px;text-indent:-1px;color:#fff;vertical-align:top}
.link_issue .txt_issue {line-height:30px;color:#000}
.list_issue .state_issue {overflow:hidden;position:absolute;top:0;right:12px}
.list_issue .num_rank {float:left;margin-top:11px;font-size:12px;line-height:12px;color:#999}
.list_issue .ico_up {width:7px;height:7px;margin:13px 0 0 3px;background-position:-56px -10px;vertical-align:top}
.list_issue .ico_down {width:7px;height:7px;margin:13px 0 0 3px;background-position:-56px -20px;vertical-align:top}
.list_issue .ico_stay {width:7px;height:2px;margin-top:15px;background-position:-56px -30px;vertical-align:top}
.list_issue .ico_new {width:6px;height:5px;margin-top:13px;background-position:-56px -34px;vertical-align:top}
.list_issue .txt_state {float:left;margin-top:11px;font-size:10px;line-height:13px;color:#999}

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