[CSS] input, button 태그 이용해 검색창 만들기

웹사이트에서 흔히 볼 수 있는 검색창.  웹사이트를 만들고 싶은데 검색창은 어떻게 만들까요?

이번 시간에는 input, button 태그를 이용해 검색창을 만드는 방법에 대해 알아보겠습니다. 

---

html에는 input 태그가 있습니다. 이 input 태그는 사용자가 입력을 하면 받아들이는 창을 만들어주는 태그인데요. type 속성을 이용해 입력 방식을 바꿀 수 있습니다. 타입 종류에는 여러가지가 있는데요. 오늘은 검색창을 만들어보는 시간이니 텍스트를 입력하는 창을 만들어보겠습니다.

 

<input type=text>

 

이렇게 input 태그에 type 속성을 텍스트로 주면

 

result

 

이렇게 텍스트가 입력되는 창이 뜹니다. 그런데 검색을 할 수 있는 버튼이 없네요. 여기서 <button>태그를 이용해 검색 버튼을 만들어주면 됩니다.

 

<input type="text"> 
<button>search</button>

result

 

짠. 이렇게 검색창이 만들어집니다. 참 쉽죠? 그런데 여기서 우리는 검색창의 디자인을 바꾸고 싶습니다. 어떻게 해야할까요? 우리가 배운 CSS를 사용하면 됩니다. 다양한 디자인 속성들이 있습니다. 

 

1. 테두리(border) 속성

 

검색창의 모서리를 동그랗게 바꿔볼까요? (border-radius 속성)

 

input{
border-radius:50px;
}

result

 

테두리의 모양을 바꾸고싶습니다. (border 속성)

 

input{
border-radius:50px;
border:dotted;
}

result

 

dotted: 땡땡이; solid: 실선; dashed: 점선; double: 두개의 실선; 등의 디자인 값이 있습니다. 색도 border 속성을 이용해 바꿔주면 됩니다.

 

2. 크기 속성

 

검색창의 높이와 넓이를 다르게 설정하고 싶을때는 크기 속성을 이용합니다. width와 height 속성을 이용하면 됩니다.

 

input{
width:300px
height:40px
}

result

 

3. 이미지 삽입

 

검색창에 이미지를 삽입하고 싶다면 background-image 속성을 사용하면 됩니다. background-position 속성을 이용해 삽입한 이미지의 위치를 지정할 수 있습니다. 이때 적용한 배경이나 아이콘이 반복되지 않게 하려면  background-repeat: no-repeat;를 적어줍니다.

input{
background-image:url("사이트주소나 파일명")
}

 

button 태그에도 똑같이 적용되니 똑같이 적용하시면 됩니다 :-)

 

 

---

오늘은 html과 css를 이용해 검색창을 만드는 방법에 대해 알아보았습니다. 조금이나마 유용하셨으면 좋겠습니다.