All Scrap

트윗을 보던 중, 쿠나님이 티스토리 블로그에 아약스를 적용하고 있다는 것을 발견했다.

음..

이란 생각과 함께 바로 가서 구경!


읭..

귀찮아서 하기 싫었던건데 막상 보니까 무진장 하고 싶어졌다. ㅋㅋㅋ


그래서 바로 적용 시도.




일단 몇가지 문제가 있다.

1. SyntaxHighlight와 FootNote 등 BLUEnLIVE 님이 적용해두신 스크립트가 먹지 않는다.
뭐 해결하려면 하겠는데 일단 당장은 귀찮으니 패스.
툴팁은 일단 여기를 참고해보도록 하자..

2. TC용 플러그인은 해당 플러그인을 직접 수정해야한다.

3. 카테고리.. [...]
이.. 이건.. 답이 없는듯;;




텍스트큐브 1.8.4엔 기본적으로 jQuery 1.4가 들어간다.
그러니 scrollTo 파일만 넣도록 하자.

scrollTo.js는 여기에서 받을 수 있다.

아 깜빡한게 있군.
로딩 인디케이터는 여기에서 직접 만들 수 있다.



그리고 아래 소스를 head 태그 안이든 적당한 곳에 넣어둔다.

<!-- deVbug.me Ajax -->
<script type="text/javascript" src="/resources/script/jquery/jquery.scrollTo-1.4.2-min.js"></script>
<script language="javascript">
function LoadPage(url)
{
	if (url == "" || typeof url == "undefined" || url == null) return;

	jQuery.scrollTo( 0, 800, {queue:true} );

	jQuery("#content").html("<center><img src='./ajax-loader.gif'></center>");

	jQuery.get(url, function(data) {
		jQuery('#content').html(jQuery(data).find('#content').html());

		jQuery("div.tagTrail a").click(function() {
			LoadPage(this.href); return false;
		});

		var dest_id = url.substring(url.indexOf("#"));
		jQuery.scrollTo( jQuery(dest_id), 800, {queue:true} );
	});
}
</script>

텍스트큐브나 티스토리나 이런 부분은 거의 같아서 쿠나님의 글과 별반 다를게 없다.




주요 a 태그에 다음 내용을 추가한다.

 onclick="LoadPage(this.href); return false;"

블로그 제목, 상단 메뉴 등과 같은 곳이겠지.

이후 스킨 파일에서 href로 검색해서 나오는 곳을 확인하며 일일히 추가해주면 된다.
특히 새로 올라온 글 부분 등.


Paging 부분은 다음처럼 한다.

<s_paging>
	<div id="paging">
		<a  title="이전" class="" id="prevPage" onclick="LoadPage(this.href); return false;">« Prev </a> :
		<s_paging_rep> <a  class="num" onclick="LoadPage(this.href); return false;"></a> : </s_paging_rep>
		<a  title="다음" class="" id="nextPage" onclick="LoadPage(this.href); return false;">Next »</a> 
	</div>
</s_paging>

역시 다를게 없군.




사이드바에서 검색 부분은 아래처럼 하자.

<!-- 검색 -->
<div id="searchBox">
	<s_search>
		<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { LoadPage('/search/'+this.value); return false; }"/>
		<input value="검색" type="button" onclick="LoadPage('/search/'+document.getElementsByName('')[0].value); return false;" class="submit"/>
	</s_search>
</div>

새로 등록된 댓글, 트랙백 등과 같은 곳에도 똑같이 집어넣으면 알아서 이동하고 스크롤도 된다.




이걸 플러그인 형태로 만들어야 했을텐데 이미 귀찮아서 이따위로 만들어버렸으니.. 떫..

에효 암튼 무엇보다 문법 강조 플러그인이나 제대로 작동하게 조만간 우선 작업해야겠다.
아주 개판으로 나오겠지. ㅠㅠ



아 그리고, 이 외에 수정한 플러그인은, 나같은 경우
FootNote, JP_ArchiveSelectboxTT, MT_Meta_RecentPS_Default 이고..
JP_ShortenEntryContentsTT 는 수정해도 제대로 작동을 안 하네..

http://devbug.me/561

간단히 말해서 페이지 갱신을 하지 않고 내용 갱신을 하는 것인데 (아니 말이 이상하네) ... 제일 좋은 예제는 http://www.happyfri.com/blog/ 블로그를 참조하시면 됩니다 (사실 이거 때문에 전 끌려서.. 에헤헤)

