티스토리 툴바

Daum
Tistory
로그인

스포츠토토 축구 승무패 확률 계산 ~.~

작업 2011/07/31 16:57
친구가 계산하는 것 물어봐서 만들어봤는데....
일본 축구까지 다 있네 ~.~;

 
ㅋㅋ 그다지.... 내놓을 것은 못되고
별일 다 해본 것으로.... ㅎ 

node.js 웹서버 + iconv 모듈 + curl + jQuery을 이용

http://www.mediafire.com/file/dixmvddamdf35jk/choops.zip 

'작업' 카테고리의 다른 글

스포츠토토 축구 승무패 확률 계산 ~.~  (0) 2011/07/31
티스토리 oauth (html+script)  (0) 2011/07/24
DRIPERS로고를 만들어 봤다.  (0) 2011/07/03
XE와 도쿠위키(dokuwiki) 세션으로 연동  (2) 2011/07/02
#node.js - iconvExtend 모듈  (0) 2011/05/06
gFrame 사용 예제  (0) 2011/04/23
NO TRACKBACK AND NO COMMENT

가려진 레이어 사이의 트릭 MAP

CSS 2011/07/25 02:50


아무래도 브라우저 자체 크기가 고정적이지 않기에, 보통의 운영체제 바탕화면내 아이콘을 담고 있는 것과 유사하게 마련하면, 이리저리 신경 쓰이는 것이 많다.  아무데서나 마우스를 오래 누르고 있으면, 메뉴를 뛰우게 해봤는데...

위에는 총 7개의 육각의 이미지를 담은 div로 되었고, 더 여러개가 추가될지도 모를 상황이다. 어찌되었든 div 자체는 사각의 모양을 가지고 있기에, 위와 같은 육각의 것을 포함시키면, 문제가 발생한다.


마우스가 hover되는 경우, 우측 상단같이 들어가지는 효과를 해야 주고자 하는데, div는 사각이기에, 2개의 행이 위 아래로 서로 만나면, 하나가 올라가고 거기서 하나는 다른 것을 가리게 된다. 그러니까 정가운데 육각 블록은 div라는 4각의 모양으로 자리차지하기에, 1행과 2행의 겹치게 모서리가 있기 마련이다. 그러나 image map을 이용하면 이를 해결할 수가 있다.

단순히 생각하면 전체의 큰 image를 그려놓고 해도 마찬가지 이겠지만, 그와는 달리 개별적7개 육각 이미지를 담은 div에서 겹치지 않게 할 수 있다. 

 
### html;
<div class="hex">
<img src="images/hext.gif" usemap="#img4"/>
<map name="img4">
<area shape="poly" coords="33,0,65,19,65,56,33,75,0,56,0,19" />
</map>
</div>

이런식으로 3행의 div를 만들고 했더니, 문제없이 작동되었다. 또한, div.hex:hover와 같은 것이 작동되지 않았다. map에서 반응한다. map에서 hover 이벤트가 발생하여, jQuery로 상위 요소에다 클래스를 바꾸는 것으로 해결했다. 

'CSS' 카테고리의 다른 글

가려진 레이어 사이의 트릭 MAP  (0) 2011/07/25
#CSS : 요소들의 특성에 따른 기본적인 위치와 크기 결정  (0) 2011/04/06
#CSS : position의 좌표계  (0) 2011/04/06
#CSS : font 속성 사용시 주의점 - 초기값  (0) 2011/04/06
NO TRACKBACK AND NO COMMENT

티스토리 oauth (html+script)

작업 2011/07/24 19:48
TISTORY OAuth는 두가지로 사용할 수 있다.

    1. Server-side flow (JSP, PHP) - Authorization code 방식
    2. Client-side flow (Javascript, Desktop app) - Implicit Grant
 
글쎄다. 1번과 같은 서버측면에서 처리되어야 할 이유를 잘 모르겠다. 결국은 access_token 하나만을 가져오는 과정인 것 같고, 서버를 통한다 하여도, 해당 로그인된 사용자의 아이디나 정보를 바로 가져와 타 서버에서 재활용할 수 없어 보이는데... 맞는지 모르겠다.  

살펴보다가  서버에서 처리할 이유가 없어 보여, 2번을 사용하고자 하는데... 2번은 따로 알아서 로그인을 하라는 말이다. 아니면 기존에 로그인된 경우에만 작동이 된다. 그래서 스크립트로 로그인되지 않았으면 다시 리다이렉트만 된다면 해결될 것으로 보였다. 루프가 발생하기에 이를 재확인을 위한 용도로 쿠키를 사용해봤다. 그리고 작동이 된다! 호호호 
### javascript; html-script : true ;
<html>
<head>
<title>TISTORY OAuth 2.0 (ONLY HTML) </title>
</head>
<body>
<script>
(function() {
var client_id = "<등록된 client_id>";
var redirect_uri = "<등록된 redirect_uri>"; // 이 파일의 위치로 등록

var cookie = (document.cookie.indexOf('tistory') > -1) ? true : false;
var hash = (location.hash) ? (location.hash.split('=')[1]) ? true : false : false;
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);

if (hash) {
document.cookie = "tistory=" +"; expires=" + expireDate.toGMTString() ;
// oauth의 마지막, TOKEN을 받은 뒤 처리하고 싶은 내용은 여기에...
document.write("TOKEN : " + location.hash);
return true;
} else if (!cookie) {
document.cookie = "tistory= beforeLogin;";
var move = "https://www.tistory.com/oauth/authorize/?client_id=" + client_id;
move += "&redirect_uri=" + encodeURIComponent(redirect_uri)+"&response_type=token";
document.location.href = move;
} else if (cookie) {
document.cookie = "tistory= ; expires=" + expireDate.toGMTString();
var move = "https://www.tistory.com/login/?popup=1&requestURI=https%3A%2F%2Fwww.tistory.com%2F";
move += "oauth%2Fauthorize%2F%3Fclient_id%3D";
move += client_id + "%26redirect_uri%3D"+encodeURIComponent(redirect_uri)+"%26response_type%3Dtoken";
document.location.href = move;
}
})();
</script>
</body>
</html>

혹시, 쿠키를 허용하지 않게 한 경우, 무한 루프에 빠질 수 있으니... 대비책이 필요하다.  쿠키대신 referer로 확인하는 것이 보다 좋을 것이다.  (다시 고쳐야지 흠흠흠)

 

'작업' 카테고리의 다른 글

스포츠토토 축구 승무패 확률 계산 ~.~  (0) 2011/07/31
티스토리 oauth (html+script)  (0) 2011/07/24
DRIPERS로고를 만들어 봤다.  (0) 2011/07/03
XE와 도쿠위키(dokuwiki) 세션으로 연동  (2) 2011/07/02
#node.js - iconvExtend 모듈  (0) 2011/05/06
gFrame 사용 예제  (0) 2011/04/23
티스토리
TRACKBACK ONE AND NO COMMENT