seevaa의 잡다구리한 이야기

스타일문서 없이 보이는 화면입니다. 아래 메뉴를 활용하시면 보다 용이하게 이동하실 수 있습니다. (표현상 about, gallery 내용이 상단에 출력되는 불편이 있습니다.)

본문 | 글 분류 | 최근 글 | 블로그 소개 | 겔러리 썸네일보기 | 태그 | 방명록 | 아래로




공작(Peacock)

from routine 2008/01/31 23:17
사용자 삽입 이미지
사진 :: http://picasaweb.google.com/luke.kirkland - luke


잠시, 돌아다니다 우연히...

하얀색 공작이 있다는 걸 몰랐습니다. 인도공작의 개량종이라는군요~
찾아보니 흰색과 파란색이 섞인 잡종도 있더군요~

흰공작을 보며 봉황의 모습을 떠올리는 건...ㅎㅎ 
신비로운게 정말 영물[靈物]처럼 느껴지네요~



흠... 저도 이리저리 돌아다니다 발견한 사이트에서 재미나게 보여 적용하게 되었습니다. 참고로 상단에 about, gallery 처럼 재미나게 표현할 수 있습니다.
그에 관한 스크립트는 http://script.aculo.us에서 다운받으실 수 있습니다. (JavaScript에 관해 문외한이고, 영어에 약한지라 자세한 내용은 저도 잘 모릅니다.)

다운받은 scriptaculous-js-1.8.1.zip 를 풀어보면 여러가지 Functional Tests 를 할 수 있는데, 테스트해보시고 맘에 드시는 걸 적용하시면 될겁니다.

사용자 삽입 이미지


제가 적용한 스르륵 열리는 방법(Toggle slide)에 대해서만 간단히 적어봅니다.

1. 우선 다운받은 파일을 업로드 합니다.

prototype.js 파일과 scriptaculous.js, builder.js, effects.js, dragdrop.js, controls.js, slider.js
이렇게 총 7개 파일입니다.


2. <head></head> 사이에 불러올 스크립트를 넣습니다.
예)
<script type="text/javascript" src="./images/prototype.js" ></script>
<script type="text/javascript" src="./images/scriptaculous.js" ></script>

예에서 보이듯, 위의 두개파일만 불러들이면 나머지파일은 자동으로 인식한다고합니다. 단, 파일들이 같은 위치(경로)에 있어야 합니다.


3. 해당 부분(보이지 않다가 스르륵 열리는 부분)을 만듭니다.

이때 보일때와 안보일때의 모습을 감안해서 들어갈 위치를 잘 잡으셔야합니다. 그리고 해당부분을  id로 묶어둡니다. 첨부터 보이지 않게 설정하시려면 style="display:none;" 이렇게 합니다.

예)
<div id="d1" style="display:none; width:450px; padding:10px; background-color:#fff;">
	<p>들어갈 내용들...<br/>들어갈 내용들...</p>
	<p>들어갈 내용들...<br/>들어갈 내용들...</p>
</div>

4. 마지막으로 링크를 겁니다.
<a href="#" onclick="Effect.toggle('d1','slide'); return false;">Toggle slide 테스트</a>

5. 위의 간단한 예 적용

Toggle slide 테스트 위, Toggle slide 테스트 아래


테스트해보시고 적당히 적용하시면 될꺼 같네요~
마지막으로 저도 자세히 읽기보단 낼름 적용한뒤라 다른 문제점에 대해선 잘 모르겠습니다.



검색해보시면 쉽게 찾을 수 있는 팁입니다만, 그래도 물어보시는 분이 계셔서 올려봅니다.
아래내용은 TT스킨게시판 설레는 마음 스킨 3종 by qwer999을 참고했습니다.

활용예는 여느 사이트에서 많이 보셨겠지만 제 블로그 왼쪽에 빨간(top)막대처럼 스크롤에 따라 같이 움직이는 겁니다. 저는 페이지가 길어질 때 스크롤압박을 도와주기 위해 맨 윗부분으로 가는 링크를 사용하였는데 이것 뿐만 아니라 다른 메뉴(링크)도 추가하실 수 있습니다.

적용방법은 간단히, 상단에 해당 스크립트를 넣어준 다음, 실제 움직이는 메뉴(position:absolute;)를 만들어주시면 되는 겁니다.

1. 상단(head)에 들어갈 스크립트

