[HTML/CSS] 검색어 입력상자 예제 만들기

안녕하세요 오늘은 웹페이지에서 자주 보았던

 

검색어 입력상자를 만들어보겠습니다.

 

css 코드로 검색상자를 아래와 같이 커스텀 할 수 있습니다.

 

 

css 코드는 아래 스틱코드 링크에서 확인해주세요

 

https://stickode.com/detail.html?no=2699 

스틱코드

 

예제로 사용된 css 파일은

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

위와 같이 링크를 참조 하고 있습니다.

 

이 링크를 타고 가면 여러가지 스타일을 가져 올 수 있기 때문입니다.

 

예를 들어 버튼에 활용된 이미지 또한 저 링크를 타고 온 것입니다.

 

좀 더 자세히 설명드리면 아래 코드에서 

.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

 

content: "\f002"; 이 부분이 보이실 겁니다. f002 라고 하는 모델명의 아이콘을 가져와서 돋보기 모양의 버튼을 만들었습니다.

f003으로 수정하면 어떻게 될까요?

이처럼 버튼의 아이콘이 편지봉투 모양으로 바뀌었습니다. 

 

링크url을 브라우저에 입력해보면

 

위와 같이 search 아이콘 모델명과 envelope 아이콘 모델명을 각각 확인할 수 있습니다.

 

 

코드 원본은 아래 스틱코드 링크를 참고해주세요

https://stickode.com/detail.html?no=2699 

스틱코드