네비게이션 바에 버튼은 있지만 아무 기능도 하지 않던 검색 버든에 기능을 붙입니다.

검색 폼의 기본 형태

검색폼을 불러오는 워드프레스의 내부함수 입니다. 테마의 최상위 디렉토리 안에 searchform.php가 없다면 기본 형태의 검색폼을 불러오게 되는데요. 워드프레스를 뜯어보니 html5 옵션을 준 상태에서의 검색 폼은 이렇게 생겼습니다.

기본 검색폼을 응용하여 searchform.php를 작성하였습니다.

arrow_back

스타일

태블릿 이상의 기기와 모바일의 구성이 다릅니다. 같은 요소를 가지고 다르게 구성하다보니 스타일이 굉장히 길어지는데요. 본문을 아래의 링크로 대신하겠습니다.

[IMAGE: https://res.cloudinary.com/hpiynhbhq/image/upload/v1516981863/pmzfahdcyw6yxjpp91fp.png]

스크린샷의 요소들은 CodePen을 통해 테스트해 볼 수 있습니다.