[CSS] 검색창 만들기

HTML

<div class="search-container">
        <div class="search-overlay"></div>
        <!-- 검색창 -->
        <div class="search">
          <input type="text" class="search-box" placeholder="검색하기" />
        </div>
      </div>

불투명한 검은 배경을 생성하기 위해

search-overlay 라는 div태그를 하나 더 추가해줌.

SCSS

/*검색창*/
.search-container {
  display: none;

  .search-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 검정색 투명 배경 */
    z-index: 998;
  }

  .search {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 화면 중앙 고정
    z-index: 999;
    .search-box {
      width: 300px;
      padding: 20px;
      border: none;
      border-radius: 30px;
      font-size: 16px;
    }
  }
}

.search 에다가 position을 부여한 후,

transform 을 같이 써서 화면 중앙에 위치할 수 있도록 부여했다.

JS

// 검색창 보여주고 닫기
$(".search-icon").on("click", function () {
  $(".search-container").fadeIn();
});
$(".search-overlay").on("click", function () {
  $(".search-container").fadeOut();
});

제이쿼리를 사용해서

서치 컨테이너 div 태그 전체를 보여주게 한 다음,

불투명한 검은 배경을 클릭하면 검색창이 닫히게끔 만듦.