검색창 이렇게 만들고 싶은데 어떻게 만들어야되나요?

Question

3717390881_1516696650.4163.png

위 처럼 검색창하고 똑같이 만들고 싶은데 만드는 방법좀 부탁드려욤.

제작으뢰 마끼라고 할 수도있어서 미리 말씀드려요.

제작의뢰 정도는 아닌것 같아요.

사랑은봄비처럼 · Accepted Answer

별로 어려울 것 없어요.

그냥 F12 눌러서 뜯어보면 됩니다...

그래도 모르겠으면, 웹페이지 저장하고

찬찬히 살펴보면 됩니다.

시간이 오래걸려도 뜯어보고 검색하고 해외포럼 뒤지다 보면

답은 나옵니다.

이렇게 css나 코드 뜯어보고, 내 홈페이지에 적용했는데

잘 안된다 싶으면, 그때 질문하시는게 어떨까요?

해피정 · Answer

1. 첨부한 이미지와 비슷하게 html 문서를 구현하세요.

2. <input type="text" style="border:0px;"> 을 준비하세요.

3. 돋보기 버튼을 투명 png로 준비하세요.

4. 검색창의 이미지를 png 파일로 준비해서 background 로 놓으세요.

5. form 으로 감싸으세요.

이런 순서로 작업하면 원하는 모습을 만들수 있습니다.

만들어진 형태로 받기를 원하신다면 https://sir.kr/request 에 의뢰하세요.

헉뚜님 · Answer

좋은정보 감사~

나시 · Answer

제일 간단한건 input 을 투명하게 만드세요

그러니까 저 이미지에 밴드, 게시글 위에 있는 색으로 테두리도 그리고 내부도 칠하고 한뒤에

저걸 백그라운드 이미지로 만들어서 적절히 붙히면 똑같습니다. ^^

뒤에 돋보기 이미지에는 이미지 맵으로 링크 달면 되요 ㅋㅋ