기현이♡경민이♡예진이의 해피하우스♥ :: IE8 웹조각 만들어 보자.. (간단)

괴스트

예진이와 고고씽!!

Rss feed Tistory

Dev/php 2010/04/14 16:12

IE8 웹조각 만들어 보자.. (간단)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

네트웍이 안되는 특수환경에서 프로젝트를 진행하다 복귀해 보니 최신정보에 상당히 둔감해졌다는 생각이 많이 든다.
그래서 꿈춰두었던 내용들을 살포시 꺼내본다.

Internet Explorer 8 출시 이후 이미 모든 포털에서 웹조각(Web Slice)기능들을 많이들 구현해 놓았는데
혹시나 모르시는 분들이 계실것 같아서 웹조각 만드는 방법에 대해서 공유한다.

최종 HTML소스

webSlice.rar

결과화면 : 로컬에서 해서 안되서 서버를 띄웠답니다. ㅡ.,ㅡ;

웹조각 추가하기

실제 적용예

웹조각 삭제하기

원본소스 나갑니다.

<div id="bugslice" class="hslice">
    <div class="entry-title">데꾸벅 웹조각 테스트 제목</div>
    <div class="entry-content">
         웹조각 내용이 들어가는곳입니다.<br />
         .entry-title을 display:none이나 화면에 필요한걸로 바꾸면 되겠죠<br />
         
         아이디값은 나중에 버튼으로 추가하려면 좋아요~
        </div>
    </div>

<html>

<head>
<title>Web Slice Example</title>
</head>
<body>
   <div class="hslice" id="SliceID">
      <span class="entry-title">Slice Title</span>
      <a rel="entry-content" href="http://techbug.tistory.com/" style="display:none;">
        실시간 웹조각 컨텐츠
      </a>

      <a rel="bookmark" href="http://techbug.tistory.com/" style="display:none;">북마크할때</a>
      <a href="http://techbug.tistory.com/" target="_blank">웹조각의 링크를 다른창으로 열때</a>
      <span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때</span>
   </div>
</body>
</html>

이벤트핸들러로 달기

DIV대신 a태그 사용시 (웹조각에서 보여줄 페이지 지정하기)

<a rel="entry-content" href="http://techbug.tistory.com"> </a>

<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="entry-content" href="링크주소.html" style="display:none;"></a>
</div>

Feed용

<a rel="feedUrl" href=http://techbug.tistory.com/script/powerEditor/pages/">

<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="feedurl" href="피드주소.html" style="display:none;"></a>
</div>

북마크용

<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="bookmark" href="북마크.html" style="display:none;"></a>
</div>

웹조각 아이콘 바꾸기

원래의 웹조각 아이콘을 바꾸는 방법입니다. 기존 파비콘(favicon)을 바꾸는 방법과 마찬가지로 아래와 같은 방법으로 바꿀수 있습니다.

웹조각기능끄기
이미지툴바기능끄기와 같은 방법으로 웹조각 기능끄기 태그는 아래와 같습니다.

웹조각캐쉬없애기 (다음글을 참조하세요)

<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때쓰기</span>

파이억폭스에서도 IE의 웹조각기능 사용하기
Firefox용 플러그인 WebChunks 3.5에서도 되네요
IE8에 새로 도입되는 WebSlices 기능을 파이어폭스에서 구현한 확장기능입니다.
툴바에서 Webslices 기능이 지원되는 사이트의 업데이트를 보기 좋게 확인 할 수 있습니다.
다운로드