Web/WEB기본

[펌]IE8의 WebSlices기능을 웹사이트에 추가하기

saltdoll 2009. 4. 10. 17:17
반응형
WebSlices라는건 IE8에 추가된 브라우저 부가기능인데요..
개인적으로는 굉장히 마음에 드는 기능입니다.

대략 어떤 기능인지 살펴보자면..


웹페이지상에 WebSlices기능이 적용된 부분이 있다면 마우스 커서가 올라갔을때 위처럼 초록색상자가표시되면서
WebSlices기능이 있는것을 알려줍니다.


그리고 초록색 아이콘을 누르면 아래와같은 창이 나타나 WebSlice를 자신의 브라우저에 추가가 가능합니다.



추가된 WebSlices는 링크바에 표시된 링크를 클릭하면 아래와 같이 간략하게 해당Feed?의 내용을 확인할수 있는데요..


해당 웹사이트에 가지않고 정보를 바로바로 볼수있다는 거죠..
실제로 매일매일 접속하는 사이트가 있는데 대부분이 즐겨찾기를 해놓는다고 해도
원하는 정보에 액세스하려면 몇번의 클릭이 필요한 경우가 있죠..
WebSlices를 서포트하는 사이트라면 그런 불편함이 없어집니다..ㅎ

기능적으로는 RSS의 변형된 형태로 볼수도 있는거 같고 사용가능한 곳은 무궁무진합니다..
기술적으로는 html의 특정코드(HTML Elements의 class속성이 hslice)에 브라우저가 WebSlices로 인식하는 형식입니다.
예를 들어
<div class="hslice" id="lemonbrainWebslice">
이건 웹슬라이스입니다.
</div>
위의 코드로 WebSlices라는걸 IE가 인식하는것이죠..굳이 div가 아니어도 상관없고 어떠한 요소여도 반응합니다.
다만 주의할건 css를 정의할때 hslice라는 이름을 피해야한다는거..-.-;;

상당히 간편한 방법으로 기능을 추가할수 있죠.
개인적으로는 심플하지만 굉장히 활용도가 높은 아주 좋은 기능이라고 생각합니다.




아주 간단하게 기능추가가 가능하니 샘플코드로 WebSlices 기능을 추가하는 방법을 설명토록 하겠습니다.
<div class="hslice" id="lemonbrainWebslice"> <-- id속성은 필수입니다. -->
<div class="entry-title" style="display:none;">lemonbrain</div> <-- 링크바에 표시되는 타이틀입니다. 데이터갱신시 타이틀도 자동으로 갱신되니까 활용할 방법이 많습니다.-->

<div class="entry-content" >
     WebSlices에 표시할 내용
</div>
</div>
붉은 색 부분만 정의하시면 됩니다..정말 간단하죠??


위의 간단한 샘플외에도 표시할 데이터를 XML로 건네준다든지..WebSlices내용의 유효기간(유효기간이 지나면 자동으로 갱신해줌)을 정한다던지..

등의 기능이 있으니 더욱 흥미있으신 분들은 아래 링크를 참고해보세요.
http://msdn.microsoft.com/en-us/library/cc196992(VS.85).aspx


출처: http://blog.lemonbrain.net/77


[주의 사항]
iframe은 지원하지 않습니다.
Frames are not supported
:
That is correct; WebSlices are only supported at the top level of a page; they are not supported in frames.
반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)