Klip 만들기 기초 - Klip 파일 기본구조편에서 <style> 부분만으로도 klip 제작이 가능하다고 했다.
그래서 이번에는 style 만으로 만드는 법을 알아보도록 하자.


수집할 게시판 선정시 주의사항은 게시판 제목을 보여주는데 있어서 일정한 패턴이 있어야 가능하다.
대부분의 게시판들은 특정한 게시판을 쓰는 경우가 많으며(제로보드, 그누보드 등)
제목 부분이 일정한 패턴에 의해서 만들어 지게 된다.
RSS가 지원하지 않는 사이트의 klip을 만들기 위해서는 그 일정한 패턴을 style에 입력해주게 되면 자동으로 읽어오기 때문에 쉽게 사용할 수 있다는 장점이 있다.
만약 RSS가 지원한다면 Klipfolio의 강력한 기능 Multi RSS - 미니위니 RSS 추가하기글을 참조하여서 RSS를 추가해서 사용하면 된다.


예제로 사용할 사이트는
영남대학교 자유게시판으로 하도록 하겠다.
(특별히 무슨 연관이 있는건 아니다-_-)




기본구조를 만들도록 하자.
  1. <klip>
  2.     <owner>
  3.         <author>Mooki</author>
  4.         <copyright>Mooki</copyright>
  5.         <email>mooki83지메일(스팸메일방지-_-ㅋ)</email>
  6.         <web>http://mooki83.tistory.com</web>
  7.     </owner>
  8.     <identity>
  9.         <title>영남대학교 자유게시판</title>
  10.         <version>0.1</version>
  11.         <description>RSS지원하지 않는 영남대학교 자유게시판을 klip으로 만들어 보자.</description>
  12.         <keywords>Klip 만들기 예제</keywords>
  13.     </identity>
  14.     <locations>
  15.         <contentsource>http://www.yu.ac.kr/_korean/community/index.php?c=plaza_02_list&category=1</contentsource>
  16.         <icon>http://www.yu.ac.kr/favicon.ico</icon>
  17.         <defaultlink>http://www.yu.ac.kr/_korean/community/index.php?c=plaza_02_list&category=1</defaultlink>
  18.         <banner>http://imgwww.yu.ac.kr/_korean/main/image/foot_logo.gif</banner>
  19.         <kliplocation>(예제이므로 빼도록하겠다)</kliplocation>
  20.     </locations>
  21.     <setup>
  22.         <refresh>30</refresh>
  23.         <country>kr</country>
  24.         <language>ko</language>
  25.         <codepage>euc-kr</codepage>
  26.     </setup>
  27.     <messages>
  28.         <loading>페이지를 읽어오는 중입니다.</loading>
  29.         <nodata>데이터가 없거나 klip이 정상적으로 작동하지 않습니다.</nodata>
  30.     </messages>
  31.     <style>
  32.     </style>
  33. </klip>



기본구조를 만들었으면
style을 채우기 위해서 게시판 소스 분석에 들어가도록 하자
패턴을 찾기 위한 제일 좋은 방법은 게시판 첫번째 제목을 검색하고 그 주변에서 찾는 것이 가장 쉽다.

제일 첫 게시물 제목은 '질문있어요 답변plz' 였다.

첫 게시물 제목 검색 '질문있어요 답변plz'
작게 보이므로 클릭해서 크게 보도록 하자



아래 제목과 비교하게 되면 일정한 패턴이 있는 것을 볼 수가 있다. 
 
  1.        <tr>
  2.              <td>&nbsp;</td>
  3.              <td height="28" align="center" class="dot11">게시 번호</td>
  4.              <td align="center">&nbsp;</td>
  5.              <td style="padding-left:10;"><a href="주소" title="제목">제목</a></td>
  6.              <td align="center">&nbsp;</td>
  7.              <td align="center" class="dot11">작성자명</td>
  8.              <td align="center">&nbsp;</td>
  9.              <td align="center" class="dot11">작성시간</td>
  10.              <td align="center">&nbsp;</td>
  11.              <td align="center" class="dot11">조회수</td>
  12.              <td>&nbsp;</td>
  13.        </tr>


패턴이 보이지 않는다면..
어쩌지 (후덜덜)
자세히 보면 반드시 반복되는 구간이 있다.
못찾겠다 싶으면 여러번 보면 나올꺼다.. 뿅하고? +_+

아 ~ 그럼 이제 저걸 style로 만들면 되는구나! 라고 팍팍 느낌이 온다 ~



기본구조 설명할때 style 부분에서
기본적으로 '선택자(HTML 등 태그명), 아이템명'이라고 했던거 기억하나?
(기억 안나면 잠깐 가서 보고 오자 ㅡ_ㅡ;)

그렇다 ! 이제 선택자 부분을 채우면 되는 것이다.

<tr>는 혼자서 동작하지 않는다.
반드시 그 전에 <table>이 있어야 한다. 그렇기 때문에 table을 먼저 찾아보자
(HTML 부분에 대해서는 설명하지 않겠다 -_-ㅋ)


<tr> 위로 쭉 올라가다 보니까
<table>이 보였다.
이중에서 제일 아래 <!-- 목록 시작 --> 바로 아래 있는 테이블이 그 게시판 제목을 감싸고 있는 테이블이다.

<table width="685" border="0" cellspacing="0" cellpadding="0">


위에도 똑같은 모양의 테이블이 있다고 해도 당황하지 말자
그 아래 있는 <tr>이나 <td>에 대한 속성이 다 다르기 때문이다.
그리고 style을 잘 지정해주면
패턴 조건에 만족하는 데이터들만 아이템으로 만들어지니 크게 걱정하지 않아도 된다.
(그렇기 때문에 더욱 더 패턴을 잘 지정해주어야 한다.)

