Snippet 본문

제목한줄형

등록
웹표준개발팀 (등록일 : 2011/09/26    최종수정일 : 2013/03/15)
Type
Mobile
설명
제목 한줄형 - 썸네일 노출 유무 모두 대응함
미리보기
Html
<ul class="list_comm">
	<li>
		<a href="#none" class="link_cont">
			<span class="thumb_info">
				<img src="/snippet/image?idx=200" width="65" height="48" alt="">
			</span>
			<span class="cont_info">
				<strong class="tit_subject">타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀</strong>
				<span class="txt_name">아이디</span><span class="txt_bar"> | </span><span class="txt_hits">조회 <span class="num_g">12345</span></span><span class="txt_bar"> | </span><span class="txt_recom">추천 <span class="num_g">12345</span></span>
			</span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<span class="cont_info">
				<strong class="tit_subject">타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀 타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀</strong>
				<span class="txt_name">아이디</span><span class="txt_bar"> | </span><span class="txt_hits">조회 <span class="num_g">12345</span></span><span class="txt_bar"> | </span><span class="txt_recom">추천 <span class="num_g">12345</span></span>
			</span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<span class="thumb_info">
				<img src="/snippet/image?idx=200" width="65" height="48" alt="">
			</span>
			<span class="cont_info">
				<strong class="tit_subject">타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀</strong>
				<span class="txt_name">아이디</span><span class="txt_bar"> | </span><span class="txt_hits">조회 <span class="num_g">12345</span></span><span class="txt_bar"> | </span><span class="txt_recom">추천 <span class="num_g">12345</span></span>
			</span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<span class="thumb_info">
				<img src="/snippet/image?idx=200" width="65" height="48" alt="">
			</span>
			<span class="cont_info">
				<strong class="tit_subject">타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀</strong>
				<span class="txt_name">아이디</span><span class="txt_bar"> | </span><span class="txt_hits">조회 <span class="num_g">12345</span></span><span class="txt_bar"> | </span><span class="txt_recom">추천 <span class="num_g">12345</span></span>
			</span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<span class="cont_info">
				<strong class="tit_subject">타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀 타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀타이틀입니다. 한 줄 이상이되지 않으며, 길어지면 텍스트 숨김이 되는 타이틀</strong>
				<span class="txt_name">아이디</span><span class="txt_bar"> | </span><span class="txt_hits">조회 <span class="num_g">12345</span></span><span class="txt_bar"> | </span><span class="txt_recom">추천 <span class="num_g">12345</span></span>
			</span>
		</a>
	</li>
</ul>
CSS
.list_comm {overflow:hidden;width:100%}
.list_comm li {overflow:hidden;float:left;width:100%;border-bottom:1px solid #eee}
.list_comm .link_cont {float:left;width:100%;text-decoration:none}
.list_comm .thumb_info {float:left;width:65px;height:48px;margin:9px 8px 0 12px;border:1px solid #c5c5c5}
.list_comm .cont_info {display:block;padding:13px 12px 12px;font-size:12px;color:#888}
.list_comm .cont_info .tit_subject {display:block;overflow:hidden;padding-bottom:3px;font-weight:normal;font-size:14px;color:#000;line-height:20px;white-space:nowrap;text-overflow:ellipsis}
.list_comm .cont_info .num_g {font-family:helvetica}
.list_comm .txt_recom .num_g {color:#eb6127}
.list_comm .desc_txt .txt_bar {color:#e7e7e7}

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