별도로 소개할 수 있는 내용이 없으니 스샷은 없고, 저도 적용은 더욱 심화하는것보다 이정도에서 끝내려고 합니다(위젯 덕지덕지인 브롤그에 쓰시면 좋을것 같네요). 그런고로, 일반적 스킨에서 적용할 수 있는 적용 방법을 간단히 적어놓고 ... 그렇게 오늘의 삽질, 종료! [절대 학생회의 일존이라던가를 따라하지 않았습니다]


http://kuna.wo.tc/1220

에 배틀제이 님이 올려주신 예제로 소개해 드리겠습니다.
의외로 쉽고 활용도가 높습니다.

<script language="JavaScript">

function getHttprequest(URL) {
// 기본적인 변수 선언
var xmlhttp = null;
// FF일 경우 window.XMLHttpRequest 객체가 존재한다.
if(window.XMLHttpRequest) {
// FF 로 객체선언
xmlhttp = new XMLHttpRequest();
} else {
// IE 경우 객체선언
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// GET 모드로 URL 주소의 값을 가져온다
// 주의 해야 할점은 무조건 UTF 로 값이 들어옴
xmlhttp.open('GET', URL,false);

// 값을 가져 왔을경우 호출할 메소드를 바로 선언
xmlhttp.onreadystatechange = function() {

// readyState 가 4 고 status 가 200 일 경우 올바르게 가져옴
if(xmlhttp.readyState==4 && xmlhttp.status == 200 && xmlhttp.statusText=='OK') {
// responseText 에 값을 저장
responseText = xmlhttp.responseText;
}
}
xmlhttp.send('');

// 가져온 xmlhttp 객체의 responseText 값을 반환
return responseText = xmlhttp.responseText;
}



function replace(URL) {
document.getElementById('replace_area').innerHTML = getHttprequest(URL);
}

</script>

<div id='replace_area'> 냐하하~~ </div>

<a href = 'javascript:replace('test.php?bo_table=<?=bo_table?>&wr_id=<?=$wr_id?>');'> 가져오기 </a>


위 소스는 '가져오기' 를 클릭시 'test.php' 를 통해 출력되는 결과를 innerHTML 로
<div id='replace_area'></div> 속에 넣게 됩니다. '냐하하' 는 사라 지겠죠.

이때 화면의 리로드는 일어 나지 않으면서 출력 화면을 변화 시킬 수 있습니다.
즉 필요한 데이터만 가져다가 화면에 뿌려 줄 수 있다는 점이 장점입니다.

기존에 팝업창으로 해결해야 했던 부분들을 이러한 방법으로 화면내에 처리 할 수 있고,
실시간으로 테이터를 리플레쉬 할 수 도 있는 등 써 먹을때가 무척 많습니다.

단 주의하실 점은 XMLHttpRequest 로 받아 오는 데이터가 UTF-8 로 출력되기에 본인의 환경에 맞게
iconv 등을 통해서 EUC-KR 등으로 변환하는 과정이 필요합니다.


ob_start();
줄줄이 내용~~~~~~
$data = ob_get_contents();
ob_end_clean();
echo iconv("CP949", "UTF-8", $data);
요런게 한 방법이 되겠죠?
( 반대로 한글 변수를 전달 시에는 UTF-8 로 변환 전송 해야합니다. )

그리고 그냥 innerHTML 로 삽입시 가져온 문서에 스크립트가 있는 경우 작동을 안하는 경우가
있는데 <script DEFER language="JavaScript"> 식으로 DEFER 을 넣으면 되기도 하던데,
전문가가 아니라 잘 모르겠네요.

저 같이 프로그램 전문가가 아닌 분들을 위해 함 적어 봤습니다.
혹 오류 있으면 지적 부탁드리고요. ajax 란게 어려워 보여도 좋은 소스들이 많이 나와 있어서
그러한 소스들 적용하는 방법만 익히는 거라면 그리 어렵지는 않은 거 같습니다.

가능하기만 하다면, RESTful 방식으로 Ajax 기반 애플리케이션을 포함하여 웹 애플리케이션을 구현한다면 많은 버그를 피할 수 있습니다. 하지만, REST (REpresentational State Transfer)의 함정은 비슷한 XMLHttpRequests를 통해 중복 데이터를 보내는 것입니다. 이 글에서는 세션 쿠키를 활용해서 서버 측 상태를 관리하여 클라이언트-서버 트래픽을 줄이는 방법을 설명합니다. 머리말 HTTP에 관한 기정 사실은 엄청난 힘과 취약점이다: HTTP는 Stateless 프로토콜이다. HTTP 서버 리소스로의 요청은 멱등(idempotent)이어야 하며, 호출 시 같은 요청이 같은 결과를 리턴해야 한다. 멱등성(Idempotency)은 REST의 중심적인 개념이다: 클라이언트 정보를 인코딩한 요청이 그 요청과 같은 데이터를 리턴해야 한다. REST 철학과는 반대로, Ajax 애플리케이션들은 거의 언제나 Stateful이다. 웹 애플리케이션의 특정 필드나 영역은 서버 데이터의 현재 상태를 반영하면서, 클라이언트 JavaScript 폴링(poll)으로 현재 상태를 주기적으로 쿼리 하는데 사용된다. (이것을 보다 푸시(push) 지향적인 것으로 할 수 있는 방법이 있지만, 이 글의 논점에서는 벗어난다.) 하지만, 웹 애플리케이션은 서버가 다음 폴링 이벤트에 대해 알아 두어야 할 것을 지속적으로 트래킹 해 줄 것을 기대하고 있다: 클라이언트가 보았거나 보지 못한 데이터, 이미 발생했던 인터랙션이 바로 그것이다. Ajax 애플리케이션을 기술적으로 RESTful로 만드는 한 가지 일반적인 방법은 최신 데이터에 대한 모든 쿼리가 고유 URI를 갖도록 하는 것이다. 이를 테면, URL로 인코딩 된 매개변수 또는 숨겨진 폼 변수에 UUID를 포함시킨다; 예를 들어, XMLHttpRequest 객체는 다음과 같은 리소스를 얻게 된다. http://myserver.example.com?uuid=4b879324-8ec0-4120-bba6-890eb0aa3fc0
바로 다음 폴링 이벤트 시, 1초 후에 다른 URI가 열린다. 멱등성은 트릭이 필요하다! "같은 데이터"의 의미를 이해하는 것은 생각보다 어려운 문제이다. 이상적으로만, URI가 언제나 동일한 데이터를 리턴한다. 결국, 정적인 웹 페이지는 콘텐트가 수정될 때 변할 것이다. (다시 말해서, 오타가 공개된 아티클에서 수정된다.) 이러한 멱등성 뒤에 숨은 개념은 변경 사항들이 GET 요청 자체의 직접적인 결과가 되어서는 안된다는 것이다. 이와 같은 지속적으로 변하는 리소스를 갖는다는 것은 매우 합리적인 접근 방식이다. http://myserver.example.com/latest_data/
문제는, "latest_data"를 구성하고 있는 것이 데이터 검색 여부, 시기, 사람과는 다른 것에 의존한다는 점이다. 서버는 완벽히 RESTful이 될 수 있지만, 여전히 "상태"를 반영한다. 최신 데이터 얻기 필 자의 동료인 Miki Tebeka와 필자는 JavaScript XMLHttpRequest() 객체를 사용하여, 서버에서 최신 데이터를 자주 폴링하는 웹 애플리케이션을 개발하는 상황을 직면했다. 이 글에서 필자가 제공한 Python 서버 예제는 Miki가 만들었던 인-하우스 모듈에 영감을 받은 것이지만, 더욱 단순화 되고 향상되었다. 여기에 두 가지 문제가 생겼다. 하나는 이전 요청 후에 어떤 것도 변하지 않았을 때 중요한 메시지를 보내지 않는다는 것이다. 두 번째 문제는 중복 데이터를 생성하는데 데이터베이스나 전산 리소스를 과도하게 사용하지 않는다는 것이다. "Not Modified" 문제는 HTTP 프로토콜에서 바로 해결된다. 하지만 이러한 정확한 솔루션이 사용되고 있지는 않다. 우리가 해야 할 일은 HTTP 304 상태 코드를 리턴하는 것이다. 이것은 304 상태를 Ajax 코드가 검사하게 하여, 만약 발견될 때에는 폴에서 보내진 데이터(부재)에 기반하여 클라이언트 애플리케이션 상태를 변경하지 말라는 것이다. 서 버 리소스 문제는 이전 데이터를 캐싱하고 최근 추가된 것을 모음으로써 해결될 수 있다. 이 솔루션은 전체 데이터 세트가 상호 의존적이기 보다는 "최신 데이터"가 개별적인 데이터 아이템들로 구성되어 있을 경우와 관련이 깊다. Listing 1을 보자:
Listing 1. 세션 실행 서버 코드: server.cgi
from datetime import datetime session = ClientSession() old_stuff = session.get("data", []) # Retrieve cached data last_query = session.get("last", None) prune_data(old_stuff, last_query) # Age out really-old data new_stuff = get_new_stuff() # Look for brand-new data if not new_stuff: print "Status: 304" # "Not Modified" status else print session.cookie # New or existing cookie print "Content-Type: text/plain" print all_stuff = old_stuff + new_stuff session["data"] = all_stuff session["last"] = datetime.now().isoformat() print encode_data(all_stuff) # XML, or JSON, or... session.save()
ClientSession 클래스를 주목해 보자. 기본적으로, 캐싱된 old_stuff에 상응하는 쿠키를 갖고 있는 각 클라이언트를 트래킹 해야 한다:
Listing 2. 세션 관리하기
from os import environ from Cookie import SimpleCookie from random import shuffle from string import letters from cPickle import load, dump COOKIE_NAME = "my.server.process" class ClientSession(dict): def __init__(self): self.cookie = SimpleCookie() self.cookie.load(environ.get("HTTP_COOKIE","")) if COOKIE_NAME not in cookie: # Real UUID would be better lets = list(letters) shuffle(lets) self.cookie[COOKIE_NAME] = "".join(lets[:15]) self.id = self.cookie[COOKIE_NAME].value try: session = load(open("session."+self.id, "rb")) self.update(session) except: # If nothing cached, just do not update pass def save(self): fh = open("session."+self.id, "wb") dump(self.copy(), fh, protocol=-1) # Save the dictionary fh.close()
Ajax 호출 만들기 서버 캐싱이 잘 되었다면, 데이터를 폴링하는 JavaScript는 매우 간단하다. 우리에게 필요한 것은 Listing 3과 같은 것이다:
Listing 3. 최신 데이터를 서버에서 폴링하기
var r = new XMLHttpRequest(); r.onreadystatechange=function() { if (r.readyState==4) { if (r.status==200) { // "OK status" displayData(r.responseText); } else if (r.status==304) { // "Not Modified": No change to display } else { alertProblem(r); } } } r.open("GET",'http://myserver.example.com/latest_data/',true) r.send(null);
displayData()와 alertProblem()의 구현은 예제에는 지정되지 않는다. 아마도, 전자는 특정 방식으로 받은 응답을 파싱 또는 처리해야 한다. 상세한 것은 JSON, XML 등 어떤 포맷이 데이터를 보내는데 사용되는지와, 실제 애플리케이션 요구 사항에 의존한다. 더욱이, 빠른 예제는 한 번에 폴링하는 방법만 보여준다. 장기 실행 애플리케이션에서, 우리는 반복적으로 setTimeout() 또는 setInterval() 콜백에 이러한 요청을 만든다. 또는, 애플리케이션에 기반하여, 폴링은 뒤이은 특정 클라이언트 애플리케이션 액션이나 이벤트를 발생시킨다.
((-------IMAGE-------)) ((-------IMAGE-------))
((-------IMAGE-------))
위로

요약 이 글에서는 Python으로 작성된 코드를 설명했지만, CGI 또는 기타 서버 프로세스를 프로그래밍 하는데 사용되는 거의 모든 언어에도 같은 디자인이 적용된다. 일반적인 개념은 단순하다. 클라이언트 쿠키를 사용하여 캐싱된 데이터를 구분하고, 마지막 폴링 이벤트 후에 어떤 새로운 데이터도 발생하지 않았다면 304 상태를 보낸다. 여러분의 서버 프로그래밍 언어가 무엇이든지, 프로그램은 거의 같을 것이다. 많은 에러를 보여주지는 못했지만, 디자인은 쿠키를 사용할 수 없는 곳에서 작동을 수정하는데 있어서 매우 강력한 힘을 발휘한다. 클라이언트가 관련된 세션 쿠키를 갖고 있지 않으면, 이것이 쿠키를 받아들이지 않거나, 이것이 새로운 세션의 첫 번째 폴이기 때문에, old_stuff는 간단히 빈 리스트이고, 리턴된 데이터는 new_stuff의 일부가 된다. 추가할 가치가 있는 또 다른 기능은 현재 세션 상태를 보내는 클라이언트 메시지이다: 이것은 애플리케이션 디버깅과 일관성 없는 상태를 규명하는 방식으로서 사용하기에 알맞다. 캐시를 플러시 할 때 여러분이 잃게 되는 것은 서버 로드와 일정 대역폭이다. 그렇다고 해서 이것이 기반 멱등성을 위반하지는 않는다.

참고자료 Wikipedia 제공: REST의 기본 원리 소개.

developerWorks SOA와 웹서비스 존

developerWorks Ajax 리소스 센터

웹 페이지를 새로고침 하지 않고 내용을 갱신하려면 Ajax를 사용하면 됩니다.

아래 소스로 DB쿼리 및 네이버의 OpenAPI을 사용하여 실시간 출력을 할 수 있습니다. index.php ajax.js new Ajax.PeriodicalUpdater("엘레멘트 ID명","데이터 파일") 옵션을 생략하면 기본값으로 2초마다 갱신해 줍니다. 설정 시간(초)마다 데이터 파일을 읽어와서 ID로 지정한 엘레멘트에 출력해줍니다.

흔히 링크버턴 등에 생개는 점선을 없애기 위해서
onfocus='this.blur()' 라는 태그를 많이 쓰고 계시죠?
아래 소스는 단 한번 입력만으로 문서 전체에 점선 테두리를 없애는 스크립트입니다

<body> 와 </body> 사이에 입력 하세요.

-------자 이건일단 원본소스입니다.

<html><head><meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>스크롤바따라다니는,TOP</title>
<style type="text/css"><!--
BODY,p,li,TD,SELECT,input,DIV,form,TEXTAREA,option,td,fieldset {font-size:9pt; font-family:verdana;color:D4D0C8;
line-height:120%; margin-top:0; margin-bottom:0; scrollbar-face-color:2B2A2A; scrollbar-shadow-color:2B2A2A; scrollbar-highlight-color:2B2A2A; scrollbar-3dlight-color:2B2A2A; scrollbar-darkshadow-color:2B2A2A; scrollbar-track-color:434343; scrollbar-arrow-color:EFFFFD}
A:link {color:#47F8FF;text-decoration:none;font-weight: bold}
A:visited {color:#47F8FF;text-decoration:none;font-weight: bold}
A:hover{color:#FCFF7A;text-decoration:underline;font-weight: bold)
--></style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fix(){
var a=document.body.scrollTop+0
bar.style.top = a
}
-->
</SCRIPT>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" onScroll="fix();">
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<span id="bar" style="Z-INDEX: 1; RIGHT: 0px; VISIBILITY: visible; POSITION: absolute; TOP: 0px"><script language="JavaScript">
document.write("<input type='button' value='TOP-1000' onClick='self.scrollBy(0,-1000)' style='font-weight:bold; color:CC6699;'>")
</script></span> </body> </html>




---자, 그리고 수정된소스를 봅시다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">
function fix() {
var imgH = 18; // 이미지 사이즈에 맞게 수정 (이미지 높이)
var imgW = 44; // 이미지 사이즈에 맞게 수정 (이미지 너비)
var posTop = document.body.clientHeight - imgH;
var posLeft = document.body.clientWidth - imgW;
bar.style.top = document.body.scrollTop + posTop;
bar.style.left = document.body.scrollLeft + posLeft;
} function neuladen() {window.location.reload()}
window.onresize = neuladen; window.onscroll = fix;
//window.onresize = fix;
window.onload = fix;
</script>
</HEAD> <BODY background="img/bg_patten.gif" bgproperties="fixed"> <!--
밑에 3가지 중에서 선택해서 사용하시면 될 듯 합니다.
1. 이미지
2. 테이블
3. 버튼
-->
<!--<span id="bar" style="position:absolute; z-index:1"><a href="#top"><img src="top.gif" border=0></a></span>-->
<!--<span id="bar" style="position:absolute; z-index:1"><table bgcolor=#CCCCCC width=44 height=18 cellpadding=0 cellspacing=0><tr><td align=center><a href="#top">TOP</a></td></tr></table></span>-->
<span id="bar" style="position:absolute; z-index:1"><input type='button' value='TOP' onClick="window.location='#top'"></span> <TABLE CELLSPACING=0 CELLPADDING=1 WIDTH="100%" BGCOLOR="#336699">
<TR><TD>
<B><FONT COLOR="#FFFFFF" face=돋움>당구 유머</FONT></B>
</TD></TR>
</TABLE><br> <table border=0 width=100%><tr><td width=23></td><td>
<table width=95% cellpadding=1><tr>
<td width=25% align=center bgcolor="#339966" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#339966'"><a href="#당구와sex"><font color=white><b>당구와sex</b></font></a></td>
<td width=25% align=center bgcolor="#DDAD08" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#DDAD08'"><a href="#당구찬양시"><font color=white><b>당구찬양시</b></font></a></td>
<td width=25% align=center bgcolor="#339966" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#339966'"><a href="#정치인당구인"><font color=white><b>정치인당구인</b></font></a></td>
<td width=25% align=center bgcolor="#DDAD08" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#DDAD08'"><a href="#당구같이"><font color=white><b>당구같이</b></font></a></td>
</tr></table>
</td></tr></table><br> <a name="당구와sex"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#339966"><font color=white><b>당구와 sex 공통점30선</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt">
1. 예전에는 대학교때 시작했는데 요즘은 고등학교, 중학교때 처음 시작한다.<br>
2. 혼자서 연습하는것은 공짜지만 항상 눈치를 보게 된다. <br>
3. 혼자서도 연습을 많이하면 실력이 늘어난다.<br>
4. 실력이 늘어나면 자세가 바뀐다.<br>
5. 초보는 힘으로밀어 부치지만 고수는 테크닉으로 끝낸다.<br>
6. 초보나 고수나 벗기기는 항상 힘이든다.<br>
7. 초보는 무조건 빠는 것을 좋아하지만 고수는 필요한 만큼만 빤다.<br>
8. 어려운 포지션은 허리를 잘쓰면 해결된다.<br>
9. 반 듯하면 (큐대일수록) 정확하게 들어간다.<br>
10. 세게 찍어치면 다이가 찢어질 위험이 있다.<br>
11. 보통 한게임에 일이십분 걸린다.<br>
12. 항상 한게임으로 끝내지는 않는다.<br>
13. 술마시고 하는 경우에는 시간만 오래 걸리고 대부분 진다.<br>
14. 끝난후에는 꼭 씻는다.<br>
15. 몰아치면 더 빨리 끝낼수도 있지만 재미가 없다.<br>
16. 계속해서 오랜시간을 하다보면 다리가 후들거린다.<br>
17. 하다보면 밤을 세울때가 많다.<br>
18. 처음만난 사람과는 긴장된 마음으로, 오래된 사람과는 편안한 마음으로....<br>
19. 초보는 엉뚱한데다 겨냥을 한다.<br>
20. 교본이 많이 있긴하지만 실전이 제일 중요하다.<br>
21. 자기것 안치고 남의 것을 치면 죽는다.<br>
22. 개인큐는 남이 못쓰게 잘 보관한다.<br>
23. 한번 맛들이면 하루도 안빠지고 하고 싶다.<br>
24. 요즘은 비디오 교본도 나온다.<br>
25. 같이 할 사람만 있으면 밤낮없이 할 수 있다.<br>
26. 큐대가 크고 무겁다고 잘치는 것은 아니다.<br>
27. 자세가 중요하다는 건 고수가 되야 안다.<br>
28. 군발이들이 휴가나 외박을 나오면 단체로 하고 들어간다.<br>
29. 외국의것은(당구대)우리나라 것보다 크다.<br>
30. 사오십대가 되면 한달에 한번 칠까 말까 한다.<br>
</td></tr></table>
</td></tr></table><br>
<a name="당구찬양시"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#DDAD08"><font color=white><b>당구 찬양시</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt"> 테마 유머::스포츠<br>
당구 찬양시(撞介)<br>
거룩한 우라는<br>
예술구보다도 깊고<br>
불붙는 맛세이는<br>
게임비보다도 값지다.<br>
<br>
아! 강낭콩보다도 더 푸른<br>
그 다이 위에<br>
양귀비꽃보다도 더 붉은<br>
그 적구 굴러라.<br>
아리땁던 그 큐대<br>
곧게 뻗어나가며<br>
그 석류 속 같은 적구<br>
두개를 다 맞추었네!<br>
아! 강낭콩보다도 더 푸른<br>
그 다이 위에<br>
양귀비꽃보다도 더 붉은<br>
그 적구 굴러라<br>
<br>
구르는 적구는<br>
길이길이 모이리니<br>
그대의 꽃다운 다마수<br>
어이 아니 오르랴.<br>
아! 강낭콩보다도 더 푸른<br>
그 다이 위에<br>
양귀비꽃보다도 더 붉은<br>
그 적구 굴러라<br><br>
<br>
<작품 해설><br>
<br>
평생 당구만을 위해 모든 것을 바치친 전설적인 인물 '당개 (撞介)'를 화려한<br>
색채 대비를 이용하여 묘사하고 있다.<br>
<br>
*당개 (撞介:190?-194?)<br>
<br>
암울했던 일제 시대 때 이 땅에 당구를 보급하기 위하여 자신의 모든 것을 다 바쳤던 인물.<br>
당시 총독부 사령관 '하오마루'와 죽방을 쳤으나 크게 물리게 되자 그를 껴안고 <br>
3층 당구장에서 뛰어내려 같이 즉사하였다 함. <br> </td></tr></table>
</td></tr></table><br>
<a name="정치인당구인"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#339966"><font color=white><b>정치인과 당구인공통점</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt"> 1. 경력과 실력이 다가 아니다. 누가 뒤통수를 칠지 모른다. 다크호스는 항상 존재한다. <br>
2. 상대방 까대기를 절라 잘한다. 가끔 얼굴 붉어져 치고받고 싸운다. <br>
3. 우기는넘이 짱이다. 되던 안되던 목소리높여 우기고 봐야한다. <br>
4. 승리를 위해 담합을 하기도 한다. 뒤에서 절라 욕하면서도 눈치봐서 자기도 한다. <br>
5. 가끔 승리하면 돈을 긁어오기도 한다. 언제나 남은것은 없다고 우긴다. <br>
6. 상승세를 타면 막을 수 없다. 그러나 한번 꼬이면 바로 끝이다. <br>
7. 폼만 그럴싸한 허접이들이 대다수이다. <br>
8. 자기 이익에만 급급하게 된다. 매너 황인넘들이 많다. <br>
9. 상대방이 실수하면 절라 좋아한다. 그러나 자기가 실수 해서 상대방이 좋아하면
예의라고는 눈꼽만큼도 없다고 지랄한다. <br>
10. 자기 전용터가 있다. 다른곳은 꺼린다. <br>
11. 상대방이 이기면 절라 화내면서 짜증부린다. <br>
12. 똑같이 여가를 활용해서 참여한다. <br>
<br>
(당구맨 본업 : 학생 또는 사회인 정치인 본업 : 국가가 인정한 사기꾼 <br>
그래도 당구는 보는사람은 재미있지만 정치인 봐도 재미없다. 그냥 화가 날 뿐이다. <br>
<br>
천리안 by 윌리 <br>
< 퍼가실땐, http://humorvista.co.kr/ 을 적어주세요 T.T > <br>
</td></tr></table>
</td></tr></table><br> <a name="당구같이"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#DDAD08"><font color=white><b>당구같이 못칠놈</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt">
<p>10위- "먹는거에 초연한 놈." </p> 대단한 집중력이다. 먹는거보다 당구가 중요하다니...고개가 숙여진다.
<p>9위- "전화와도 안 받는 놈" </p> 악바리다. 안 물리려고.. 지극 정성이다. 내가 이겨도 돈 내줘야 될거 같다.
<p>8위- "시작하기 전 연습 다마때 잘 치는 놈" </p> 시작하기 전, 은근한 연습다마 싸움.
마치 농구 연습할때 골대 앞에서 시합보다 더 치열하게 리바운드 다툼 하듯이,
당구 칠 때도 시작하기 전에 서로 공한번 건드려 보려고 난리인데,
그런 혼잡한 상황 속에서도 잘 치는 놈이라면 엄청난 실력자이다.
<p>7위- "시간 한참 지나도 아무 동요 없이 치는 놈" </p> 게임이 길어질 수록 아줌마 눈치 봐가면서,"야, 니가 눌러." "니가 눌러 이새끼야." 이런 식으로 신경을 쓰게 마련인데...
그 와중에도 전혀 동요 없이 치는 놈들이 있다. 이긴다는 확신이 있는, 아주 무서운 놈들이다.
<p>6위- "뽀록치고 깍듯하게 인사하는 놈" </p> 고수다. 당구장 벽에 써 붙여있는 당구 10계를 지키는 고수다.
그냥 이런 사람과 같이 친다는 걸 영광으로 알아야 한다.
<p>5위- "3년째 계속 150인 놈." </p>
진짜 무서운 놈이다. 150 이면 칠건 다친다.
게다가 다마수도 300~500 등 고다마에 비하면 훨씬 적어서 맘만 먹으면 후다닥 빼고 나간다.
<p>4위- "최근에 만나는 여자 없는 놈" </p> 절대 잡생각이 안난다.
여자 친구나 쫓아다니는 여자 있는 일반인들은 승부가 극한 상황으로 치닿으면, 꼭 여자 생각을 하게 마련이다.
바로 여기서 일반인들과 이런 놈들의 집중력의 차이가 생겨난다.
<p>3위- "하늘이 돕는 놈" </p> 절묘한 순간마다 뽀록이 터져준다. 반면에 그 상대방은 짤 들어가게 친 공도 야리하게 새고, 싸대기 맞고...난리난다.
정말 말이 안 된다. 근데 보면 늘 똑같은 놈이 그런다. 이젠 아예 뽀록이 당연한건 줄 안다.
심해지면, 뽀록 치고도 노리고 쳤다는 식의 덤덤한 표정을 짓는다. 그럴땐 진짜 초크 묻은 손으로 싸대기 때려주고 싶다.
<p>2위- "쓰레빠 갈아신고 치는 놈" </p> 쓰레빠는 산전수전 다 겪은 베테랑을 상징한다.
바로 쫄아주어야 한다. 이런 사람이랑은 웬만하면 이길 생각 말고 배운다는 생각으로 쳐야한다.
그래도 이겨보겠다고 따라서 어설프게 쓰레빠 꺼내서 신고 쳤다가,
나중에 돈은 돈대로 물리고, 열받아서 홧김에 집에 오다가 현관문에서 쓰레빠를 신고 있는 자신을 발견하게 된다.
<p>1위- "집에서 낮잠 자다가 나온 놈" </p> 정말 컨디션 만빵이다.
수능 시험도 충분한 수면을 취해야 잘 치듯이 당구도 마찬가지인 것이다.
자는 놈을 깨워서 당구 치자고 한 놈이 죽일 놈이다.
대낮 부터 낮잠 자는애 깨워서 당구 쳐봤자 결국 자기가 물리게 된다. <p>나우누리 by lingo<br> < 퍼가실땐 , http://humorvista.co.kr/ 을 적어주세요 T.T ></p>
</td></tr></table>
</td></tr></table><br>

</body>
</HTML>




차이점이요..?
그냥.. 조금소스가 간단해졌을 뿐입니다.^^
잘쓰세요..

JAVA Script Source 새 창의 링크로 부모창에 결과출력하고 새 창은 닫기 <script language="JavaScript">
function Go1(){
opener.parent.location='연결할 주소';
window.close();
}
function Go2(){
opener.parent.location='연결할 주소';
window.close();
}
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="64"><a href="javascript:Go1();" target="_parent">바로갈 곳 링크</a></td>
</tr>
<tr>
<td height="121"><a href="javascript:Go2();" target="_parent">바로갈 곳 링크</a></td>
</tr>
</table> * 출처 : 해피스크립트닷컴(http://www.happyscript.com)

JAVA Script Source 스크롤바를 따라다니는 메뉴 1 에 비해 미끄러지는 듯한 느낌이 들면서 보다 부드럽게 따라다닙니다. 레이어 안을 텍스트, 이미지, 테이블 등으로 채워 보조메뉴로 활용하기 좋습니다. 1. <head>와 </head>사이에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style> <script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script> ---------------------------------------------------------------------------------------- 2. </body>의 바로 앞, 즉 본문의 맨 끝에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div> ---------------------------------------------------------------------------------------- left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠. 만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다. width:119, height:53은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:119, height:53 이 됐습니다. 레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.

JAVA Script Source 레이어의 내용이 화면이 스크롤되는것에따라 이동이 됩니다. 위치는 임의로 지정이 가능합니다. 레이어 안에는 텍스트 뿐 아니라, 이미지, 테이블 등도 넣어서 꾸밀 수 있기 때문에, 간이메뉴로 사용하기 좋습니다. 1. <head>와 </head>사이에 아래의 소스를 넣습니다. ---------------------------------------------------------------------------------------- <style type="text/css">
<!--
#watermark {position:absolute}
-->
</style> ---------------------------------------------------------------------------------------- 2. <body>와 </body>사이에 스크롤바를 따라다니게할 부분을 <div>태그로 감싸줍니다. ---------------------------------------------------------------------------------------- <div id="waterMark" style="z-index:10">내용</div> ---------------------------------------------------------------------------------------- 이 부분이 스크롤바를 따라다니는 레이어입니다. 내용은 텍스트, 이미지, 테이블 등으로 이용해 취향에 맞게 꾸밀 수 있습니다. 3. </body>의 바로 앞(본문의 맨 끝)에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <script language="JavaScript1.2">
<!-- markW = 62;
markH = 47;
markX = 100;
markY = 100;
markRefresh = 10; if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark; wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; function setVals() {
barW = 0;
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
} function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
} function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
} window.onload=markMe; //-->
</script> ---------------------------------------------------------------------------------------- markW = 62; 에서 62 는 레이어의 폭
markH = 47; 에서 47 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (퍼센트값입니다. 따라서 가로 100%를 의미하므로 오른쪽 끝)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (퍼센트값입니다. 따라서 세로 100%를 의미하므로 맨 아래) ((-------IMAGE-------)) * 출처 : 신의키스(http://www.kissofgod.net) * 개인참고용으로 가져온 관계로 일부 수정된 내용이 있습니다. * 정확한 정보를 얻고자 하시는분은 출처인 신의키스님 사이트를 방문바랍니다.