<script type="text/javascript">
<!-- 
	var stmnLEFT =0; // 왼쪽 여백 (메뉴가 왼쪽에서 400픽셀 떨어진 곳에 보여집니다)
	var stmnGAP1 = 160; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다) 
	var stmnGAP2 = 160; // 스크롤시 브라우저 위쪽과 떨어지는 거리 
	var stmnBASE = 160; // 스크롤 시작위치 
	var stmnActivateSpeed = 35; 
	var stmnScrollSpeed = 20; 
	var stmnTimer; 
	
	function RefreshStaticMenu() { 
		var stmnStartPoint, stmnEndPoint; 
		stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10); 
		stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2; 
		if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1; 
		if (stmnStartPoint != stmnEndPoint) { 
			stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 ); 
			document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px'; 
			stmnRefreshTimer = stmnScrollSpeed; 
			}
		stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed); 
		} 
	function InitializeStaticMenu() {
		document.getElementById('STATICMENU').style.left = stmnLEFT + 'px'; 
		document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px'; 
		RefreshStaticMenu();
		}
//--> 
</script>

위 스크립트를 <head> </head>사이에 넣어줍니다.
위에서 주석처러 된부분은 실제 메뉴부분이 들어갈 위치와 스크롤스피드이니 그에 맞게 각자 수정하셔야 됩니다.

2. <body> 에도 아래와 같이 추가합니다.

<body onload="InitializeStaticMenu();">

3. 실제 보이는 메뉴부분 만들기

각자 만들고 싶은 메뉴를 만드시면 됩니다. 단, 그부분 id 를 "STATICMENU"로 지정하시고, style을 position:absolute로 해주셔야 되는 겁니다.

예)
<div id="STATICMENU" style="padding:0; margin:0; position:absolute; z-index:1;">
	<a href="링크" >링크</a>
	<a href="링크" >링크</a>
	또는 이미지나 여러가지...
</div>
저의 적용 예)
<div id="STATICMENU">
	<a href="#container" onfocus='this.blur()' class="scrolltop"></a>
</div>
저는 스타일부분을 css로 넘겼습니다.
css 해당부분 예)
#STATICMENU { padding:0; margin:0; position:absolute; width:40px; z-index:1;}
#STATICMENU .scrolltop {display:block; width:40px; height:15px; background:url("./images/top.gif") top left no-repeat; }
#STATICMENU .scrolltop:hover {background:url("./images/top-on.gif") top left no-repeat; }

쉽게 설명드린건지 모르겠네요~ 안되는 부분은 댓글달아주세요~ ^-^;;
스르륵 열리는 부분(about, gallery)도 같이 올리려했는데, 넘 길어지는군요... 이것도 이어서 올려보겠습니다.



살짝이 리뉴얼 해봤습니다.
(그렇네요... 좀더 알찬 포스팅보단 맨날 그거서 거긴 블로그스킨 가지고 지지고 볶고 있으니... ㅡㅡ;)

달라진 점이라면,

1. 웹폰트 제거
흠... 이건 뺄려구 하니 아깝긴한데... 그래도 빼고나니 시원스레 괜찮습니다. ㅎㅎ
(언제 또 변덕에 못이겨 적용할지 모르지만...)

2. 상단 메뉴에 about, gallery를 재밌게 해봤습니다. 한번 눌러보시길~
사실, 요놈때문에 시작을 한거라... 여차저차 힘들게 해냈습니다.
문제점이라면 페이지가 열릴때 항상 같이 열리기 때문에 로딩이 느리거나, 트래픽을 많이 먹는다는 겁니다.
그래도, 재밌다고 해주세요~

3. 사이드바 메뉴들도 살짝 바꿨습니다. 좀더 부드럽게 접히고, 펼쳐지게 했습니다.

4. 붕어 한마리 넣었습니다. ㅎㅎ 심심해서 넣었는데, 너무 튀는 거 같기도하고... 붕어 그림 찾아서 고르는데만 몇시간 걸렸는데, 럴수럴수... 별로네요... ㅠㅠ;

5. 참고, 모니터해상도1024*768 이상에서 깨지지않고 보입니다.

추가,

본문폭을 630px에서 600으로 줄였습니다. 1024*768에선 좀 빡세게 보여서요...
근뒈, 본문을 줄이니 이건 전에 올린 포스트에도 영향이... ㅡㅡ;
사실, 저는 24인치라 1920*1200으로 보지만(웬 자랑~) 아마도 아직까진 1024*768로 보시는 분이 많을거란 짐작에서 좀더 작게 줄였습니다.
다음웹인사드는 방문자 리포트중에 운영체제는 나오는데, 해상도별 방문비율이 없네요... 아쉬움...

