앞서 답변받은 내용은 검색창을 CSS상에서 변경하는 방법이었지만 이미지로 바꾸는 방법을 알고 싶습니다.
현재 쓰고있는 검색창은 쇼핑몰이며, 검색창이 두깨를 늘리거나하면 디자인적으로 문제가 생기기에 예를 들어 검색창에 배경형태로 쓴다던지 먼가 방법을 강구하고싶습니다.
두번째로 메인화면을 일반 상품 이미지로 구성해서 보더가 잡혀있어서 틀어지길래 틀제거를 해둔상태인데요. 이 상태에서 마우스 오버하면은 이미지 테두리에 빨간색 사각줄이 생기도록 하고싶습니다.
세번째로 쇼핑몰의 경우 GNB가 자동으로 구성되게 되어있는데요 GNB디자인을 이미지 두개로 구성해서 마우스 오버시 색상이 전환되는 아이콘형태의 이미지로 만들려고합니다.
위 세가지 방법에 대해서 작업할 수 있는 방법 부탁드립니다.
1. 검색바의 입력하는 부분은 배경에 흰색이 기본적으로 깔려있고,
그 테두리를 따라 라인을 넣는 방식으로 구성되어있기 때문에
이전에 알려드린 것 처럼 css상에서 수정하셔야 합니다.
최종적으로 만들고자 하는 모양이 아래 미지와 같다면 이전에 수정하신 부분을 아래와 같이 변경해주세요.
47라인
(수정전)
.AB-tsch-box .AB-sch-inputtype03{position:absolute; right: 0;top: 0;width: 44px;height: 23px;_top:2px;}
(수정)
.AB-tsch-box .AB-sch-inputtype03{position: absolute;right: 0;top: 0;width: 53px;height: 45px;_top:2px;}
48라인
(수정전)
.AB-sch-inputtype02{border: 4px solid #2DB400 !important; border-radius: 10px 0 0 10px;width: 100%; height:21px !important; border-right:none !important; margin-right:-4px; vertical-align:middle; line-height:21px;}
(수정)
.AB-sch-inputtype02{border: 6px solid #2DB400 !important; border-radius: 25px 0 0 25px;width: 100%; height:31px !important; border-right:none !important; margin-top: 1px;
padding-left: 11px; margin-right:-4px; vertical-align:middle; line-height:28px;}
css는 솔루션 자체 기능이 아니기때문에 더 구체적으로 알려드릴 수 없는 점 양해부탁드립니다.
포털사이트 검색을 통해 기본적인 css기능에 대한 이해를 해주시고 작업을 진행해주세요.
2. 마우스 오버할 때 이미지가 변경되는 버튼을 만드시려면 아래 매뉴얼을 참고해주세요.
3. GNB 디자인은 css로 구현되어있습니다. 디자인을 변경하시려면
1) 홈페이지요리사 상품에 적용된 GNB디자인을 별도로 구매하시거나,
2) 솔루션 개발업체인 오마이사이트에서 디자인 작업대행을 받으시거나
http://www.ohmysite.co.kr/ab-estm_con
3) 직접 변경하시려면 주변의 css 작업가능자에게 작업 요청하셔야합니다.
