Html 검색 디자인 - Html geomsaeg dijain

티스토리 뷰

CSS/[PCNJ]Pure Css No JavaScript

[PCNJ] Hover effect Search 검색창 만들기

Alencion 이정준 2018. 12. 17. 17:02

[PCNJ] 

See the Pen pqbdyj by 이정준 (@alencion) on CodePen.

Youtube 영상

CSS코드 설명

저작자표시

'CSS > [PCNJ]Pure Css No JavaScript' 카테고리의 다른 글

TAGCSS, hover, hover effect, how to make search, HTML, no javascript, PCNJ, pure CSS, search, search box, 검색창, 검색창만들기

댓글

비밀글

링크

글 보관함

• 2018/12 (4)

«   2022/11   »

Total5,285Today3Yesterday4

검색창을 만들어보겠습니다.

{tocify} $title={목차}

검색창(Search box)이란?

검색창은 사용자가 원하는 정보를 찾아주는 도구입니다.

유튜브를 보면 가장 위에 검색창이 있습니다.

원하는 영상을 찾지 못한 사용자는 이곳에 단어를 입력해 검색합니다.

사용자는 드래그나 메뉴를 클릭해서 정보를 찾습니다. 검색어를 직접 입력하는 것보다 마우스로 클릭하는 것을 선호합니다.

클릭만으로 원하는 정보를 찾지 못할 때 검색창으로 정보를 찾습니다.

적절한 위치

사용자가 마우스로 원하는 정보를 찾지 못할 때 사이트를 떠나기 전 마지막으로 검색합니다. 그래서 정보 리스트가 끝나는 지점이 검색창이 들어설 최적의 장소입니다.

보통 네비게이션 메뉴 옆에 위치합니다. 사용자가 원하는 걸 메뉴에서 찾지 못하면 바로 검색하도록 유도합니다.

디자인 원칙

전체적인 테마와 어울리되 사용자 눈에 띄어야 합니다. 찾기 기능 조차 찾을 수 없다면 사용자는 지체없이 바로 사이트를 떠납니다.

다행히 검색창 디자인은 대부분 통일되어 있어 검색 아이콘만으로도 충분합니다.

코드 예시

입력 폼

사용자로부터 입력받기 때문에 form 태그로 시작합니다.

<div class="search-box">
  <form action="." method="post">
    <input class="search-txt" type="text" placeholder="검색어를 입력해 주세요">
    <button class="search-btn" type="submit">찾기</button>
  </form>
</div>

보기 편하게 검색창을 정 가운데로 옮깁니다. 이 코드는 추가할 필요가 없습니다.

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

간단히 설명하자면 시작점을 정 가운데로 옮기고 컨텐츠 크기의 반만큼 왼쪽과 위로 당겨줍니다. 그러면 화면 정 가운데로 옵니다.

아이콘

header 태그 안에 검색 아이콘을 제공하는 태그를 추가합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

그리고 button 태그에서 텍스트 '찾기'를 지우고 아이콘으로 대체합니다.

<button class="search-btn" type="submit">
  <i class="fas fa-search"></i>
</button>

해당 입력 폼이 어떤 기능을 하는지 한 눈에 들어옵니다.

입력창 외관

CSS에서 .search-box에 아래 스타일 속성을 추가합니다.

.search-box {
  /* 생략 */
  background-color: #949BA0;
  height: 40px;
  padding: 10px;
}

배경색은 굳이 넣지 않아도 됩니다. 높이는 픽셀 값 대신 100%으로 설정하면 부모 요소(예: 네비게이션 바)에 딱 맞습니다.

버튼 스타일

버튼을 사용자 눈에 들어오도록 바꿔준다.

.search-btn {
  color: #EDEDED;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #949BA0;
  display: flex;
  align-items: center;
  justify-content: center;
}

배경색과 대비되는 색상을 입힌다. 브랜드 칼라나 사이트의 테마와 일치시키는 것이 좋다.

버튼이 입력 폼 오른쪽에 오도록 float 속성을 right로 입력합니다. 그렇지 않으면 버튼은 다음 줄로 넘간다.

높이와 너비를 같게 설정하고 border-radius를 50%로 설정하면 원형 버튼이 된다.

display를 flex로 바꿔 아이콘을 정 가운데로 정렬한다.

참고로 버튼의 모양은 웹 브라우저마다 다르다. 웹 브라우저의 영향을 받고 싶지 않다면 button 태그 대신 a 태그로 변경한다.

버튼 스타일, CSS 변수로 관리하는 방법

입력 폼 스타일

사용자가 검색어를 입력하는 입력 폼을 만들겠습니다.

.search-txt {
  float: left;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  color: white;
  font-size: 15px;
  line-height: 40px;
}

버튼과 마찬가지로 입력 폼을 왼쪽에 배치합니다.

배경과 바깥 외곽선, 안쪽 외곽선을 전부 없애 배경과 하나로 만듭니다. border가 바깥 외각선을 설정하는 속성이고 outline은 안쪽 외곽선의 스타일에 영향을 줍니다.

color는 버튼과 마찬가지로 배경색과 대비를 줘 눈에 띄게 설정합니다.

폰트 크기와 라인 높이는 편의대로 설정합니다.

width 속성으로 원하는 만큼 길이를 늘릴 수 있습니다.

버튼과 어울리게 검색 창 모서리를 둥글게 다듬습니다.

.search-box {
  /* 생략 */
  border-radius: 40px; /* 추가 */
}

border-radius를 박스의 높이만큼 설정하면 반원이 됩니다.

검색창 열기

마우스를 검색 찾기 아이콘에 올렸을 때 입력 폼이 자연스럽게 열리도록 애니메이션을 넣어보겠습니다.

먼저 입력 폼의 크기를 0으로 줄여 찾기 아이콘만 남깁니다.

.search-txt {
  /* 생략 */
  width: 0; /* 추가 */
  transition: 0.5s; /* 추가 */
}

transition 속성을 추가하면 연속적으로 스타일이 전환됩니다.

마우스를 올렸을 때의 너비 값을 설정합니다.

.search-box:hover > form .search-txt {
  width: 200px;
}

같은 방식으로 버튼의 색에도 변화를 줍니다.

.search-box:hover > form .search-btn {
  background: #464E54;
}

이제 마우스를 아이콘 위로 올려봅시다.

추천하는 글
반응형 네비게이션 만들기