footer부분도 약간 손을 봤습니다. 카운터를 바코드컨셉으로, 검색창도 그색감에 맞게...

사용자 삽입 이미지

그나마 정리하고 나니 저는 므흣한데... 사실... 빨간색 칠갑이네요.. 헤헤

블로그 꾸민다는 게 뭔가 계획성있게 컨셉을 잡고 완성하는 게 아니라, 이렇게도 저렇게도 해보는 시행착오 끝에 자기만의 만족값을 찾는 거 같습니다.
저는 그런거 같아요... ^-^;;



크게 생각진 않지만 사소한 것이 여러번에 걸치니, 이렇게 포스팅까지 연결되네요~
나쁘다는게 아니라 개인적인 불만이니, 그냥 가볍게 읽어주세요~ ^-^//

1. 댓글 달때 자신의 홈페이지(블로그) 링크를 빼먹는 것.

흠... 이건 제가 소심하고 옹졸해서 그럴수도 있는 거지만, 저처럼 느끼시는 분들도 많으리라 생각됩니다.

제 경우는,
TT스킨게시판에 몇개의 스킨을 올린 이후로, 스킨수정이나 또는 다른 팁에 관해 물어보는 댓글이 많습니다. 부족한 스킨을 사용해주시는 게 한편 기쁘기도 하고, 저에겐 영광입니다. 또한 그에대해 물어보는 댓글도 친절하게 답해드리려고 합니다. 그러다보면 오고가는 대화중에 친구가 될수도 있고, 제가 모르던 부분들도 새로히 알게되니까요...

헌데, 그에 관한 댓글중에 홈페이지(블로그) 링크를 빼먹은 댓글은 선뜻 답해드리기 싫을 때가 종종 있습니다.
왜냐면, 분명 스킨이나 블로그팁에 관해 물어보시는 분이라면 분명 블로그가 있을터인데, '자신의 블로그주소를 빼먹고 물어보는 건, 그거 적기가 귀찮아서 그런걸까요?' 이런 생각때문입니다.
나쁘게 비약하자면, '자신이 원하는 정보는 취하고 싶은데, 친구(자신의 모습은 보이기싫은)가 되기는 싫다?' 이렇게까지...
실제로 위와 댓글은 블로그주소를 알려주시면 더 쉽게 해결되는데 말이죠~ 댓글알리미, 이것도 안되구 말이죠~ 혹, 자신의 링크를 숨기고싶다면 비밀글을 적당히 이용하면 되는거구요~

제 경우를 말씀드렸지만, 다른 댓글도 마찬가지인거 같아요~ 자기가 올린 포스트에 달린 댓글인데, 얼마나 소중하고 기쁘겠습니까?(악플만 빼고요) 간혹, 그런 소중한 댓글에 링크가 빠져있음 허무할 때가 많죠?(안그런가요? 저만 그런건가요? ㅠㅠ;)
자신의 댓글 또한 대화의 일종인데, 또다른 모습과 의견을 나눌 수 있는 자신의 홈페이지(블로그)가 있다면 귀찮더라도 그 주소도 꼭 남기셨음 하는 바람입니다.


2. 오른쪽 클릭방지를 해놓는 것.

흠... 이건 간단하게 쓸께요...
여러 인터넷 공간을 돌아다니다보면 링크방식에 대해 불편을 느낄 때가 있죠?
요즘 제가 서핑하면서 이 링크방식에 관해 습관을 고치고 있습니다. 오른쪽 클릭을 사용해서 새창, 새탭열기를 많이 이용한다는 겁니다. 예전엔 우선 클릭에 손이 먼저가서 이전에 그 페이지를 찾으려면 뒤로를 한참 눌러 찾곤 했는데, 필요에 따라 새창, 새탭열기에 익숙해지니 조금은 더 편해진 느낌입니다.

당연, 자신의 컨텐츠를 무작위로 긁어가는 성인군자님들 때문에 마지못해 막아놓으셨겠지만, 저한텐 조금 불편으로 다가온다구요... ^-^;;


3. 티스토리 초대해드린 분들.

