Snippet 본문

통합검색 - 서제스트

등록
이동원 (등록일 : 2013/03/04    최종수정일 : 2013/03/07)
Type
Mobile
설명
모바일 검색 - 검색키워드 서제스트 노출형
미리보기
Html
<div class="searchform_comm">
	<form action="#" role="search">
		<fieldset class="fld_search">
			<legend class="screen_out">통합 검색어 입력폼</legend>
			<div class="box_search write_on"><!-- 검색어가 있을경우 : write_on 클래스 추가 -->
				<input type="text" class="tf_keyword" value="" name="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
				<button type="button" class="btn_reset"><span class="img_g ico_del">검색어 지우기</span></button>
				<button type="submit" class="btn_search"><span class="img_g ico_search">검색</span></button>
				<button type="button" class="btn_close"><span class="img_g ico_close">닫기</span></button>
				<span class="clip_search">
					<span class="clip_left"></span>
					<span class="clip_right"></span>
				</span>
			</div>
		</fieldset>
	</form>
	<div class="latest_keyword" style="display:none;">
		<strong class="tit_latest">최근검색어</strong>
		<ul class="list_latest">
			<li class="fst">
				<a href="#none" class="link_latest">
					<span class="img_g ico_search"></span>
					김수현
				</a>
			</li>
			<li>
				<a href="#none" class="link_latest">
					<span class="img_g ico_search"></span>
					김태촌 혼수상태
				</a>
			</li>
			<li>
				<a href="#none" class="link_latest">
					<span class="img_g ico_search"></span>
					동부간선도로
				</a>
			</li>
			<li>
				<a href="#none" class="link_latest">
					<span class="img_g ico_search"></span>
					송새벽 아부의 왕
				</a>
			</li>
			<li>
				<a href="#none" class="link_latest">
					<span class="img_g ico_search"></span>
					박지민
				</a>
			</li>
		</ul>
		<button type="button" class="bround btn_del">최근 검색어 삭제</button>
	</div>

	<div class="suggest_keyword">
		<strong class="screen_out">제안 키워드</strong>
		<ul class="list_suggest">
			<li>
				<a href="#none" class="link_sgt">
					<em class="emph_keyword"> 오바마 </em>
				</a>
				<button type="button" class="btn_add"><span class="img_g ico_add">추가</span></button>
			</li>
			<li>
				<a href="#none" class="link_sgt">
					<em class="emph_keyword"> 오바마 </em> 재선
				</a>
				<button type="button" class="btn_add"><span class="img_g ico_add">추가</span></button>
			</li>
			<li>
				<a href="#none" class="link_sgt">
					<em class="emph_keyword"> 오바마 </em> 롬니
				</a>
				<button type="button" class="btn_add"><span class="img_g ico_add">추가</span></button>
			</li>
			<li>
				<a href="#none" class="link_sgt">
					<em class="emph_keyword"> 오바마 </em> 지지율
				</a>
				<button type="button" class="btn_add"><span class="img_g ico_add">추가</span></button>
			</li>
			<li>
				<a href="#none" class="link_sgt">
					<em class="emph_keyword"> 오바마 </em> 재선성공
				</a>
				<button type="button" class="btn_add"><span class="img_g ico_add">추가</span></button>
			</li>
		</ul>
	</div>
</div>
CSS
.img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/50A9878E0649740001) no-repeat 0 0;text-indent:-9999px}

