[CSS] input으로 만든 검색창에 돋보기 아이콘 넣기

내부에 돋보기 아이콘이 들어간 검색창을 만들고 싶었다.

HTML을 마크업 한 뒤에 

CSS를 이렇게 작성하니 

모양은 위 사진과 같이 잘 나왔는데 문제가 있었다.

입력창에 텍스트가 가득 차면 아이콘을 가리는 것이었다.

input 태그에 maxlength 속성으로 글자수 제한을 둘까 생각했지만 다른 방법으로 해결하고 싶었다.

그래서 input을 꾸미는 게 아니라 input과 아이콘을 감싸고 있는 div를 꾸미면 될 거라 생각하고 아래와 같이 변경했다.

결과는 성공이었다.