네이버메인 IE7 SearchProvider 버튼 처리
IE7의 배포가 되면서 네이버 메인화면에서도 조그만 변화들이 몇 있었습니다.
그 변화중 IE7에서는 브라우져 자체에 검색창이 추가됨에 따라 검색창의 검색사이트를 네이버로 설정할수 있는 간편한 링크를 제공합니다.
*IE7에서 본 네이버 메인 화면
위 그림에서 를 클릭하게 되면 검색창 기본 검색엔진이 네이버로 설정되게 되는데, 해당 기능은 IE7전용 기능입니다. 그래서 IE7버전일 경우만 해당 버튼인 를 노출하게 되고 그 이하버전인 IE6부터는 아래와 그림과 같은 모양으로 제공됩니다.
*IE6에서 본 네이버 화면
좀더 자세히 보면 IE7을 제외한 나머지 버전 및 브라우져에서는 아래와 같은 버튼이고 1. IE7에서는 아래와 같은 모양입니다 2. 일반적인 방법으론 CSS핵을 이용해서 버튼이미지를 1번 2번 이렇게 2개를 만든 후 IE7에서는 2번 버튼을 노출시키고 IE7이 아닌 경우에는 1번을 노출시키는 방법이 일반적일 것 같습니다. 그렇게 되면 IE7의 경우 버튼 이미지를 새로 만들어 적용해야 할텐데 그러면 IE6이하에서 보이는 기존 버튼인 을 활용못하는 것이 아쉬워 IE7에서는 순수하게 새로 생긴 요소만 생성 하여 적용하는 방법을 고안해봤습니다. 게다가 이미지 크기도 상대적으로 줄이는 효과역시 볼수 있겠습니다.. 하지만 기존 버튼인 을 활용하려니 우측 끝 모양이 라운딩 처리되어 있어 한번에 붙이는 것이 아래와 같이 문제가 됩니다. + = 그래서 사용한 방법이 1번 버튼의 우측라운딩 부분을 버튼으로 겹쳐 중첩의 형태로 적용합니다.
CSS의 Position을 이용하여 겹치는 형태로 하였고 중첩시키는 형태라 기존 버튼 부분의 요소는 변경하지 않고 IE7에서 보여야 할 요소에 해당하는 코드만 Comment Hack을 이용하여 IE7에서만 보이도록 처리합니다. 도식화된 모습은 아래 그림과 같습니다.
서로겹쳐진 버튼들의 클릭영역에 대한 중첩문제는 버튼의 z-index값을 상대적으로 높게하여 클릭에 지장이 없도록 처리 하고, 버튼은 버튼이 들어올 자리만큼 좌측으로 이동 시키게 됩니다. 완성된 모습은 아래와 같습니다.