Snippet 본문

기본형 이미지 뷰어

등록
박민지 (등록일 : 2011/08/29    최종수정일 : 2013/03/07)
Type
PC
설명
. 이미지 좌우로 이전/다음 버튼이 있는 형태의 기본형 . 뷰어 상단/하단에 해당 이미지의 제목/내용 등의 정보 노출
미리보기
Html
<div class="view_comm">
	<div class="box_cont">
		<h4 class="tit_view"><a href="#none">제목</a></h4>
		<span class="info_append">기타정보 <span class="txt_bar"> | </span> <span class="txt_time">2013.01.01</span> 10:35</span>
		<div class="thumb_photo">
			<a href="#none"><img src="/snippet/image?idx=162" width="350" height="446" class="thumb_img" alt="이미지 설명"></a>
		</div>
		<p class="txt_desc"><a href="#none" class="link_txt">내용이 들어갑니다~</a></p>
	</div>
	<span class="page_comm"><em class="txt_current">12</em>/30</span>
	<a href="#none" class="btn_move btn_prev"><span class="img_sample">이전</span></a>
	<a href="#none" class="btn_move btn_next"><span class="img_sample">다음</span></a>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=2) no-repeat}
 
.view_comm {overflow:hidden;position:relative;width:523px;border:1px solid #cfd0d8;background-color:#f8f8f8}
.view_comm .box_cont {width:352px;margin:0 auto;padding:21px 0 0 0}
.view_comm .tit_view {padding:0 0 0 2px;font-size:18px;line-height:20px;text-decoration:none}
.view_comm .info_append {display:block;margin-top:3px;padding:0 0 18px 2px;line-height:14px;color:#808080}
.view_comm .thumb_photo {border:1px solid #e6e6e6;text-align:center}
.view_comm .thumb_img {vertical-align:top}
.view_comm .txt_desc {display:block;margin:12px 0 0 0;padding:0 0 0 1px;line-height:19px}
.view_comm .txt_desc .link_txt {color:#6c6c6e}
.view_comm .btn_move {position:absolute;top:76px;width:54px;height:248px;padding:200px 0 0 30px}
.view_comm .btn_prev {left:0}
.view_comm .btn_next {right:0}
.view_comm .btn_move .img_sample {display:block;overflow:hidden;width:18px;height:31px;text-indent:-9999px}
.view_comm .btn_prev .img_sample {background-position:-160px 0}
.view_comm .btn_prev:hover .img_sample {background-position:-220px 0}
.view_comm .btn_next .img_sample {background-position:-190px 0}
.view_comm .btn_next:hover .img_sample {background-position:-250px 0}
.view_comm .page_comm {display:block;padding:2px 22px 10px 0;color:#404047;font-size:11px;line-height:14px;text-align:right}
.view_comm .page_comm .txt_current {font-weight:bold}

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