Snippet 본문

하단 이슈검색어

등록
이동원 (등록일 : 2012/12/20    최종수정일 : 2013/03/08)
Type
Mobile
설명
하단 이슈검색어 (2개 탭메뉴)
미리보기
Html
<div class="rank_comm rank_open"><!-- 펼침 : rank_open 클래스 추가  -->
	<div class="head_issue">
		<h2 class="screen_out">이슈검색어</h2>
		<strong class="tit_issue">실시간이슈</strong>
		<div class="roll_issue">
			<a href="#none" class="link_issue">
				<em class="num_issue">1</em>
				<span class="screen_out">위</span>
				<span class="txt_issue">새만금특별법 심의통과 글자가 길어질 경우</span>
			</a>
		</div>		
		<a href="#none" class="btn_extend"><span class="img_sample ico_arr">펼치기, 접기</span></a>
		<ul class="tab_issue">
			<li class="fst on">
				<a href="#none" class="link_tab">실시간이슈</a>
			</li>
			<li class="lst">
				<a href="#none" class="link_tab">소셜픽<span class="img_sample ico_new">(신규)</span></a>
			</li>
		</ul>
	</div>
	<strong class="screen_out">실시간이슈</strong><!-- 선택된 탭에 따라 제목 변경할것 -->
	<div id="keySlide_bt">
		<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_sample 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_sample 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_sample 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_sample 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_sample 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_sample 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_sample 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_sample 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_sample 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_sample ico_new">신규진입</span></em></a>
			</li>
		</ol>
		<ol class="list_issue list_socialpick"  style="display:none"><!-- 소셜픽 : .list_socialpick 클래스 추가 -->
			<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="txt_state">참여수</span><span class="txt_num">203,076</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="txt_state">참여수</span><span class="txt_num">63,100</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="txt_state">참여수</span><span class="txt_num">300,000</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="txt_state">참여수</span><span class="txt_num">1,234</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="txt_state">참여수</span><span class="txt_num">203,076</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="txt_state">참여수</span><span class="txt_num">63,100</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="txt_state">참여수</span><span class="txt_num">300,000</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="txt_state">참여수</span><span class="txt_num">1,234</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="txt_state">참여수</span><span class="txt_num">203,076</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="txt_state">참여수</span><span class="txt_num">63,100</span></em></a>
			</li>
		</ol>
	</div>
	<div class="paging_issue">
		<button class="btn_page btn_prev"><span class="img_sample ico_prev">이전페이지</span></button>
			<span class="screen_out">현재페이지</span><em class="num_page">1</em>
			<span class="num_page">2</span>
		<button type="button" class="btn_page btn_next"><span class="img_sample ico_next">다음페이지</span></button>
	</div>
</div>
CSS
.img_sample {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/511B2F70057D270002) no-repeat 0 0;text-indent:-9999px}

