RSS


:hover 를 이용한 Rollover Menu 만들기

2007년 10월 18일 | CSS Tip | 덧글 (2) |

처음 블로그를 만들고 멋진 글을 남겨야한다는 압박에 보다시피 글을 쓰는 횟수가 저조하다.
점점 스스로 좁아지고 블로그가 의미가 없어진다는 느낌을 받는 순간.
보여주기 위한 블로그가 아닌 스스로 공부할 수 있는 블로그를 만들어보자는 생각을 했다.
그래서 쉽지만, 괜찮았던 결과물들을 정리해보는 방향으로 설정했다.
혹시 유치한 예제들을 만나면 그냥 읽지 않아도 된다. ㅋㅋ

Rollover(롤오버)메뉴를 만들때 기존에는 javascript의 도움을 받아왔다.
난 개발자가 아니기 때문에 기존에 사용하는 사이트에서 긁어오거나 에디터에서 자동으로 생성되는 소스를 그대로 사용했던 기억이 있다.
그런데, CSS로 Rollover메뉴를 쉽게 만들 수 있는 방법을 아는 순간 경악했다.
이런 간단한 방법이 있단 말인가! 왜 몰랐지.
역시 공부를 해야해…. 라며 자책했다.
소스? 어마어마하게 줄어든다. 게다가 전혀 모르는 소스가 아닌 아는 소스라는 사실!

Html

<ul id="tab">
	<li id="gi"><a href="#">채용정보</a></li>
	<li id="ht"><a href="#">헤드헌팅</a></li>
</ul>

CSS

#tab {
	list-style:none;
}
#tab li {
	float:left;
}
#gi a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/01.gif) no-repeat left top;
}
#ht a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/02.gif) no-repeat left top;
}
#gi a:hover {
	background-position:0 -25px;
}
#ht a:hover {
	background-position:0 -25px;
}

위 방법은 html에서 메뉴를 이미지가 아닌 텍스트로 구성하고, 이미지 대체 기법으로 작업한 것이다.
그냥 바로 메뉴 이미지를 넣고 해도 무방하다. (text-indent 삭제)

원리는 CSS의 :hover가상클래스를 이용한 방식이다.
마우스 on상태와 over상태의 두 상황이미지를 하나로 만들고,
마우스 on시에 :hover가상클래스를 이용해 위치값을 변경해서 이미지가 바뀌게 하는 것이다.

 예제 1

이 방식말고도 여러 방식들이 가능하고, IE에서는 버그(?)도 있다.
버그 관련해서는 따로 포스팅 할 기회가 있을 것 같다.

어쨌든 디자이너들은 이 방식으로 개발자한테 당당해지자!!!
별것도 아닌걸 가지고 콧대세우는 개발자말이다……..

장군블로그에 사용중인 Plug-In

2007년 10월 11일 | 워드프레스 | 덧글쓰기 |

현재 장군블로그에 사용중인 Plug-In 입니다.
새로운 Plug-In 이 설치되면 바로바로 업데이트할 예정입니다.

국내 동호회나 포럼 등에 다양한 정보가 있었다면 좀더 수월한 작업이 될 수 있었겠지만, 아시다시피 자료가 충분하지 않습니다.
먼저 앞서가신 분들이 좋은 자료를 정리해주시면 좋으련만… T.T
필요에 따라 구하다보니 엉뚱한걸 설치했을 수도 있습니다.
혹시 더 좋은 Plug-In 이 있거나 업데이트 정보가 있다면 덧글로 알려주세요~
^^

지금 생각은 워드프레스 초보로서 설치부터 스킨 수정에까지의 작업을 몇 차례에 걸쳐서 포스팅할 생각입니다.
저처럼 어려워해서 도전못하시는 분들이 쉽게 사용할 수 있는 포스팅을 해봐야겠습니다.
혹시 잘못된 점이나 개선점이 있으면 포스팅시 쿡쿡 찔러주세요.

플러그인 버전 설명
Advanced-Admin-Menus 2.2.1

Drop Down Menus for WordPress Admin Panels Andy Staines가 만듬.

Akismet 2.0.2

Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it. You can review the spam it catches under “Comments.” To show off your Akismet stats just put <?php akismet_counter(); ?> in your template. Matt Mullenweg가 만듬.

Counterize 0.53

Simple counter-plugin with no external libs - saves IP, timestamp, visited URl, referring URl and browserinformation in database, and can display total hits, unique hits and other statistics in WordPress webpages. Admin-interface available with detailed information… Anders Holte Nielsen가 만듬.

Custom Query String(Hack) 2.701

Change the number of posts displayed when viewing different archive pages. Young-Min, Cheon가 만듬.

External Links 2.10

Adds a class="external" to all outbound links. Use <a class="no_icon" …> to disable the feature. Denis de Bernardy가 만듬.

IImage Browser 1.5.2

This plugin adds an “IImage Browser” button to the Quicktags area which opens an image browser to select from all previously uploaded images and add the appropriate code to the post. Martin Chlupáč가 만듬.

