[웹 개발 #3] 검색 바 만들기

홈페이지 필수 요소 중 하나인 검색 바!

 

다들 알다시피 

네이버 검색바

요로코롬 생겼다

 

보통 홈페이지 메인 화면에 있는 검색바는

이렇게 아이콘으로 대체하다 마우스를 클릭하면

입력창으로 바뀌는 모양으로 한다.

 

(나도 못 만들 건 없지)

 

[HTML 코드] ↓

          <div class="search">

            <input type="text"/>

            <div class="material-icons">search</div>

          </div>

검색 바 영역 클래스 -> search

검색 바 입력 박스 선언 -> type="text"

검색(돋보기) 아이콘 클래스 -> material-icons

 

여기서 돋보기 아이콘은 

구글 폰트에서 무료로 배포하는 아이콘으로 사용하였다

 

다운로드 하려면 ↓

https://fonts.google.com/

Browse Fonts - Google Fonts

 

html 본문 위에 이렇게 선언해야 search를 <div>태그 안에 넣었을 때 반영된다.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

 

+ <input type=''"/> 속성 종류

• text: 텍스트 입력 박스 생성
• password: 패스워드 입력 박스 생성( 입력키 가림 )
• button: 버튼 생성
• checkbox: 체크 박스 생성( 여러 개 중복 선택 가능 )
• radio: 체크 박스 생성( 1개만 선택 가능)
• file: 파일 첨부 버튼 생성
• email: 이메일 입력 박스 생성
• url: 웹사이트 입력 박스 생성
• tel: 전화번호 입력 박스 생성
• date: 날짜 입력 박스 생성

 

[ JS 코드 ]

 

[검색(돋보기) 아이콘과 검색바 선언] ↓

const searchEl = document.querySelector('.search');

const searchInputEl = document.querySelector('input');

 

• 문서 내의 클래스가 .search 인 요소를 찾아 searchEl에 반환한다.
• 문서 내의 input 요소를 찾아 searchInputEl에 반환한다.

 

[ 검색(돋보기) 아이콘을 누르면] ↓

// 검색창을 누르면

searchEl.addEventListener('click', function() {

  searchInputEl.focus();

});

 

searchEl.addEventListener('click', function() { ... });

• 사용자가 searchEl을 클릭했을 때 실행되는 이벤트 리스너

searchInputEl.focus();

• 입력 필드(searchInputEl)에 포커스를 설정 -> 아이콘에서 입력바로 바뀜

[ 검색(돋보기) 아이콘을 눌렀을 때의 상황] ↓

// 검색창을 눌렀을 때

searchInputEl.addEventListener('focus', function() {

  searchEl.classList.add('focused'); //searchEl에 classList라는 객체 추가를 한 다음 add 메소드 진행

  searchInputEl.setAttribute('placeholder', '통합검색'); // html에 초기 설정

});

 

searchInputEl.addEventListener('focus', ...)

• 검색바가 포커스 되어있을 때 실행되는 이벤트 리스너

searchEl.classList.add('focused')

• searchEl 요소에 CSS 클래스를 추가
• classList: HTML 요소의 클래스 속성을 조작

.add('focused'):

• 'focused'라는 클래스를 searchEl에 동적으로 추가 

-> 이게 무슨 소리냐면

<div class="search"></div> -> <div class="search focused"></div> 로 바뀜

 

searchInputEl.setAttribute('placeholder', '통합검색')

• setAttribute 메서드를 사용하여 HTML 요소의 속성을 동적으로 설정
• searchInputEl에 CSS 속성인 placeholder 요소를 추가, '통합검색'이라는 글자 추가

-> placeholder: 사용자가 입력하지 않은 상태일 때 나타나는 글자

 

[ 검색바를 마우스에서 뗐을 때의 상황] ↓

// 검색창을 뗐을 때

searchInputEl.addEventListener('blur', function() {

  searchEl.classList.remove('focused'); //searchEl에 classList라는 객체 추가를 한 다음 add 메소드 진행

  searchInputEl.setAttribute('placeholder', ''); // html에 초기 설정

});

 

searchInputEl.addEventListener('blur', ...)

• 검색바 포커스가 해제되었을 때 실행되는 이벤트 리스너
• blur: 입력 필드에서 포커스가 해제될 때 발생되는 이벤트로, 마우스를 떼거나 Tab 키를 눌렀을 때 발생

searchEl.classList.remove('focused')

• classList에서 추가한 focused를 제거

searchInputEl.setAttribute('placeholder', '')

• 검색창에 표시되던 글자를 빈 문자열('')로 설정 = 글자 없앤다는 것과 동일

 

[ 검색바 관련 디자인] ↓

 

헤더에 있고 서브 메뉴에 있는 search 영역 ↓

header .sub-menu .search {

  height: 34px;

  position: relative;

}

 

헤더에 있고 서브 메뉴에 있는 search 안 입력박스 ↓

header .sub-menu .search input {

  cursor: pointer;

  width: 36px;

  height: 34px;

  padding: 4px 10px; /* 내부 여백 */

  border: 1px solid #ccc;

  box-sizing: border-box;

  border-radius: 5px;

  outline: none; /* 입력창을 눌렀을 때 바깥선 안 뜨게 */

  background-color: #fff;

  color: #777;

  font-size: 12px;

  transition: width .4s;  

}

 

검색바가 포커스 되어있을 때 ↓

header .sub-menu .search input:focus { /* 입력바를 누른 상태 */

  cursor:auto;

  width: 190px; /* 가로 너비가 190px */

  border-color: #777; /* 테두리 색깔 */

}

cursor: auto; : 커서를 기본 동작에 따라 자동 동작

이건 pointer;로 해도 무방

 

검색(돋보기) 아이콘 ↓

header .sub-menu .search .material-icons {

  cursor: pointer;

  height: 24px;

  position: absolute;

  top: 0;

  bottom: 0;

  right: 5px;

  margin: auto;

  transition: .4s;

}

 

transition: 애니메이션 변환으로, 검색(돋보기) 아이콘에서 검색 바로 자연스럽게 바꾸기 위해 추가

 

search 영역이 포커스 되었을 때 ↓

header .sub-menu .search.focused .material-icons {

 opacity: 0;

}

검색 바로 바뀌고 검색(돋보기) 아이콘은 사라져야겠죠?

opacity: 선명도

 

선명도를 0으로 설정하여 사라지게 함

 

 

그리하여 만들어진 검색 바

 

초기 화면(아직 안 눌렀을 때

마우스로 클릭했을 때

 

영상으로 보시죠

 

 

 

javascript에 대한 메소드나 함수, 이벤트에 대해 막연히 클론 코딩만 했었는데 이제는 조금씩 이해가 되니 재밌네요 ㅎㅎ

 

오늘도 파이팅입니다!