[CSS] input 태그 검색창 만들기

0. text 타입의 <input> 태그 만들기

<div class="navbar-search">
	<input type="text" placeholder="검색어를 입력해주세요">
</div>

 

1. 검색창 크기 변경

.navbar-search input {
	width: 500px;			//검색창 가로 길이
	height: 45px;			//검색창 세로 길이
	font-size: 20px;		//검색창 내부 글씨 크기
}

 

2. 검색창 안에 이미지 삽입 (돋보기)

.navbar-search input {
	width: 500px;
	height: 45px;
	font-size: 20px;

	background-image: url('');			//삽입할 이미지 url
	background-repeat: no-repeat;		//이미지가 작아서 반복되는 것 방지
	background-size: 40px;				//이미지 크기 설정
	background-position: right;			//이미지 위치 설정
}

 

3. 검색창의 모서리 둥글게 하기

border-radius: 10px;

.navbar-search input {
    width: 500px;
    height: 45px;
    font-size: 20px;
    border-radius: 10px;		//모서리의 둥근 정도 설정
    
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: right;
}

 

4. 검색창 클릭시 파란색으로 변하지 않게 하기

<a>태그로 링크를 건 글씨를 클릭했을 때 파란색이 되는 것과 비슷한 반응을 발견하였다.

이를 없애기 위해 outline: none;

 

 

완성!!