![UI / UX 웹 퍼블리셔 & 프론트엔드 [16] - background-image [CSS2.0] 포스팅 썸네일 이미지](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcIblbr%2Fbtq0ApF9NR1%2FAAAAAAAAAAAAAAAAAAAAAMecIefxDmM1DF9yCoNjwOnzlcdw_7rfgnYLEmjXeEWy%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D0dFVtNr6Pt44wwN0MTnZvXdW2pU%253D)
STUDY/HTML & CSS
UI / UX 웹 퍼블리셔 & 프론트엔드 [16] - background-image [CSS2.0]
이번 실습은 비교적 간단한? 실습이다. 검색 창하면 떠오르는 사이트 중 네이버의 검색창의 이미지를 따서 만들어보았다. ○ BODY 객체 .search : 검색창 이미지를 씌우기 위한 틀 : 검색창에 입력할 부분을 만들기 위한 객체 ○ HEAD .search { background-image: url("./search.png"); } : 상대 경로를 이용해 배경으로 사용할 네이버 검색창 이미지를 가지고 온다. .search_text { border: 0; font-size: 17px; } : 깔끔한 검색창 입력 부분을 만들기 위해 테두리를 제거하고 폰트의 크기를 설정한다.
