Klip 만들기 기초 - 무작정 만들기(RSS 지원하지 않는 사이트)를 통해서 일단 제목을 뽑아오는 부분까지는 만들어봤다.
오오~
이제 조금 되는거 같은 그런 느낌이 오기 시작하는거 같은데 ~ ㅋ
하지만
제목만 뽑아오는 걸로는 뭔가 부족한거 같은 느낌이 들고
링크도 걸어주고 싶고 작성시간이랑 누가 썼는지도 알고 싶어진다.
klip으로 그거까지 안되나?
라는 생각을 했다면
이번 강좌를 통해서 해결하도록 하자.
지난 강좌에서 중요했던 패턴 부분과 완료했던 부분(제목이 나오던 거-_-)을 다시 보도록 하자.
무작정 만들다 보니까 style 속성에 대한 부분 설명을 다 빼먹었지만 ㅡ_ㅡ
style 속성에 대한 부분은 그 설명만으로도 강좌 하나가 나올테니 -0-;
여기서는 간단히 설명만 하고 넘어가겠다
여기 다나와 장터 klip을 보자.
type : item;
- 노란색으로 바뀐 저 한 줄이 하나의 아이템에 해당한다.
type : image;
- 이미지 파일을 표시할 때 지정할때 사용하는 속성이다.
type : link;
- 아이템에 대한 링크를 지정할때 사용하는 속성이다.
아이템을 클릭 시 지정해준 링크로 열어주게 되어있다.
itemcol : 1;
- 화면상으로 ① 그래픽카드 제품 사진이 작게 보이는 저 부분이 itemcol 1번에 해당하는 부분이다.
EVERTOP 지포스..., HP Business... 에 해당하는 부분은 itemcol 2번에 해당한다.
그렇게 가격과 시간은 itemcol 3,4에 해당하게 된다.
즉, itemcol 아이템 목록에서 나오는 순서에 대해서 지정하게 되는 것이다.
noterow : 1;
- 화면상으로 ② 그래픽카드 제품 사진도 크게 보이고 각종 설명에 대해서 나와있는 부분이다.
마우스를 올리면 보이는 자세한 설명 부분이 되는 것이다.
그중에서 제품사진이 첫번째 줄에 나와있는데 그것과 관련된 속성이 noterow 1번에 해당한다.
itemcol과 다르게 지정할 수 있으니 각자 취향에 맞게 구성하면 된다.
(제품 사진이 꼭 itemcol 1번이라고 해서 noterow에서도 1번일 필요는 없다는 이야기)
label : '제목';
- Note 부분에 보일때 앞에 '제목'이라는 이름표를 붙여주는 것이다.
notelabel: false;
- Note 부분에 보이는 이름표를 안보게 해준다. 만약 보고 싶다면 지정하지 않거나 true로 지정하면 된다.
content : text;
- 해당 부분을 무슨 속성으로 할껀지를 지정하는 것으로 대부분 글자가 있는 부분에 text로 써준다.
(맞나? ㅡㅡ;;;)
많이 쓰게 되는 부분은 이정도 ? 될 것 같다.
자세한 내용은 역시 공식 홈페이지를 참고하는 것이 좋다.
Supported CSS Properties : http://developer.klipfolio.com/devguide/apas02
(나중에 기회가 닿으면 자세히 한번 다뤄볼까 -_-)
다시 무작정 만들기로 돌아와서
제목만으로는 부족하다는 생각이 팍팍 들게 되었다면
이제 작성자명, 작성시간을 뽑아보도록하자
이것도 정말 아주아주 쉬운 방법으로 뽑을 수 있다!
일단 패턴중에서 <tr>을 제외하고 <td> 부분만 보도록 하자
작성자명이 6번째 였으니까..
작성시간은 8번재, 조회수는 10번째 알아서 추가할 수 있으리라 믿는다 ㅡ_ㅡ;
(하나를 배우면 10개를 까먹는 나는...)
뭐 이따구야 -_-
왜 이리 허무해 !! 한다면
이 강좌는 그만보고 가서 만들어 보기를 권한다.
이정도면 할 수 있다!
하지만 이게 끝이 아니라는거 ~
막상 제목하고 작성자명이랑 다 빼왔는데..
게시판 글을 보기위해서는 게시판을 가서 제목을 클릭하고 그래야 하는건가.. 하는 아쉬움이 생긴다.
그럼 안되지 ~
그러지 않기 위해서 지금 klip을 사용하고 있지 않은가!
그러면 이번에는 주소를 빼와보자.
여기부터 약간 머리가 복잡해질수도 있으니
이해가 안될때는 두세번 보면 이해가 되리라........... -_-;;
(이 뭐.. 무책임한 -_ ........)
이번에는 링크다.
링크된 곳에 패턴은 <a href="주소" title="제목">제목</a> 이렇다.
일단 어떻게 써야하는지 소스를 보여주고 설명을 하겠다.
어라 ? 뭐지 저 뒤에 attribute 는?
눈치 빠르신 분들은 이해하셨겠지만
그렇다.
a 라는 선택자(태그)의 속성값을 빼기 위해서는 attribute()를 사용하면 된다.
주의할 점은 : 표시가 하나가 아니라 두개 라는 점이다.
td[style="padding-left:10;"] a::attribute(href)
윗 부분을 그냥 문장으로 풀어서 말하자면
td 태그에 style이 "padding-left:10;" 이면서! a 태그의 href 속성(attribute)값을 뽑아라.고 해석할 수 있겠다.
간단하게 style 설명할때 말했듯이
아이템에 대한 링크 속성이므로 type: link; 로 해야 한다.
그리고 base: 는 뭐지? 라는 생각이 떠오를 것이다.
그것은 그 링크 앞에 붙게 되는 기본 주소이다.
만약 링크주소가 http://........ 주소까지 다 붙어있으면 좋으련만
어차피 해당 도메인 이하에 있는 주소일 경우는 반복되기 때문에 필요가 없어서 안 썼을 것이다.
그렇기 때문에 기본이 되는 주소로 앞에 주소를 써주어야 한다.
해당 게시판의 경우
링크가
"/_korean/community/index.php?c=plaza_02_read&seq=게시물번호&category=1&page=1#top2"
추출되었는데 이 주소만으로는 게시판을 열수가 없어서 게시물을 읽어보았더니
"http://www.yu.ac.kr/_korean/community/index.php?c=plaza_02_read&category=1&seq=1002326&page=1&next_seq=1002325#top2" 이러한 주소로 되어있는것을 알수있었다.
링크에 다가 굵은 부분만 추가하면 되겠구나!
그럼 base에 적어주면 되겠구나!
이러면..
다 끝났다!
진짜 제대로 된 klip 하나가 나왔다.
이렇게 보니까 klip 만들기도 정말 쉽지 않은가?
참 쉽죠잉 ~ ?
퍼갈때는 출처는 반드시 ~ 꼭꼭꼭 !!
오오~
이제 조금 되는거 같은 그런 느낌이 오기 시작하는거 같은데 ~ ㅋ
하지만
제목만 뽑아오는 걸로는 뭔가 부족한거 같은 느낌이 들고
링크도 걸어주고 싶고 작성시간이랑 누가 썼는지도 알고 싶어진다.
klip으로 그거까지 안되나?
라는 생각을 했다면
이번 강좌를 통해서 해결하도록 하자.
강좌에 들어가기 앞서서
이 강좌는 최대한 style만으로 만들도록 되어있기 때문에 정말 전문적으로 정규식이 들어가서 패턴을 뽑아내고 출력하고 이런 부분에 대한 것은 빼고 설명하도록 하겠다.
단순히 style 만으로 ! 뽑아오는 것이기 때문에
초보 사용자들에게도 쉽게 느껴지기를 바란다.
(나만의 바램인가 ㅡ_ㅡ)
지난 강좌에서 중요했던 패턴 부분과 완료했던 부분(제목이 나오던 거-_-)을 다시 보도록 하자.
- <tr>
- <td> </td>
- <td height="28" align="center" class="dot11">게시 번호</td>
- <td align="center"> </td>
- <td style="padding-left:10;"><a href="주소" title="제목">제목</a></td>
- <td align="center"> </td>
- <td align="center" class="dot11">작성자명</td>
- <td align="center"> </td>
- <td align="center" class="dot11">작성시간</td>
- <td align="center"> </td>
- <td align="center" class="dot11">조회수</td>
- <td> </td>
- </tr>
이런 식으로 반복될 것만 같은 패턴
- <style>
- table[width="685"] tr {
type: item;
} - td[style="padding-left:10;"] {
itemcol: 1;
noterow: 1;
label: '제목';
content: text;
} - </style>
뭔가 빈곤해 보이지만 일단 제목은 뽑아오는 <style>
(기본 설정 부분을 제외하고 <style> 부분만)
무작정 만들다 보니까 style 속성에 대한 부분 설명을 다 빼먹었지만 ㅡ_ㅡ
style 속성에 대한 부분은 그 설명만으로도 강좌 하나가 나올테니 -0-;
여기서는 간단히 설명만 하고 넘어가겠다
여기 다나와 장터 klip을 보자.
type : item;
- 노란색으로 바뀐 저 한 줄이 하나의 아이템에 해당한다.
type : image;
- 이미지 파일을 표시할 때 지정할때 사용하는 속성이다.
type : link;
- 아이템에 대한 링크를 지정할때 사용하는 속성이다.
아이템을 클릭 시 지정해준 링크로 열어주게 되어있다.
itemcol : 1;
- 화면상으로 ① 그래픽카드 제품 사진이 작게 보이는 저 부분이 itemcol 1번에 해당하는 부분이다.
EVERTOP 지포스..., HP Business... 에 해당하는 부분은 itemcol 2번에 해당한다.
그렇게 가격과 시간은 itemcol 3,4에 해당하게 된다.
즉, itemcol 아이템 목록에서 나오는 순서에 대해서 지정하게 되는 것이다.
noterow : 1;
- 화면상으로 ② 그래픽카드 제품 사진도 크게 보이고 각종 설명에 대해서 나와있는 부분이다.
마우스를 올리면 보이는 자세한 설명 부분이 되는 것이다.
그중에서 제품사진이 첫번째 줄에 나와있는데 그것과 관련된 속성이 noterow 1번에 해당한다.
itemcol과 다르게 지정할 수 있으니 각자 취향에 맞게 구성하면 된다.
(제품 사진이 꼭 itemcol 1번이라고 해서 noterow에서도 1번일 필요는 없다는 이야기)
label : '제목';
- Note 부분에 보일때 앞에 '제목'이라는 이름표를 붙여주는 것이다.
notelabel: false;
- Note 부분에 보이는 이름표를 안보게 해준다. 만약 보고 싶다면 지정하지 않거나 true로 지정하면 된다.
content : text;
- 해당 부분을 무슨 속성으로 할껀지를 지정하는 것으로 대부분 글자가 있는 부분에 text로 써준다.
(맞나? ㅡㅡ;;;)
많이 쓰게 되는 부분은 이정도 ? 될 것 같다.
자세한 내용은 역시 공식 홈페이지를 참고하는 것이 좋다.
Supported CSS Properties : http://developer.klipfolio.com/devguide/apas02
(나중에 기회가 닿으면 자세히 한번 다뤄볼까 -_-)
다시 무작정 만들기로 돌아와서
제목만으로는 부족하다는 생각이 팍팍 들게 되었다면
이제 작성자명, 작성시간을 뽑아보도록하자
이것도 정말 아주아주 쉬운 방법으로 뽑을 수 있다!
일단 패턴중에서 <tr>을 제외하고 <td> 부분만 보도록 하자
- <td> </td>
- <td height="28" align="center" class="dot11">게시 번호</td>
- <td align="center"> </td>
- <td style="padding-left:10;"><a href="주소" title="제목">제목</a></td>
- <td align="center"> </td>
- <td align="center" class="dot11">작성자명</td>
- <td align="center"> </td>
- <td align="center" class="dot11">작성시간</td>
- <td align="center"> </td>
- <td align="center" class="dot11">조회수</td>
- <td> </td>
<style>을 선택자를 만들때 아주 좋은 것이 있다.
'+' !!
그냥 보면 더하는 것이다.
그래..... 뭘 더할까 ...................... -_-
자세히 보면 작성자명 <td>가 6번째있다는 것을 알 수 있다.
그럼 무작정 더하는 것이다.
뭘?
<td>를 여섯번!!!
td + td + td + td + td + td {
itemcol: 2;
noterow: 2;
label: '작성자명';
content: text;
}
itemcol: 2;
noterow: 2;
label: '작성자명';
content: text;
}
장난해 ? 이게 끝이야 ?
맞다.
끝이다 ㅡ_ㅡ
그렇기 때문에 klip 만들기가 쉽다고 말하는 거다.
(잡다하고 많은 기능들 빼고 ㅡ_ㅡ;)
추가 했으니 확인해볼까?
작성자명이 6번째 였으니까..
작성시간은 8번재, 조회수는 10번째 알아서 추가할 수 있으리라 믿는다 ㅡ_ㅡ;
(하나를 배우면 10개를 까먹는 나는...)
뭐 이따구야 -_-
왜 이리 허무해 !! 한다면
이 강좌는 그만보고 가서 만들어 보기를 권한다.
이정도면 할 수 있다!
하지만 이게 끝이 아니라는거 ~
막상 제목하고 작성자명이랑 다 빼왔는데..
게시판 글을 보기위해서는 게시판을 가서 제목을 클릭하고 그래야 하는건가.. 하는 아쉬움이 생긴다.
그럼 안되지 ~
그러지 않기 위해서 지금 klip을 사용하고 있지 않은가!
그러면 이번에는 주소를 빼와보자.
여기부터 약간 머리가 복잡해질수도 있으니
이해가 안될때는 두세번 보면 이해가 되리라........... -_-;;
(이 뭐.. 무책임한 -_ ........)
이번에는 링크다.
링크된 곳에 패턴은 <a href="주소" title="제목">제목</a> 이렇다.
일단 어떻게 써야하는지 소스를 보여주고 설명을 하겠다.
어라 ? 뭐지 저 뒤에 attribute 는?
눈치 빠르신 분들은 이해하셨겠지만
그렇다.
a 라는 선택자(태그)의 속성값을 빼기 위해서는 attribute()를 사용하면 된다.
주의할 점은 : 표시가 하나가 아니라 두개 라는 점이다.
td[style="padding-left:10;"] a::attribute(href)
윗 부분을 그냥 문장으로 풀어서 말하자면
td 태그에 style이 "padding-left:10;" 이면서! a 태그의 href 속성(attribute)값을 뽑아라.고 해석할 수 있겠다.
간단하게 style 설명할때 말했듯이
아이템에 대한 링크 속성이므로 type: link; 로 해야 한다.
그리고 base: 는 뭐지? 라는 생각이 떠오를 것이다.
그것은 그 링크 앞에 붙게 되는 기본 주소이다.
만약 링크주소가 http://........ 주소까지 다 붙어있으면 좋으련만
어차피 해당 도메인 이하에 있는 주소일 경우는 반복되기 때문에 필요가 없어서 안 썼을 것이다.
그렇기 때문에 기본이 되는 주소로 앞에 주소를 써주어야 한다.
해당 게시판의 경우
링크가
"/_korean/community/index.php?c=plaza_02_read&seq=게시물번호&category=1&page=1#top2"
추출되었는데 이 주소만으로는 게시판을 열수가 없어서 게시물을 읽어보았더니
"http://www.yu.ac.kr/_korean/community/index.php?c=plaza_02_read&category=1&seq=1002326&page=1&next_seq=1002325#top2" 이러한 주소로 되어있는것을 알수있었다.
링크에 다가 굵은 부분만 추가하면 되겠구나!
그럼 base에 적어주면 되겠구나!
이러면..
다 끝났다!
진짜 제대로 된 klip 하나가 나왔다.
이렇게 보니까 klip 만들기도 정말 쉽지 않은가?
퍼갈때는 출처는 반드시 ~ 꼭꼭꼭 !!
