2008년 4월 5일 토요일

[CSS] 자바스크립트 없이 재빠른 롤오버 버튼 만들기

 

출처 : How to make Buttons with Hover Load Faster

자바스크립트를 이용하지 않고 단지 css만을 이용해서 롤오버를 만드는 방법이다.

예제 css :
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

button_example

css 소스와 이미지만 보고 대충 감잡은 분들도 있을거란 생각이 든다.

원리는 간단하다.

 

  1. 한 이미지에 노멀할때랑 롤오버되었을때를 같이 만들어 넣는다. 위 예제처럼 아래위로 붙여 넣는다.
  2. css에서  overflow:hidden 을 이용해서 height: 30px 만 보이고 나머지는 안보이게 가린다.
  3. 마우스를 올렸을때 , 즉 롤오버 되었을때 위로 -30px을 이동시킨다. background-position: 0px -30px
  4. 어차피 height:30px; 만 화면에 보이기 때문에 롤오버된 이미지만 보인다.

 

어찌보면 눈속임수라고 할수 있다 .

미미하지만 자바스크립트 부하를 줄일수 있고, 미리 이미지가 로딩되어 있기 때문에 보통 롤오버 버튼보단 빠른 반응을 볼수 있다.

작지만 놀라운 아이디어에 박수~

0 개의 댓글 라벨: ,

2008년 4월 4일 금요일

용량과 트래픽을 못이겨 설치형 블로그를 버리다.

블로그를 개인이 호스팅하고 유지하기에는 한계가 있다.

더군다나 내 블로그 자체의 트래픽보다 내 글을 퍼간 블로그의 트래픽으로 인한 피해는 심각하다. 개인호스팅으로서는 그 막되먹은 트래픽을 견뎌낼 제간이 없다. 계속되는 텍스트큐브의 업그래이드도 매번 따라가기 지쳤다.

그냥 나는 글 적는데만 신경쓰고 싶다. 그게 내가 블로그에 바라는 전부다.

0 개의 댓글

2008년 3월 19일 수요일

[강좌] RSS,ATOM 생성 클래스 .. php에서 rss 새성하기

예전에 내가 급하게 만들었던 rss 만들기 클래스가 있었는데..
[강좌] php에서 rss 문서 만들기
간단하게 수정해서 쓸만하긴 하지만 먼가 어설퍼서  ㅋㅋ

feedcreator 라는 프로그램을 소개한다.~
http://www.bitfolge.de/rsscreator-en.html
RSS0.91, RSS1.0, RSS2.0, PIE0.1, MBOX, OPML, ATOM0.3, HTML, JS
다양한 포맷을 지원한다.

아래는 feedcreator.cass.php에 포함된 사용 예제..

include("feedcreator.class.php");

$rss = new UniversalFeedCreator();
$rss->useCached();

//타이틀
$rss->title = "PHP news";
//피드 설명
$rss->description = "daily news from the PHP scripting world";
//링크
$rss->link = "http://www.dailyphp.net/news";
//피드주소
$rss->feedURL = "http://www.dailyphp.net/".$PHP_SELF;

//이미지와 관련된것. 아마 이게 rss 2.0에 새로 생긴것같음..
// 글과 따로 이미지를 넣을수 있음
$image = new FeedImage();
$image->title = "dailyphp.net logo";
$image->url = "http://www.dailyphp.net/images/logo.gif";
$image->link = "http://www.dailyphp.net";
$image->description = "Feed provided by dailyphp.net. Click to visit.";

// 옵션
$image->descriptionTruncSize = 500;
$image->descriptionHtmlSyndicated = true;

$rss->image = $image;

// 대충 여기서 db 돌리고..
//mysql_select_db($dbHost, $dbUser, $dbPass);
//$res = mysql_query("SELECT * FROM news ORDER BY newsdate DESC");
//while ($data = mysql_fetch_object($res)) {
    $item = new FeedItem();

     //글 제목
    $item->title = "This is an the test title of an item";
    //글 주소
    $item->link = "http://localhost/item/";
    //글 내용
    $item->description = "<b>description in </b><br/>HTML";
   
    //피드 시간
    $item->date = time();
    $item->source = "http://www.dailyphp.net";
    $item->author = "John Doe";
    
    $rss->addItem($item);
//}

// 원하는 피드 형식을 정해주면 됨
// 피드 형식 :  RSS0.91, RSS1.0, RSS2.0, PIE0.1, MBOX, OPML, ATOM0.3, HTML, JS
echo $rss->saveFeed("RSS0.91", "feed.xml");
사용법 대충 보면 알겠지만 그다지 어렵지는 않다.

이거..강좌라고 해놓고 소개잖아 소개.. -_-;

0 개의 댓글 라벨: , , ,

[강좌] php용 강력하면서 쉬운 소켓(socket)클래스 , Snoopy

왜 그동안 삽질을 하고 있었던걸까? 
호스팅에서 사이트 긁어오기 (부제:로또 번호 긁어오기)
위에 글에서도 적었지만, 일반 호스팅에서는 외부에 있는 파일을 file,fopen으로 가져오는것을 막아 놨다. 그래서 꽁수로 python을 쓰면 된다고 흥분하며 말했다.