이쯤에서 style을 만들어 줘볼까?

 table[width="685"] tr {
  type: item;
 }

table tr 부분을 하나의 아이템으로 묶겠다는 선언이다.
나중에 가면 item 선언을 위에서 하느냐 아래서 하느냐에 따라서 차이가 있지만 일반적으로 제일 위에 써준다.

태그명
[속성="값"] - 태그중에서 속성이 값과 같은 것을 찾겠다는 말이다.
(뭔가 말이 좀 어려운거 같은데 -_-;;)

아까 확인했던 패턴을 보면서 다음으로 넘어가도록하자
운이 좋게도 제목이 있는 줄에 <td> 속성중에 유일한 것이 있다.

style="padding-left:10;"

우훗 !
이렇게 되면 무쟈게 쉬워지지 후후후..

 td[style="padding-left:10;"] {
  itemcol: 1;
  noterow: 1;
  label: '제목';
  content: text;
 }

이렇게만 해줘도 !!



제목을 잘 뽑아오는 것을 볼 수 있다.


자,
이제 강좌 끝 -_-

.
.
.
.
.
.
.
.

이러면 섭하지 않나 ? ㅋ
klip이 이렇게 간단할수도 있다.
그래도 더 파워풀하게 만들고 싶다.

그러기 위해서
나는 더 빡시게 머리 쥐어 뜯어가면서 글을 더 쓰는거다 -_-;


글이 너무 길어지는 거 같아서

2부작으로 하자 -_-


또 컴퓨러님께서 감당 못하고 뻗으면 나만 손해 ㅜ_ㅜ
어흑..

요즘 업그레이드하고 알아보고 있는데
왜 갑자기 값이 오르는 것이냐!
ㅜ_ㅜ 어흐흑..

Posted by Mooki

댓글을 달아 주세요

  1. BlogIcon 낙훈 2009.02.01 17:04  댓글주소  수정/삭제  댓글쓰기

    스타일 파싱할 때보면 이렇게 <table width="685" border="0" cellspacing="0" cellpadding="0">
    table width="" border="" ... table 뒤에 width도 있고 border도 있고 cellspacing 등도 있는데
    왜 width값만 스타일을 만들어주는 건가요?

    table[width="685"] tr {
    type: item;
    }

    이렇게 하면 안되는 건가요? ^^;

    table[width="685" border="0" cellspacing="0" cellpadding="0"] tr {
    type: item;
    }

    그리고 예제로 둔 제목 html 코드를 살펴보면
    <td style="padding-left:10;"><a href="/_korea/community/index.php?c=plaza_02_read&category=1&seg=1002271&page=1&next_seq=1002270#top2" title="질문있어요 답변plz">질문있어요 답변plz</a></td>
    이렇게 a 태그도 있는데 스타일 만들 때

    td[style="padding-left:10;"] {
    itemcol: 1;
    noterow: 1;
    label: '제목';
    content: text;
    }

    대신에 a를 넣어서

    td[style="padding-left:10;"] a{
    itemcol: 1;
    noterow: 1;
    label: '제목';
    content: text;
    }

    이렇게 해주면 안되나요? ^^;

    • BlogIcon Mooki 2009.02.02 04:17 신고  댓글주소  수정/삭제

      table[width="685" border="0" cellspacing="0" cellpadding="0"] tr {
      type: item;
      }
      이렇게 사용하셔도 됩니다.
      그냥 취향이였습니다. ㅋ
      (길어지면 귀찮아서 -_-;;)

      뒤에 사용하신 a를 넣는 것도 강좌 부록을 통해서 말씀드렸습니다.
      사용하실 수 있습니다 ^^

  2. BlogIcon 낙훈 2009.02.01 17:09  댓글주소  수정/삭제  댓글쓰기

    일전에 제가 table에서 tr의 속성이 없다고
    table[width="685"] tr[] {
    type: item;
    }
    이렇게 []괄호를 매긴 적이 있는데 이래서 피드를 못 가져온 것이었군요 ㅠ_ㅠ;;

  3. BlogIcon 낙훈 2009.02.01 17:18  댓글주소  수정/삭제  댓글쓰기

    (위 첫번째 코멘트에 대한 추가 댓글입니다.)
    아!;; a 를 쓰게 되면 a 태그가 달린 부분만 추출하게 되는 거군요. ^^;;
    a를 빼게 되면 td 내에 있는 모든 것을 가져오는 거군요.
    a를 쓰고 보니 뒤에 코멘트 갯수가 안 붙길래, html 코드를 보니
    <td style="padding-left:10;"><a href="/_korean/community/index.php?c=plaza_02_read&category=1&seq=1001873&page=1&next_seq=1001872#top2" title="정부학자금대출질문이요...급합니다...">정부학자금대출질문이요...급합니다...</a></td>
    이렇게 html에서는 댓글이 없네요. ^^; 게시판에서 그냥 출력하게 하는가 보네요 ㅎ

    • BlogIcon Mooki 2009.02.02 04:19 신고  댓글주소  수정/삭제

      <a> </a> 태그 사이에 댓글표시가 들어가지 않아서 a를 써주게 되면 게시물 글자만 불러오게 됩니다.
      말씀하신 그대로 입니다 ^^

  4. BlogIcon 낙훈 2009.02.01 17:19  댓글주소  수정/삭제  댓글쓰기

    만약에 셀 구조가
    <td><a></a><b></b><d></d></td>
    이렇게 되어있을 때 a와 b만 가져오고 싶다면 어떻게 하나요?

    td[] a,b {
    }
    이렇게 하면 될까요? ^^;

  5. 익명 2009.12.13 16:13  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다