UI / UX 웹 퍼블리셔 & 프론트엔드 [16] - background-image [CSS2.0]

이번 실습은 비교적 간단한? 실습이다.

검색 창하면 떠오르는 사이트 중 네이버의 검색창의 이미지를 따서 만들어보았다.

 

index16.html

 

○ BODY

 

<div> 객체 .search

: 검색창 이미지를 씌우기 위한 틀

 

<input type="text" class="search_text">

: 검색창에 입력할 부분을 만들기 위한 객체

 

 

 

○ HEAD

 

.search { background-image: url("./search.png"); }

: 상대 경로를 이용해 배경으로 사용할 네이버 검색창 이미지를 가지고 온다.

 

 

.search_text { border: 0; font-size: 17px; }

: 깔끔한 검색창 입력 부분을 만들기 위해 테두리를 제거하고 폰트의 크기를 설정한다.

 

 

index16.html - 결과