흠... 이건 초간단히...
제가 초대해드린다고도 안했는데, 방명록에 초대장을 보내달라 남기셔서 초대해드린건데...
활동이 없으시네요?? 제가 뭐라할껀 아니지만 조금 허무하다구욤... ^-^;;



croota

우연히... 아니 우연히는 아니고, rince님 블로그에서 재미난 이벤트를 보고 참여해봅니다. (트랙백을 보니 아직 10개라 걸릴확률이 높을거 같아... ㅠㅠ;)

흠... 내용은 까칠맨의 버럭질! 블로그 30만 힛트 기념 이벤트인데요, 일단은 까칠맨님의 30만 히트 완전 완전 축하드립니다.(사실, 첨 방문이라 조금 어색... 헤헤) 12월초에 20만히트였다는데, 한달여만에 30만히트라 대단합니다.
저도 블로깅한지 1년이 다 되어가는데... 지금 카운터가 196,997 군요... 제 블로그는 로봇방문이 카운터에 대단히 기여를 한거 같지만;; 그래도 20만 가까이 되어가니 잠시 기쁘군요~ㅎㅎ
참여방법은 상단의 배너를 포스팅하시고, 까칠맨님 이벤트포스트에 트랙백 걸면 그걸로 끝!! 간단하죠?
배너모냥이 범상치않은데, 세계적인 패션 남성 속옷 브랜드인 CROOTA 랍니다. 멋진 속옷이 많은 듯...

흠... 중요한거, 상품인데요ㅎㅎ 10명에게 CROOTA 속옷, 5명에게 "연암 박지원에게 중국을 답하다" 책, 1명에게 무언지 알수없는 비밀스런 무엇이랍니다. (아~ 벌써 제가 걸린듯한 이기쁨은 무엇인가? ㅡㅡ;;)

마지막으로 한번더... (아부 팍팍!!) 까칠맨님 30만 히트 완전 축하드리고, 날로 발전하는 까칠맨의 버럭질! 기대해봅니다. 자주 놀러가께요~ ^-^;;



seevaa2007.ttf

폰트 원하시는 댓글이 여기저기 달려서, 원하시는 분들도 헷갈리시고 적용해서 보내드리는 저도 혼란스럽고 해서.. 이렇게라도 해야할 것 같군요... 이해해주세요~ ^-^;;
웹폰트 신청은 여기에 댓글로 해주세요(다른곳에 다시면 보내드리지 않을겁니닷!!!)

우선, 개인홈이나 개인블로그 사용자에게 나눠드립니다. *(네이버블로그, 다음블로그 처럼 포탈에서 제공하는 서비스형 블로그는 적용이 안되는 점, 알아주세요~) 순수 개인용이 아닌 영리사이트나 커뮤니티사이트(다수회원을 보유한)는 드리지 않습니다.
*자세한 내용은 http://seevaa.net/19을 참고해 주시기 바랍니다.

다음으로, 댓글로 아래 두가지 적어주시면 메일로 드립니다.

1. 적용하고자하는 웹주소
2. 받을 수 있는 메일주소

* 메일이 공개될수 있으니, 이왕이면 비밀글로 남겨주세요.
* 포워딩주소말고 실제 주소를 적어주세요.
* 적용하고자하는 웹주소 모두 적어주세요.
예) http://seevaa.net , http://www.seevaa.net , http://seevaa.tistory.com

덧,
이런 번거로운 절차없이 어느 도메인에서든 보일수 있게 적용해서, 그냥 편하게 바로 다운로드할 수 있게 하면 오히려 저도 편하고 좋겠지만... 속좁은 저이기에 지금으로선 이렇게밖에... *그래도 seevaa9체(이아이에게도 관심을~)는 TTF, EOT 모두 공개되어 있습니다. 번거롭고 수고스럽겠지만 "누구나 쉽게 가질수 있다면, 그건 그만큼 메리트는 적은거야~" 이렇게 다소 쌩뚱맞게 생각해시면 고맙겠습니다. ^-^;;
참, 보통 주말에 일괄보내드려요~

관련 링크,
seevaa2007.ttf // http://seevaa.net/19
웹폰트 적용방법 // http://seevaa.net/145
네이트온 글꼴매니저 // http://seevaa.net/134



블로그얌 블로그가치

from blog 2008/01/16 14:58
사용자 삽입 이미지


