검색창 꾸미기 - 티스토리

원래 검색창은 이렇게 생겼다. 검색을 클릭해야 입력창이 열린다. 그리고 마우스가 입력창을 벗어나며 닫혀버린다. 아주 불편하다 할 수 있겠다.

 

그래서 이렇게 만들어 봤다. 부족한 실력이지만 만족스럽다. ㅎ

 

 

<style>
  .searchng {
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin-top: -4px;
}

input[type="text"] {
    width: 150px;
    background: #333;
    border-color: transparent;
    outline: none;
    color: #ccc;
    padding: 0 0 0 4px;
}

input.submit {
    background: transparent;
    color: #ccc;
    padding: 2px 6px;
    margin: 0 0 0 6px;
    border-color: transparent;
}

@media screen and (max-width:767px) {
  .util {
    display: flex;
    justify-content: flex-end;
    /*화면 크기가 줄어들면 util의 구조가 깨지는 걸 방지*/
  }
}
@media screen and (max-width:500px) {
  .searchng {
    display: none;
    /*모바일 화면 크기에서 안 보이기*/
  }
}
</style>

<div class="util" style="display: flex;">
<!--flex를 이용하면 반응형 웹페이지를 만들기 쉽다-->
  <s_sidebar_element>
  <!-- 검색 -->
  <div class="searchng">
  <!--기존 .search에 걸린 css가 많아 earchng로 이름을 주고 새롭게 한다-->
    <s_search>
      <input type="text" name="" 
      value="" 
      onkeypress="if (event.keyCode == 13) {  }"
      />
      <input value="찾기" type="button" 
      onclick="" class="submit" />
    </s_search>
    <!--스킨가이드에서 제공하는 검색 기본 태그-->
  </div>
</s_sidebar_element>

 

CSS가 맞는지는 모르겠으나 뭐 대충 ㅎㅎ. 필요 없는 태그도 분명 있을 것 같다.

글 쓰는데 신경을 많이 써야 하는데 스킨 꾸미기가 더 재미있다. 올바르지 않다. 어쩔...