/* 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/50A987580645080001);-webkit-background-size:124px 108px;background-size:124px 108px}
}

/* 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/50A986B706453C0004);-webkit-background-size:124px 108px;background-size:124px 108px}
}

.searchform_comm .fld_search {margin-bottom:-1px;padding:9px 0 8px;border-bottom:1px solid #c0c0c0;background-color:#f0f1f3;-webkit-box-shadow:inset 0 1px 0 #f6f6f6;box-shadow:inset 0 1px 0 #f6f6f6}
.searchform_comm .box_search {position:relative;height:25px;margin:0 96px 0 8px;padding:5px 5px 0;border:3px solid #6070f5;border-radius:6px;background-color:#fff}
.searchform_comm .tf_keyword {width:100%;height:20px;font-size:17px;line-height:19px;border:0 none;border-radius:3px;background-color:transparent;color:#414345;vertical-align:top;-webkit-appearance:none}
.searchform_comm .tf_keyword::-webkit-search-cancel-button {-webkit-appearance:none}
.searchform_comm .btn_reset {display:none;position:absolute;top:1px;right:5px;width:28px;height:28px}
.searchform_comm .ico_del {display:block;width:18px;height:18px;margin:0 auto;background-position:0 -16px}
.searchform_comm .btn_search {position:absolute;top:-3px;right:-49px;width:36px;height:36px;padding-top:1px;border:1px solid #8991a0;border-radius:5px;background-color:#f4f4f4;background-image:-webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#eee));background-image:-moz-linear-gradient(top, #fdfdfd, #eee);background-image:-o-linear-gradient(top, #fdfdfd, #eee);background-image:linear-gradient(to bottom, #fdfdfd, #eee);text-align:center;-webkit-box-shadow:0 2px 0 #fff,inset 0 1px 1px #f2f2f2;box-shadow:0 1px 0 #fff,inset 0 1px 0 #f2f2f2}
.searchform_comm .btn_search .ico_search {display:block;width:18px;height:19px;margin:0 auto;background-position:-88px -44px}
.searchform_comm .btn_close {position:absolute;top:-3px;right:-91px;width:36px;height:36px;padding-top:2px;border:1px solid #caccd1;border-radius:5px;background-color:#f4f4f4;background-image:-webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#eee));background-image:-moz-linear-gradient(top, #fdfdfd, #eee);background-image:-o-linear-gradient(top, #fdfdfd, #eee);background-image:linear-gradient(to bottom, #fdfdfd, #eee);text-align:center;-webkit-box-shadow:0 2px 0 #fff,inset 0 1px 1px #f2f2f2;box-shadow:0 1px 0 #fff,inset 0 1px 0 #f2f2f2}
.searchform_comm .ico_close {display:block;width:16px;height:17px;margin:0 auto;background-position:-90px -66px}
.searchform_comm .clip_search {position:absolute;top:4px;right:-7px;width:12px;height:22px}
.searchform_comm .clip_left {position:absolute;top:4px;left:1px;z-index:2;width:11px;height:13px;border-top-left-radius:3px;border-bottom-left-radius:3px;background-color:#ffb223;background-image:-webkit-gradient(linear, left top, left bottom, from(#fbc936), to(#ffa91b));background-image:-moz-linear-gradient(top, #fbc936, #ffa91b);background-image:-o-linear-gradient(top, #fbc936, #ffa91b);background-image:linear-gradient(to bottom, #fbc936, #ffa91b);-webkit-box-shadow:0 1px 0 #f2a720,0 2px 1px rgba(227,227,227,0.3),-1px 0 1px rgba(227,227,227,0.3);box-shadow:0 1px 0 #f2a720,0 2px 1px rgba(227,227,227,0.3),-1px 0 1px rgba(227,227,227,0.3)}
.searchform_comm .clip_right {position:absolute;top:0;right:0;z-index:1;width:4px;height:22px;border-top-right-radius:3px;border-bottom-right-radius:3px;background-color:#ffb223;background-image:-webkit-gradient(linear, left top, left bottom, from(#fbc62c), to(#ffa91b));background-image:-moz-linear-gradient(top, #fbc62c, #ffa91b);background-image:-o-linear-gradient(top, #fbc62c, #ffa91b);background-image:linear-gradient(to bottom, #fbc62c, #ffa91b);-webkit-box-shadow:inset 1px 0 0 #e39418,1px 1px 2px rgba(227,227,227,0.5);box-shadow:inset 1px 0 0 #e39418,1px 1px 2px rgba(227,227,227,0.5)}
.searchform_comm .write_on {padding-right:30px}
.searchform_comm .write_on .btn_reset {display:block}

.searchform_comm .suggest_keyword .list_sgt {border-top:1px solid #c0c0c0}
.searchform_comm .suggest_keyword li {position:relative;width:100%;border-bottom:1px solid #d5d5d7;background-color:#fff}
.searchform_comm .suggest_keyword .link_sgt {display:block;overflow:hidden;height:38px;padding:0 50px 0 10px;font-size:16px;line-height:40px;white-space:nowrap;text-overflow:ellipsis}
.searchform_comm .suggest_keyword .emph_keyword {font-weight:normal;color:#fe7831}
.searchform_comm .suggest_keyword .btn_add {position:absolute;top:0;right:1px;width:40px;height:38px}
.searchform_comm .suggest_keyword .ico_add {display:block;width:20px;height:20px;margin:0 auto;background-position:-20px -16px}

.searchform_comm .latest_keyword .tit_latest {display:block;padding:7px 0 5px 11px;border-top:1px solid #d9d9d9;font-weight:normal;font-size:12px;line-height:13px;background-color:#f1f1f1;-webkit-box-shadow:inset 0 1px 0 #f6f6f6;box-shadow:inset 0 1px 0 #f6f6f6;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;color:#7a8191}
.searchform_comm .latest_keyword .list_latest {border-bottom:1px solid #949da6}
.searchform_comm .latest_keyword li {width:100%;border-top:1px solid #d5d5d7;background-color:#fff}
.searchform_comm .latest_keyword .fst {border-top:1px solid #c0c0c0}
.searchform_comm .latest_keyword .link_latest {display:block;overflow:hidden;height:38px;padding:0 11px;font-size:16px;line-height:40px;white-space:nowrap;text-overflow:ellipsis}
.searchform_comm .latest_keyword .ico_search {width:15px;height:14px;margin:12px 1px 0 0;background-position:-89px -86px;vertical-align:top;text-indent:0}
.searchform_comm .latest_keyword .btn_del {display:block;width:130px;height:36px;margin:12px auto;padding-top:2px;border:1px solid #949da6;border-radius:2px;font-weight:bold;font-size:14px;line-height:15px;background-color:#fbfbfc;color:#515b65;letter-spacing:-1px}

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