심심할때 요런거 한번씩 해보시죠? 자기 블로그 가치는 얼말까? 하며...
예전에 블로그얌에 해볼려구 한적이 있는데, 그땐 주민등록번호를 요구해서 "아니 겨우 이거하는데, 왜?..."하며 안하고 넘겼는데... 꼭 필요한게 아니면 개인정보 기입은 반감이 들지 않나요? 저는 좀 그래서... ㅡㅡ;
암튼, 이번에 가보니 간편하게 할 수 있더군요~ (역시나 약관같은 건 자세히 읽어보진 않았지만요..)

전에도 블로그가치평가같은 거 몇번 해봤는데... 매번 '그 결과값은 대체 어떻게 계산된건지?' 의문입니다.ㅎㅎ 한번 재미로 가볍게 해보는 거겠죠? 굳이 의미를 찾자면 내블로그의 애착을 더 가지게 되는 거 같아요~ 헤헤
흠... 블로그얌... 웃긴건 생각보다 디게 많이 나왔다는 겁니다.  71만원이라~(현금으로 돌려준다면 얼마나 좋을까나? ㅎㅎㅎ) 글고, 아~ 제가 작년 2월부터 블로깅을 했다는 걸 새삼... 댓글도 많이 달렸구나!! (거의 반은 제가 단 댓글이겠지만...) 느끼네요~ ^-^;;

참, 해보신 분들 계시면 얼마나오는지 알려주실래요?(은근히 경쟁의식.. 헤헤) 비교해보고 그럼.. 재밌을 거 같은데...



블로얌 가기 // http://www.blogyam.co.kr

캐쉬백 (Cashback, 2006)

from review 2008/01/15 00:54
Cashback(2006)

간만에 다운받아서 영화를 봤습니다. 잘못된 것이긴 하지만 가끔 이렇게 봅니다.

흠... 조용조용한듯 잔잔하면서 섬세한 영화랄까?
저는 그냥 심심하면서 뭔가 감성적이 영상의 이런 영화가 좋아요~

굳이 억지 웃음을 유발하거나, 의도적으로 표나게 감동이나 눈물을 지어짜게 하는건 외려 재미반감입니다.
특히 일반 휴머니즘 영화는 별로예요~ 예를 들자면 '쉰들러 리스트'나 '아이엠 샘' 같은 영화에, seevaa는 감성이 메말랐는지 이상하게 감흥을 못는끼네요~

저같이 심심한듯 잔잔한 영화를 좋아하신다면 추천입니다. Cashback(2006)

줄거리 ..


사용자 삽입 이미지


간만에 만들다 지쳐버린 스킨 컨셉입니다. 이름하야 'Dirty Engineer'. 어때요? 양호한가요? ㅎㅎ
원래는 이것과 다르게 생각난 게 있어서 만들어보다 여차저차 이렇게 되어버렸는데...
"오늘은 대충 여기까지..."라는 귀찮음때문에... ^-^;;



사용자 삽입 이미지

Google AdSense 달아보았습니다. 왠만한 블로거라면 한번씩 도전해보고, 적잖은 수익을 내는 분들 계시던데...
뭐 수익이 있다면(더구나 많다면... 헤헤) 좋겠지만, 이제서야 작은 호기심에 달아보아요~
'아~ 요런거구나~' 이런 취지에서... ㅎㅎ

흠... 첨에 달때도 블로그랑 매칭(단지 디자인적인)이 될까? 의문이었는데...
겨우 '그래 괜찮아!' 정도로 붙였는데도 계속 제눈에 가시군요~

원래 광고란게 그렇겠지만 애드센스 붙이고나니 따로 노는 분위기랄까?
크기별로 광고종류를 고를 수 있긴 하지만, 자신의 블로그에 최적화할 수 있게 크기조절은 불가능한건가요?
코드에 width크기를 바꿔서  붙이니 광고가 안보이네요...

이틀되었는데, 이제 공익광고도 별로 안뜨고 관련성있는 광고도 뜨는것 같아요...
방금 보니 실제 클릭은 없어서 수익은 없는데...

뭐 한동안 거슬리는 심기와 변덕를 꾹~참고, 달아보려구요~
(솔직히 보잘것 없는 블로그라 $100? 까지는 엄청 오래 걸릴꺼 같고, 제 성격상 거기까지 애드센스를 달고있진 못할꺼 같아요~ 헤헤)
한동안 블로그 방문하시는 여러분들도 보기 불편하시더라도 너그러이 이해해주삼~ ^-^//



|  1  |