CSS3, jQuery, Twitter.. 요즘 림미노닷컴 소소한 업뎃..ㅋ

개인적인 일에 바빠 림미노닷컴에 손을 놓고 있었는데, 이 개인적인 일이라는 것이 가끔 무기력해지기도 하고..
그래서 내가 가장 좋아하는 취미 두가지 중 비교적 빠른 시간에 결과가 보이는 웹사이트 개발을 하기로 했다.
물론 예전처럼 100% 신경쓰진 못해도, 뭐 리뉴얼도 아니고 소소한 업뎃이니까 ㅋ

1) CSS3
신경을 끄고 살았던 터라 CSS3가 나온지도 몰랐다;;
WebDesignerWall (아래 사용된 예제 그림들의 출처) 에 놀러갔다 이제야 본거지;;
그동안 온갖 편법과 노가다를 단 몇줄로 끝내버리는 대단한 변화가 있었다. 예를들면,

색상을 지정할때 rgba값을 주면 투명도를 조절할 수 있다.

마지막 alpha는 %인데, 0은 완전 투명이고 1은 완전 불투명이다. 예제에서는 25%를 지정한 것이다.
CSS3에 추가된 태그들에 무조건 rgba만 사용해야 하는 것은 아니다. 적재적소에 사용하면 참 편리하다.

이렇게 하면, 짠 하고 div에 그림자가 생긴다. 콤마(,)로 구분해서 계속 그림자를 추가할 수 있다.

-webkit-box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);
-moz-box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);
box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);

림미노닷컴에서는 월페이퍼 메뉴의 롤오버에 사용했다. (사실 그림자가 있다는걸 보여주려고 좀 과하게 쓴면이;;ㅋㅋ)


텍스트에도 그림자를 줄 수 있다.

이렇게 하면 끝. 물론, 아래와 같이 색상을 rgba로 줄 수 있다 (투명도 조절을 위해 -_-b).

text-shadow: 1px 1px 0 rgba(255,255,255, 1);

다음은 박스나 이미지 곡선처리다 (참 많은 편법들이 나왔었지 ㅋ).
기존에 모퉁이를 둥글게 하려면 이미지를 사용해야 했지만, 이젠 CSS3 하나로 해결할 수 있다.

이렇게 하면 div나 img의 모서리를 둥글게 할 수 있다. 이것은 림미노닷컴 pathos 메뉴에 잔뜩 사용했다.
네 모서리 둥글기를 똑같이 하고 싶다면 아래와 같이 간단히 할 수도 있다.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;

그다음 림미노닷컴에 적용해본 CSS3는 기울기다. 말그대로 CSS3만으로 이미지를 기울일 수 있다.

-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

이렇게 하면 시계방향으로 30도 기울어진다. 반시계방향으로 하려면 -30deg 값을 주면 된다.
림미노닷컴 pathos 메뉴의 프로필 이미지를 보면 -5도~5도 사이에서 랜덤으로 기울어진다. 다소 귀엽다 ㅋㅋ
문제는 Google Chrome에서 계단현상이 생긴다. FireFox에서는 살짝 Blur하게 보이고, Safari에서는 깨끗하다 +ㅂ+


이미지를 확대할 수도 있다. 림미노닷컴 월페이퍼 메뉴에 사용했는데, 그림자와 함께 쓰면 그럴싸하다.

-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);

이렇게 하면 130% 확대된다. 그냥 확대되는 것이 아니라 다른 컨텐츠 위로 떠올라 확대되는 느낌이다.
다시 말하면 레이아웃을 깨지 않고 개별적으로 적용되는 것.
다만, 원본이미지가 어떠하든 확대된 이미지 해상도는 떨어진다. 지나치게 확대하면 못 알아볼지도;;

일단 림미노닷컴에 적용해본 CSS3는 여기까지다.
읽어보니 애니메이션도 되고, 인쇄를 위한 기능도 강력해졌고, 객체지정이랄지 하는 요소가 편리해졌다.
역시나 Internet Explorer는 CSS3를 지원하지 않는다.
FireFox에서는 img에 둥근 모서리 적용이 안되는 것 같고, Chrome에선 이미지를 기울이면 계단현상이 심하다.

놀라운 점은, Safari에서 림미노닷컴의 모든 기능이 빠짐없이 작동한다는 것.
CSS3 뿐만아니라 Milkbox도 플래시 위로 잘 튀어나오고 (IE나 FF에선 플래시에 가린다)..ㅋ
여러분~ 림미노닷컴은 Safari에서 가장 잘 보여요 :) 점유율이 5% 밖에 안된다지만 뭐;;;


2) jQuery + Twitter
간간히 Google Buzz에 들러 넋두리 하곤 한다 (요즘과 me2day는 가끔;;).
요즘은 공개된 API가 없는 것 같고, me2day는 삭제가 안되고 해서, 트위터를 이용해보기로 했다.
Buzz의 RSS feed가 공개되어있기는 하지만, 트위터처럼 다양한 시도가 있어보이지는 않아서 일단 패스..

왜 그랬냐면, pathos라는 메뉴를 만들고 싶었기 때문에..ㅋ
인상깊은 말이나 넋두리, 알림 등을 지나가다 한마디씩 적어 놓으려고..
Run's House 보면 마지막에 항상 지인들에게 문자로 지혜의 말을 날리던데,
나도 누군가에게 영감을 주는 이야기를 남기고 싶다. 지금 당장은 힘들더라도 언젠가는..ㅋ
아무튼 이런 기능을 직접 코딩하긴 귀찮고 시간도 걸리고 해서, 구글링으로 얻은 트위터 연동 jQuery를 이용했다.

트위터는 Buzz처럼 수정은 안되지만 요즘처럼 삭제가 되고, 오픈 플랫폼으로써 퍼오기가 편하다.

림미노닷컴 pathos 메뉴에 가면 CSS3로 짠 레이아웃에 글들이 나열되는데,
현재 사용하는 jQuery에 한계가 있는 듯 하다. reply나 retweet 버튼 넣기도 어려워 보이고..
그래서 JSON으로 데이터를 가져와서 cache하고 뿌리는 방법을 찾긴 했는데, 잘 모르겠다.
누구 하는 방법 알면 가르쳐줘요~ㅠㅠ 일단 reply와 retweet 버튼만 넣을 수 있었음 좋겠어요..

jQuery를 이용해 로딩 화면도 만들었다. 무쟝 간단한 거였지만, 자바에 무지한 나로서는 쾌재를 부를 노릇 ㅋ;;;
트위터에 연결하는데 시간이 좀 걸리는 것 같아 그동안 로딩아이콘이 어색함을 달랜다.


여기까지가 요 몇일 졸면서 만든 림미노닷컴 업뎃들. 이 글도 CSS3에 많은 양을 할애했는데, 그만큼 재밌었다.
훨씬 많은 변화가 있어보이고, jQuery도 현재까지 나온 library만 해도 엄청나 보이지만, 시간관계상 미루기로..ㅋ