그.런.데. 당연히 안될거라 생각했던 fsocket은 된다. -_-;
난 왜 저걸 하고싶어서 파이썬 책을 두권이나 샀던걸까 .. 

    /(
    //\\
   //   )_.-"""-._,-""-.
   \\ ^,'_\     /_\     )
    `./ /O\|   |/O\\   /
      \ \_/|   |\_/ \_/
       \ .'  _  `. /
   .-.  ( .:(_):. )  ,-.
  (   `._`._.-._,'_,'   )
   )                   (
  (   .-------------.   ) hjw
   `-'               `-'



여튼 snoopy 라는 강력하면서 쉬운 php용 소켓 클래스를 소개한다.


마지막 버전은 http://snoopy.sourceforge.net/ 에서 구할수 있다.


하지만 .. 지금 현재 마지막 버전인 snoopy 1.2.3 는 구문 오류가 난다.



snoopy 1.2.3 버전 구문오류 해결법


722번째 줄에서 구문오류가 날것이다.
722번째 줄을 보면 아래와 같다
                            "?,
                            "?,
                            "?,
                            "?,
                            "?,
                            "?,
                            "?,



이걸 아래와 같이 바꿔주면 된다.

                            "?",
                            "?",
                            "?",
                            "?",
                            "?",
                            "?",
                            "?",




아마도 어떤 특수 문자들 같은데 한글 윈도우에서는 보이지 않거나 깨져버린것같다.

그래서 ? 로 바뀌어버리면서 구문오류가 난것같다. (이유는 정확하지 않음)

일단 다운 받아서 원하는 디렉토리에 스누피를 넣어두시고 아래와 같이 사용하면 된다

include "Snoopy.class.php";
$snoopy = new Snoopy;
$snoopy->fetchtext("http://www.php.net/");
print $snoopy->results;

아 놀라워라.. 너무 쉽다.


이런것도 가능하다.



$submit_url = "http://lnk.ispi.net/texis/scripts/msearch/netsearch.html";
   
$submit_vars["q"] = "amiga";
$submit_vars["submit"] = "Search!";
$submit_vars["searchhost"] = "Altavista";
        $snoopy->submit($submit_url,$submit_vars);
print $snoopy->results;

저 주소로 쿼리를 보내서 결과값을 값는것이다.

이외에도 여러가지 기능들이 많다.




  • 웹사이트 내용을 긁어오기

  • html 태그는 쏙빼고 내용만 긁어오기

  • 링크만 골라서 가져오기

  • 프록시서버 지원

  • 기본적인 로그인인증 지원

  • 사용정보, 레퍼러, 쿠키등 설정 지원 (아.. 이거 위험한데..)

  • 쉽게 폼데이타를 보내고 결과값 받기 (이거도 위험한데..)

  • 프레임 지원




자세한건 README 파일 참조 



세상엔 없는게 없는거같다.



프로그래머로써 너무 편해지고 있다.


집안일이 힘들것같아서 세탁기며 청소기며 집안에 들여놔줬더니 더 게을러지는 주부같다고나 할까? ㅋㅋ


그럼.. 파이썬은 안녕~ 다음에 언제 또 필요해질지 모르겟지만 이제는 나에게 무용해졌구나.. 그동안 고생했어.

0 개의 댓글 라벨: , , ,

[웹디자인] CSS 로 만들어진 다양한 네비게이션 메뉴들 대량 모음!!

출처 : CSSで作成されたサイトのメニューサンプル集(css로 작성된 사이트메뉴 샘플들 모음.)

サイトのデザインにとってメニュー部分は重要な箇所になってきます。そのメニュー部分のサンプル集。
多くのリソースから自分の作りたいサイトにあったナビゲーションを選んで使えますね。

사이트에 있어서 메뉴부분은 중요하지. 그 메뉴부분 샘플모음.
많은 리리즈에서 자기가 만드는 사이트에 맞게 네비게이션을 골라서 쓰삼~ 

  1. 11 CSS navigation menus
  2. 12 more CSS Navigation Menus.
  3. 14 Free Vertical CSS Menus
  4. 2-level horizontal navigation
  5. Absolute Lists
  6. Accessible Image-Tab Rollovers
  7. ADxMenu
  8. A drop-down theme
  9. Bookend Lists
  10. Bulletproof Slants
  11. Centered Tabs with CSS
  12. Clickable Link Backgrounds
  13. Create a Teaser Thumbnail List Using CSS
  14. Creating Indented Navigation Lists
  15. Creating Multicolumn Lists
  16. cssMenus - 4 Level Deep List Menu
  17. CSS and Round Corners
  18. CSS-Based Tabbed Menu
  19. CSS-based Navigation
  20. CSS
  21. CSS Mini Tabs (the UN-tab, tab)
  22. CSS only dropdown menu
  23. CSS only flyout menus
  24. CSS only flyout/dropdown menu
  25. CSS only flyout menu with transparency
  26. CSS only vertical sliding menu
  27. CSS Swag
  28. CSS Tabs
  29. CSS Tabs
  30. CSS tabs with Submenus
  31. dTree Navigation Menu
  32. Definition lists - misused or misunderstood?
  33. Do You Want To Do That With CSS? - Multiple Column Lists
  34. Drop-Down Menus, Horizontal Style
  35. Float Mini tabs
  36. Flowing a List Across Multiple Columns
  37. Free Menu Designs V 1.1
  38. FreeStyle Menus
  39. Hidden tab menu
  40. How to Style a Definition List with CSS

    더보기>>>

CSSベースなのも嬉しいですね。
css 베이스라서 좋구만.

나도 좋구만~~~ >.< b

0 개의 댓글 라벨: , ,
피드 구독하기: 덧글 (Atom)