/* 하단 실시간이슈 */
.rank_comm {border-top:1px solid #6d7076}
.rank_comm .head_issue {position:relative;overflow:hidden;width:100%;height:38px;background-color:#fff}
.rank_comm .tit_issue {float:left;margin:12px 14px 0 0;font-weight:bold;font-size:13px;line-height:15px;color:#e74040;text-indent:12px}
.rank_comm .link_issue {display:block;overflow:hidden;height:33px;padding:0 50px 0 12px;font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.rank_comm .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}
.rank_comm .link_issue .txt_issue {line-height:33px;color:#000}
.rank_comm .roll_issue {overflow:hidden;font-size:13px;margin-right:42px}
.rank_comm .roll_issue .link_issue {overflow:hidden;width:100%;height:38px;padding:0;white-space:nowrap;text-overflow:ellipsis}
.rank_comm .roll_issue .num_issue {margin:12px 3px 0 0}
.rank_comm .roll_issue .txt_issue {line-height:39px}
.rank_comm .roll_issue .state_issue {display:none}
.rank_comm .btn_extend {position:absolute;top:0;right:0;width:41px;height:38px;background-color:#fff}
.rank_comm .btn_extend .ico_arr {display:block;width:12px;height:8px;margin:15px auto 0;background-position:-110px -52px}
.rank_comm .tab_issue {display:none;overflow:hidden;margin-right:42px}
.rank_comm .tab_issue li {float:left;width:50%}
.rank_comm .tab_issue .link_tab {display:block;height:36px;border:1px solid #c6c6c6;border-top:0 none;border-right:0 none;font-weight:bold;font-size:13px;line-height:37px;background-color:#f7f7f8;text-align:center;color:#4a4a4a;-webkit-box-shadow:inset 0 1px 0 #fcfcfc;box-shadow:inset 0 1px 0 #fcfcfc}
.rank_comm .fst .link_tab {border-left:0 none}
.rank_comm .tab_issue .lst {overflow:hidden;float:none;width:auto}
.rank_comm .on .link_tab {border-bottom:1px solid #fff;background:none;background-color:#fff;color:#de4d5c;-webkit-box-shadow:none;box-shadow:none}
.rank_comm .link_tab .ico_new {width:10px;height:10px;margin:12px 0 0 2px;background-position:-44px -16px}
.rank_comm .list_issue {display:none;width:100%;border-bottom:1px solid #dfe1e4}
.rank_comm .list_issue li {overflow:hidden;position:relative;width:100%;height:32px;border-top:1px solid #f6f6f6}
.rank_comm .list_issue .fst {border-top:0 none}
.rank_comm .state_issue {overflow:hidden;position:absolute;top:0;right:12px}
.rank_comm .num_rank {float:left;margin-top:11px;font-size:12px;line-height:12px;color:#999}
.rank_comm .ico_up {width:7px;height:7px;margin:13px 0 0 3px;background-position:-56px -10px;vertical-align:top}
.rank_comm .ico_down {width:7px;height:7px;margin:13px 0 0 3px;background-position:-56px -20px;vertical-align:top}
.rank_comm .ico_stay {width:7px;height:2px;margin-top:15px;background-position:-56px -30px;vertical-align:top}
.rank_comm .ico_new {width:6px;height:5px;margin-top:13px;background-position:-56px -34px;vertical-align:top}
.rank_comm .txt_state {float:left;margin-top:11px;font-size:10px;line-height:13px;color:#999}

.rank_comm .list_socialpick .link_issue {padding-right:90px}
.rank_comm .list_socialpick .txt_num {float:left;width:43px;margin-top:11px;font-weight:bold;font-size:10px;line-height:11px;font-family:helvetica;color:#de4d5c;text-align:right}
.iphone .rank_comm .list_socialpick .txt_num {width:46px}
.rank_comm .list_twitter .link_issue {padding-right:70px}
.rank_comm .list_twitter .txt_num {float:left;width:25px;margin-top:11px;font-weight:bold;font-size:10px;line-height:11px;font-family:helvetica;color:#de4d5c;text-align:right}

.rank_comm .paging_issue {display:none;overflow:hidden;height:22px;margin:8px auto 16px;font-size:13px;line-height:27px;font-family:helvetica;color:#666;text-align:center}
.rank_comm .paging_issue .btn_page {display:inline-block;overflow:hidden;width:38px;height:22px;margin:0 13px;border:1px solid #c4c7d0;border-radius:4px;background-color:#fafafa;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f6f6f6));background-image:-moz-linear-gradient(top,#fff,#f6f6f6);background-image:-o-linear-gradient(top,#fff,#f6f6f6);background-image:linear-gradient(to bottom,#fff,#f6f6f6);vertical-align:top}
.rank_comm .paging_issue .img_sample {margin-top:5px;width:6px;height:10px;vertical-align:top;cursor:pointer}
.rank_comm .paging_issue .ico_prev {background-position:-22px -38px}
.rank_comm .paging_issue .ico_next {background-position:-30px -38px}
.rank_comm .paging_issue .num_page {display:inline-block;overflow:hidden;width:5px;height:5px;margin-top:8px;border:1px solid #aeb0b7;border-radius:6px;background-color:#dcdde1;text-indent:-9999px;vertical-align :top}
.rank_comm .paging_issue em.num_page {width:6px;height:6px;margin-top:7px;border-color:#4d62d5;border-radius:7px;background-color:#6075ec}
.rank_open .head_issue {height:38px;border-bottom:0 none;-webkit-box-shadow:inset 0 1px 0 #7d8ff5;box-shadow:inset 0 1px 0 #7d8ff5}
.rank_open .tit_issue {display:none}
.rank_open .roll_issue {display:none}
.rank_open .btn_extend {height:36px;border-left:1px solid #c6c6c6;border-bottom:1px solid #c6c6c6;background-color:#f7f7f8}
.rank_open .btn_extend .ico_arr {height:9px;margin:14px auto 0;background-position:-110px -64px}
.rank_open .tab_issue {display:block}
.rank_open .list_issue {display:block}
.rank_open .paging_issue {display:block}
.rank_comm .tab_add li {width:33.33%}

/* 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}
}

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