독립된 개체 이기 때문에 <aside>태그에 씨맨틱 마크업을 진행 한다.

마크업 보강을 진행한다!!!

<aside> 💡 1. 그리드 시스템이 어떻게 적용 되어 있는지.

</aside>

검색어가 있을때, 검색어가 없을때 나눠서 마크업진행

search Modal 스타일링

modal 같이 독립적으로 존재하는 친구들은 z-index값을 줘야하는데 변수로 관리하자

그리고 modal을 똑 띄어서 배치하는 것 이기때문에

.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $search-modal-level;
  width: 100%;
  height: 100vh;
  padding: 12px 0;
  background-color: $white;
}

위에만 padding이 있다고 위에만 주지말고 대칭으로 주자.

focus, disabled, hover , active 누를수 있는 요소들은 챙겨주자

X버튼이 position : absolute 로 띄워져서, 뒤에 있는 검색어들 버튼이 hover가 안되는 부분…

부모 요소인 <li> 태그에 hover를 적용해 주면 됩니다.

검색어 목록이 겁나 많을때는 검색어 목록만 스크롤 할 수 있게 만들어준다. 혹은 애초에 검색어 갯수를 제한 한다.