검색 구현

• 이번에는 search라는 클래스를 가진 검색 부분을 만들어보자

1, 우선 search의 범위부터 확인해보자

.sub-menu .search{
  background-color: red;
}

2, input 요소에 코드를 작성해준다

.sub-menu .search input{
  width: 36px;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
  outline: none;
  background-color: white;
  color: #777;
  font-size: 12px;
 

}

이렇게 코드를 출력해보면 input요소의 부분이 너무 짧은 것을 볼 수 있을 것이다

그래서 이번에는 focus라는 가상 클래스 선택자를 사용해보자

.sub-menu .search input:focus{
  width: 190px;
  border-color: #699900;

}

이건 input요소가 focus가 될 경우 가로 너비를 190px로 만들어주고

테두리의 컬러를 변경해준다

근데 이 때 너무 뽝뽝 움직이기 때문에 transition을 제공한다