Snippet 본문

확대형 이미지 뷰어

등록
박민지 (등록일 : 2011/08/29    최종수정일 : 2013/03/08)
Type
PC
설명
. 작은 썸네일 리스트 제공 . 선택된 메인 썸네일 확대 및 관련 타이틀 노출
미리보기
Html
<div class="view_comm">
	<div class="photo_bit">
		<strong class="screen_out">사진목록</strong>
		<ul class="list_photo">
			<li>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=162" height="57" width="116" alt="이미지정보">
					<span class="frame_g"></span>
				</a>
			</li>
			<li>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=163" height="57" width="116" alt="이미지정보">
					<span class="frame_g"></span>
				</a>
			</li>
			<li class="on"> <!-- 선택된 항목 : on 클래스 추가 -->
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=165" height="57" width="116" alt="이미지정보">
					<span class="frame_g"></span>
				</a>
			</li>
		</ul>
	</div>
	<div class="photo_detail">
		<strong class="screen_out">선택된 확대사진</strong>
		<a href="#none" class="link_thumb">
			<img src="/snippet/image?idx=165" height="175" width="339" class="thumb_img" alt="이미지정보">
			<span class="frame_g"></span>
			<span class="bg_caption"></span>
			<span class="txt_caption">이미지 타이틀</span>
		</a>
	</div>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=2) no-repeat}
 
.view_comm {overflow:hidden;width:457px;height:175px}
.view_comm .thumb_img {display:block}
.view_comm .link_thumb {display:block;position:relative;width:100%;height:100%}
.view_comm .frame_g {display:block;position:absolute;left:0;top:0;border:1px solid #000;filter:alpha(opacity:10);opacity:0.1}

.photo_bit {float:right}
.photo_bit .list_photo {width:116px;height:100%}
.list_photo li {overflow:hidden;height:57px;margin-bottom:2px}
.list_photo .frame_g {width:114px;height:55px}
.list_photo .on .frame_g {width:110px;height:51px;border:3px solid #cd4919;filter:alpha(opacity:100);opacity:1}

.photo_detail {float:left;width:339px;height:175px}
.photo_detail .frame_g {width:337px;height:173px}
.photo_detail .bg_caption {display:block;position:absolute;bottom:0;left:0;width:100%;height:23px;background-color:#000;filter:alpha(opacity:60);opacity:0.6}
.photo_detail .txt_caption {display:block;position:absolute;bottom:0;left:0;width:100%;height:23px;font-size:11px;color:#fff;line-height:23px;letter-spacing:-1px;text-indent:9px}

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