Snippet 본문

통합 검색창

등록
이동원 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
PC
설명
검색 옵션을 설정할 수 있는 통합 검색 창
미리보기
Html
<form action="#" id="daumSearch" class="searchform_comm" name="">
    <fieldset>
        <legend class="screen_out">검색어 입력폼</legend>
        <div class="img_search search_info">
            <div id="daumSearchOption" class="img_search sort_opt">전체</div>
            <select id="daumSearchOptionSelect" class="opt_search" name="WHATEVER"><!-- "WHATEVER" 명은 서비스에 맞게 수정하세요 -->
                <option value="all">전체</option>
                <option value="movie">영화</option>
                <option value="tv">TV프로</option>
                <option value="play">공연</option>
                <option value="person">인물</option>
                <option value="photo">이미지</option>
                <option value="video">동영상</option>
                <option value="news">매거진</option>
                <option value="bbs">게시판</option>
                <option value="review">리뷰</option>
            </select>
            <input type="text" id="q" class="tf_keyword" name="q" autocomplete="off" title="검색어">
            <button type="button" id="daumSuggest" class="img_search btn_suggest">서제스트 보기</button>
            <!--
            <button type="button" id="daumSuggest" class="img_search btn_suggest">서제스트 보기</button>
            <button type="button" id="daumSuggest" class="img_search btn_suggest btn_expand">서제스트 접기</button>
            <button type="button" id="daumSuggest" class="img_search btn_suggest btn_off">서제스트 켜기</button>
            <span id="daumNoSuggest" class="img_search btn_nosuggest"></span> ## 서제스트 없는 경우
            -->
        </div>
        <button type="submit" id="daumBtnSearch" class="img_search btn_search">검색</button>
        <button type="button" id="daumBtnSearchAll" class="img_search btn_search_all">통합검색</button>
    </fieldset>
</form>
CSS
.img_search {background:url(/snippet/image?idx=23) no-repeat 0 0}

.searchform_comm {color:#000}
.searchform_comm .search_info {float:left;width:304px;height:31px;margin-right:4px;background-position:0 -100px}
.searchform_comm .tf_keyword {display:inline;float:left;width:192px;height:17px;margin:4px;padding:3px 4px;border:none 0;color:#000;background-color:transparent;outline:0} /* 검색옵션 없는 경우엔 너비 270px 로 수정해야됨 */
.searchform_comm  button.img_search {overflow:hidden;float:left;border:0 none;font-size:0;line-height:0;text-indent:-9999px;cursor:pointer}
.searchform_comm .btn_search {width:39px;height:31px;margin-right:3px;background-position:-75px 0}
.searchform_comm .btn_search:hover {background-position:-75px -31px}
.searchform_comm .btn_search_all {width:56px;height:31px;background-position:-114px 0}
.searchform_comm .btn_search_all:hover {background-position:-114px -31px}

/* 서제스트 버튼 */
.searchform_comm .btn_suggest {width:18px;height:21px;margin-top:5px;background-position:0 0}
.searchform_comm .btn_suggest:hover {background-position:0 -25px}
.searchform_comm .btn_expand {background-position:-20px 0}
.searchform_comm .btn_expand:hover {background-position:-20px -25px}
.searchform_comm .btn_off {background-position:-40px 0}
.searchform_comm .btn_off:hover {background-position:-40px -25px}
.searchform_comm .btn_nosuggest {float:right;width:15px;height:17px;margin-top:7px;background-position:0 -50px}

/* 검색옵션 */
.searchform_comm .sort_opt {display:inline;float:left;width:58px;padding:6px 10px 4px;color:#555;line-height:21px;background-position:100% -66px;cursor:pointer}
.searchform_comm .opt_search {display:none}

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