Media-Filter 0.2

글 작성시 동영상 삽입을 쉽게 할 수있도록 도와주는 플러그인 입니다. GoogleVideo, YouTube, Mncast, Daum(tvpot) 등의 FLV 동영상을 지원하며, 일반적인 동영상(wmv, mov, swf 등)의 삽입도 지원합니다. 이 플러그인은 coolplayer v3.5 에 기반을 두고 있습니다. 자세한 사용법은 플러그인페이지를 참고하세요. Cheon, Yong-Min가 만듬.

Pagebar 1.3.2

Adds an advanced page navigation to Wordpress. Lutz Schröer가 만듬.

SRG Clean Archives 4.2

This plugin is designed to display your archive listings in a clean, uniform, single-query fashion that’s Search Engine friendly on a dedicated page or in your sidebar. Geek With Laptop가 만듬.

the_excerpt Reloaded 0.2_mod

This mod of WordPress’ template function the_excerpt() knows there is no spoon. Kaf Oseo가 만듬.

TP-Guestbook 0.9.8

This is modified version of Threaded and Paged Comments plugin by Trustin Lee:: This plugin helps you make ‘Guesbook Page’. You better Deactivate or Uninstall currently installed ‘Threaded Comments’ and ‘Paged Comments’ Cheon, Youngmin가 만듬.

WP AJAX Edit Comments v1.1.1.2

Allows you and your users to edit their comments inline. Admin and editors can edit all comments. Ronald Huereca가 만듬.

WP lightbox 2 0.6.3

Lightbox JS v2 is a simple, unobtrusive script used to to overlay images on the current page written by Lokesh Dhakar. Add rel=”lightbox” attribute to any link tag to activate the lightbox. This plugin integrate its feature into your WordPress blog. Safirul Alredha가 만듬.

드디어 워드프레스로 블로그 옮기다!

2007년 10월 8일 | 워드프레스 | 덧글쓰기 |

처음 블로그를 만들면서, 워드프레스와 태터툴즈 사이에서 어마어마하게 고민을 했었다.
둘다 설치형 블로그이지만, 각각의 장단점이 모두 고민거리였다.
그래서 둘다 설치하기로 결심하고, 설치를 했었다.
태터툴즈는 다들 아시겠지만, skin.html 과 style.css 파일만 수정하면 스킨을 만들수도 수정할 수도 있다.
계층이 쉽게 구분되어져서 작업이 훨씬 쉬워보인다.
하지만, 워드프레스는 제로보드처럼 파일을 쫘~악 찢어놓아서 어려워보인다.
또한 영문이라는 최고의 단점!!!! 을 가지고 있다.

조금 훑어보다가 바로 워드프레스를 포기했다. 귀찮게 느껴졌다.
어차피 글쓰는 공간인데 뭐면 어때라고 생각했다. 귀차니스트…… T.T;

그러던중. 블로그 관리 전혀 안하던중.. 무언가 전환점이 필요했다.
나 자신의 나태함이 너무 싫었다.

그래서 워드프레스를 다시 설치하기로 맘먹고, 팠다!
어려워보일뿐, 스킨만드는게 훨씬 쉬움을 알게된 순간! 머리를 한대 맞은 느낌~ 땡~~~ 땡~~

그렇게해서 지금의 워드프레스 스킨이 탄생했다.
복잡한 디자인을 했다가는 시간이 너무 낭비될 것 같아서, 네이버 블로그에서 썼고, 지난번 태터에서도 썼던 스킨을 약간 변형해서 작업을 했다.

디자이너로서 폰트의 크기에 많은 고민을 했다.
결론은 좀 없어보여도(?) 폰트 사이즈를 키우자는 쪽으로 결정했다.
내용 위주의 블로그를 꾸미는데 있어서 폰트의 작은 것보다는 큰게 낫다고 판단했다.

현재 80% 정도 작업된 듯 하다.
Favorite Link에 사용한 플러그인을 전부 정리할 예정이다. 아직 전부는 정리하지 못했다.

열심히 블로깅 하기로 결심!!
아직 주제를 정하지는 못했지만, 너무 블로그에 목숨걸지 않으면서 즐기는 블로그를 해볼 생각이다.
능력도 안되면서 어려운 말 써가는 보여주기식 블로그는 절대 하지말자고 다짐!

격려의 말씀 많이 부탁해요~~~

스킨을 만들어볼까~?!

2007년 10월 2일 | 성민장군 | 덧글쓰기 |

스킨 바꿀 수 있을것 같애.
괜히 태터랑 다르게 생각했는데, 쉽게 생각하니깐 별거 아니두만..
얼렁 스킨 만들어보자구.

설치시 체크리스트

퍼머링크 변경후 페이지 에러
1. root 에 내용이 없는 .htaccess 파일을 생성시킨다.
2. index.php 파일의 속성을 666 으로 변경한다