네이버메인 IE7 SearchProvider 버튼 처리

카테고리 Connect | 작성일

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값을 상대적으로 높게하여 클릭에 지장이 없도록 처리 하고, 네이버를 시작페이지로버튼은 검색창으로 버튼이 들어올 자리만큼 좌측으로 이동 시키게 됩니다. 완성된 모습은 아래와 같습니다.

IE7에서 본 네이버를 시작페이지로 + 검색창으로 버튼이 포함된 네이버 메인 화면

작성자NTS 접근성팀 NULI
프로필 사진
널리 공유하는 웹 표준 개발 가이드
태그
메인 , SearchProvider , IE7
Trackbacks 8929
엮인글 주소 http://nuli.nhncorp.com/606/trackback