css3+jQuery를 이용해서 만든거고.. ie8에서도 둥글하진 않지만.. 나오긴 나옵니다. 원래 메타사이트 링크용으로 만들려고 했는데.. 그건 또 따로 한번 만들어 보고요 (...) 클릭을 해야하는게 조금 번거롭긴 한데... 그래도 쓸 사람만 쓰는거니 숨겨놔도 괜찮을 것 같... -사실 조금 불편하긴 하네요. ㅠ,.ㅠ)q 난 안될꺼야..




css3으로 이걸 한번 만들어볼까요? 아시겠지만, css3으로 적용된 스타일은 적용이 안되는 브라우저가 있을 수 있습니다. 물론, [code]<--[if IE 6]>[/code]이걸 이용해서 ie6나, 혹은 특정 브라우저별로 스타일을 따로 정해줄 수도 있습니다만... 아무튼 css3을 이용한 스타일은ie를 제외(!)하고, '대부분(?)'의 브라우저에서 확인이 가능합니다. 예전같았으면, 포토샵에서 하나하나 만들었을텐데... (...)

 그럼 한번 만들어 볼까요?[code].button, .button:visited { background: #000 url(투명오버레이png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; }[/code]이게 모체가 되는 스타일입니다. 참고로 moz와 webkit은 쉽게 말해, moz는 모질라기반, webkit은 사파리, 크롬을 위한 스타일값입니다. 고로, moz와 webkit은 스타일을 각각 따로 정의해줘야 되는 값입니다.

 몇개만 간단히 간단하게 설명하면, 'background'에 배경이미지를 넣는데, 원래 스타일에 투명한 오버레이 이미지를 덮어 조금 스무드한 효과를 낼 수 잇습니다. 'display: inline-block'는 아시다시피, 인라인 요소처럼 흐르면서 블록 요소 처럼 width, height, padding, margin등을 사용 할..... 모르시는 분은, 인라인블럭값을 빼고 적용해보고, 또 넣고 적용해보며 알아가면 좋겠네요. '-moz/-webkit-border-radius'는 얼마만큼 둥그렇게 깍아줄지(?) 결정하는 값입니다. 높아질 수록 버튼이 둥글둥글해집니다. 저는 적당히 5px를 줬습니다. '-moz/-webkit-box-shadow'는 버튼 주위에 음영을 얼마나, 그리고 무슨색으로 주는지 결정합니다.

그리고, 우선 버튼에 들어가는 기본 값을 정해놨으면, 여기서 더 해야 할건 'hover, active, visited'등의 마우스가 올라갔을 때, 클릭했을 때 등의 값을 정해줘야합니다. 이미지로 정해준게 아니라서 css로 또 정해줘야 합니다.
[code].button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .button, .button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }[/code]저는 이런식으로 버튼값을 줬습니다. 그럼 한번 볼까요, 어떻게 적용되는지? 만들어진 예제는 아래처럼 뿌려집니다. 크롬이나 파이어폭스 등, ie를 제외한 css3이 사용가능한 브라우져에선 아래 예제가 잘 보입니다. ie에서보면 그냥 그저그런 네모박스에 불과합니다만.. 아, 아무튼.. 참...... 쉽죠잉!? '-')v






요기 쓰인 overlay.png를 따로 첨부합니다. *다른 이름으로 저장!




당연하지만, 브라우저의 환경이나 등등, 아직까진 css3은 완벽하게 구현되진 않습니다만.. 에.. 그러니까 말많은 css3의 환경이랄까, Mozilla/Firefox/Gecko는 -moz-를 쓰고, Webkit, 그러니까 Safari/Chrome은 -webkit-이란 녀석을 씁니다. ie8은 아직 css3를 지원하지 않..고 있죠? 아무튼 (...) 나름 공부도 할겸.. 정리 해봤습니다.

1. 그림자 효과 넣는 것부터 볼까요? 그림자효과를 넣을때는[code]box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;[/code]moz와 webkit을 사용하는 브라우저에 보이게 하기 위해서 요로케 작성하죠. 아시겠지만 #333은 색을 지정하고, 첫번째와 두번째 px값은 각각 가로와 세로로 얼마만큼 그림자를 줄 것인가-이고, 마지막 px값은 blur, 그러니까 보기좋게 번짐효과를 얼마나 줄건지 결정하는 부분입니다. 위 스타일을 사용하면 아래그림처럼 나옵니다. 참 쉽죠잉?
2. 다음은, 그라디언트입니다. 사실, 개인적으로 이것때문에 css3를 찾아봤었습니다.[code]-moz-linear-gradient(-90deg,#1aa6de,#022147); -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));[/code]그라디언트.. 첨엔 moz랑 webkit이 미묘하게 달라서 이게뭥미-스러운 부분도 있긴한데.. 어짜피 저는 스타일만 알면되니 상관없다능! moz는 첫번째 정의값, -90deg가 어느 방향으로 얼마만큼 그라디언트를 줄지를 정하는겁니다. 물론 뒤에 컬러값은 시작되는 색과 끝나는 색이죠. webkit의 사용예는, 첫번째 linear가 그라디언트의 형태를 지정하는 부분이고, 두번째 세번째가 위에서 아래로 방향을 제시, 다음값이 시작되는 색과 끝나는 색입니다.
3. 다음은 RGBA, 사용해보니 여러모로 유용할 것 같습니다. 뭐 설명이 필요없죠. 예제와 함께 데모도 함께 보시면 이해가 빠르실 겁니다.[code]background-color: rgba(0, 54, 105, .5);[/code]이걸 이용해서, 예제를 만들어본다면...? 아래처럼 배경이 50% 투명화를 시켜줄 수 있습니다. 참 쉽죠잉? 주의할건, 헥스(#)값이 아니라 rgb모드로 색을 지정해줘야 된다는 점입니다. 아시다시피 1,2,3번째 값에 rgb색을 주고, 맨 끝의 값이 투명화 %입니다. 0에 가까울 수록, 투명해지고, 10에 가까울 수록 불투명해지죵.
4. 다음은 은근히 자주 애용하는 border, 테두리넣는 방법입니다.[code]border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;[/code]얼만큼 테두리를 줄건지 px값을 정하고, 색을 지정합니다. 여기서 중요한건 bottom, top, left, right를 같은 색으로 정의해주어야 합니다. 그래야 아래 그림처럼 이쁘게(?)나옵니다.
5. 이번엔, 드레그로 선택한 텍스트의 배경값을 바꿔주는 겁니다만. 참고로 ::selection은 지금 현재 CSS3에서는 빠진 걸로 알고 있습니다만.. (...) 아무튼...[code]::selection { background: #3C0; /* Safari */ color: #90C; } ::-moz-selection { background: #3C0; /* Firefox */ color: #90C; }[/code]코드를 적용하면 아래처럼 드레그 했을 시에, 색이 바뀝니다. 나름 활용도가 높을 지도 모르겠네요.
6. 다음은 마우스를 올렸을대 선택된 박스를 키워주는 겁니다.[code]-moz-transform: scale(1.15); -webkit-transform: scale(1.15);[/code]이걸 li:hover에 넣어서 예제를 만들면, 마우스를 롤오버시켰을 때, 크게 키워주는 효과를 낼 수 있습니다.
7. 마지막으로, 제가 이용해보고 싶었던 칼럼넣는 방법인데, 나름 쓸만할 것 같습니다. [code]-moz-column-count:3; -moz-column-rule: solid 1px black; -moz-column-gap: 20px;[/code]이렇게 주면, 그 부분에 한해서 칼럼을 3개로 나눠주더군요. 물론 두개도 가능합니다. 글이 길어지면 다음 칼럼으로 넘어가는데, 애초에 두개의 칼럼을 나눠서 쓸 수 있는 간단한 방법이 있으면.. 좋겠습니다만.. 음!
쿠나님 블로그에 보니까, css3으로 이미지 반사효과도 낼 수 있던데.. css만으로 그런 효과를 낼 수 있다니.. 한편으론 신기하고, 한편으론 그걸 또 적용할 생각하면 머리가 아프네요. 그럼 오늘의 css3 공부는 끝-

참고, http://www.webdevout.net - 이 곳에 가면, css3의 특징과 적용가능한 브라우저를 살펴볼 수 있습니다.




시달리던 두통을 잊을 정도로 깜빡- 빠져들었던 영상. 참, 자연이란건 아름다우면서도 대단하네요. 그걸 정복하려하는 습성을 버릴 수 없는 우리.. 인간이란게 가끔은, 씁쓸합니다. 영화 아바타에서, 제이크가 이런 말을 하죠. "See the world we come from. There`s no green there. They killed their mother." 아직 Green이 조금(?)남긴 했지만, 언젠간 그런 날이 오겠죠? 참고로, 크게 늘려서 보시길 권함!





Singin' in the Rain is a song with lyrics by Arthur Freed and music by Nacio Herb Brown, published in 1929. However, it is unclear exactly when the song was written with some claiming that the song was performed as early as 1927. The song was listed as Number 3 on AFI's 100 Years... 100 Songs.

사실 뮤지컬이라는 장르를 참 좋아하는 편입니다. 다만 볼 기회가 많지 않다..는게 늘 아쉬웠다지요. 이제는 오래된.. 언뜻 잘 기억하지 못하는 추억의 영화들을, 이상하게 요즘들어 부쩍 자주 보게 되네요. 그런 영화중에는 이렇게 뮤지컬타입의 영화가 참 많은 것 같습니다. 과장된 음색에 과장된 몸짓과 표정들이 이상하리만큼 흥겹게 느껴진다고나 할까요.






Kristofer Ström made an animation/musicvideo for Minilogue. He writes: "I made this stopmotion video for Minilogue this summer, this is the short version. All made on whiteboard so... No undo/redo."

사실.. 꽤나 오래된건데.. 스탑모션으로 만들었다는 비디오 애니메이션. 이런 그림체를 워낙에 좋아하는 면도 있지만, 이걸 제작한 사람은 정말 대단하다는 생각이 절로 든다. 가끔 이런식으로 뭔가 한번 만들어 보고 싶다는 아이디어는 떠오르나.. 현실화 한다는건 역시 어려운 과제. 비도오고, 여자 3000m도 실격해서 기분도 꿀꿀.. 에라이하고 낮잠을 푹 자버렸더니- 역시나 찾아온 두통 (...)





음악에 재능있는 사람들을 보면, 나도 모르게 부럽다는 생각이 먼저들어요. 재능일까, 노력일까? 처음엔 여성보컬 목소리가 맘에 들어서, 하나하나 들어봤는데, 남자쪽 목소리도 상당히 매력적이네요. 제가 거의 1년이상 잊지않고 노래가 업뎃될 때마다 방문하는 가수는, 이 가수가 유일할 듯.. 개인적으로 이런 분위기를 좋아해서 그런지 더 애착(?)이 가는 것 같네요. 이 사람들의 유튜브를 방문하면 더 많은 노래들을 들을 수 있으니 한번 쯤은 방문해보는 것도...? 맨 끝에 셔츠 광고(?)하는거.. 은근히 꽤 귀엽다능 (...)

Awesome indie rock videosongs, PomplamooseMusic





이것도 하지말래, 저것도 하지말래. 할 수 있는게 대체 뭐니. 제대로 말도 못하지. 뭐 하나 할려고 해도, 법적으로 안된다고 하질 않나- 한국만 유독 안되는게 왜이리 많은거지? 노키아 네비도 전세계 74개국에서 무료라는데, 우리나라만 법적인 문제로 안된대. 뭐 할 수 있는게 뭐다지!? 이 빵꾸똥꾸같은-







But if you think that time will change your ways.
Don`t wait too long.

"Whatever"





호주에서 유학 할 때가 문득 떠오른다. 같은 한국인이라도, 희안한 년놈들이 있는가 하면- 정말 인간다운 사람도 많았다. 내가 학교 과정이 끝나서, 여행길에 오를 때에도. 울면서 '꼭 연락해!'라면서 터미널까지 따라와준 세 사람, 아이러니하게도 세 사람 전부 일본사람이다. 쉐어값이라고 120불 빌려가서 잠적한 M군과, 유럽계 여자애들 꽁무니만 따라다니던 발정난 K군. 중국계 애들보고 뗀놈이라고 별명 붙여주던 년들도 문제고.. 결국에 걔들은 농장간다고 끼리끼리 모여서 농장 간다고 가더라. 결국 농장 들어가서 몇개월 열심히 돈 벌다 한국와서 '유학하면서도 돈 벌었다'고 자랑했겠지. 너네들은 그것밖에 안돼. 너희 엄마 아빠가, 돈벌라고 호주보냈겠니. 영어가 안되면, 손짓 발짓만 해도 좋으니 씨티에 남아라. 괜히 농장가서 유창한 한국말 고급 배워오지 말고..




대니얼도 행보카고 시픈, 설날. 모두 행보칸 설날 되세요. 전 감기, 몸살이 걸려서 골골 (....)




I see you.




둘다 너무 잘 어울리고.. 무엇보다 서로 좋아하는 '힙합'이라는 코드로 소통할 수 있다는게 너무 부럽다. 이쁜 사랑.. 영원히 했으면 좋겠다. 정말 영원히- 언제나처럼, 그리고 지금처럼.

난 척수염환자다. 하루에 18알 정도의 약을 먹어야만, 몸과 마음이 제 구실을 한다. 하지만 약 기운이 떨어질 때쯤 끝없이 어두워지고 괴로워하는 난 괴물이 된다.
그래서 미래에게 말했다.
"나 잘못되면 좋은 남자 만나라.
그동안 너 먹고 살만큼 노래 많이 만들어 놓고 갈테니"
그러나 그녀는 싫은 내색 하나 없이 내 곁을 묵묵히 지켰다.
미래가 없었다면 난 이미 죽었을 수도 있다.





평소에 게임을 즐겨하는 편이긴 하지만.. 근래들어 울온을 잠시 휴면을 하다보니 (...) 마영전이나 워해머온라인.. 등에 눈을 돌리게 되었어요. 그럼에도 역시 저는 만족할만한 게임을 찾을 수 없었다능.. 게임 불감증 같기도 하고 (...) 워해머는 다 좋은데.. 하필 한게임이니 왜! 그래서 결국 이브온라인.. 건드려보기로 했습니다. 14일 무료트라이얼- 우주를 탐험해 볼까요?




노키아 5800 일명, 오팔이라고 하는걸 얼마 전에 샀습죠. 한창 아이폰이 마구잡이로 팔리는 사이.. 조용히 오팔이를 공짜로 질러주었습니다. 공짜폰 치곤.. 상당히 맘에 들고, 지금도 잘 쓰고 있어요. 네스팟이니 펌업뎃이니 아직 이런저런 말은 많지만.. 저는 자알 쓰고 있습니다. 웹브라우져도 오페라 모바일을 깔아서 잘 쓰고 있고.. 만화나 영화도 넣어서 보면서 잘 애용하고 있습니다. 네비는 아직 자가용이 없으니- 별로 안쓰고 있지만, 혹자들은 네비로 쓸 맵이 없다고도 하더군요. 아이폰이랑 비교를 많이 하던데.. 아이폰의 터치감하고는 많이 틀리더군요. 감압식이라.. 그래도 쓰다보면 툭툭 눌르는 재미가..? (...) 트윗도 할 수 있지만.. 나름 귀찮아서 잘 안하게 됩니다. 그냥 전화나 받고.. 문자나 쓰고.. 이동할 때 심심하지 않은 정도..네요.. 메일확인은 수월해서 좋긴합니다. 중요한건.. 저희집 디카보다 카메라 화질이 더 좋아요 (...)





만들긴 해야되는데.. 만들기 참 귀찮네요. 점점 한줄 블로그가 되어가는 느낌 (...)




마영뎐도 이제 재미없고, (...) 무슨 게임을 해도 재밌지도 않고.. 뭘 하면 좋을까.. 공부? (...)


2010/02 - 무..무려 17개나 있긔!

  1. (8)2010.02.27카테고리 추가했습니다.
  2. (6)2010.02.27css3으로 만들 수 있는 깔끔한 버튼스타일
  3. (6)2010.02.26허접한 CSS3 활용
  4. (8)2010.02.25Memory of nature
  5. (4)2010.02.25Singin` in the rain
  6. 2010.02.25Minilogue, Hitchhikers Choice
  7. (4)2010.02.22If You Think You Need Some Lovin, PomplamooseMusic
  8. (6)2010.02.20한국은 뭐 이렇게 안되는게 많아
  9. 2010.02.19Don`t wait too long, Madeleine Peyroux
  10. (10)2010.02.16세상엔 별년놈들이 다 있어
  11. (6)2010.02.14행보칸 설날되세요
  12. (5)2010.02.11Avatar
  13. (8)2010.02.10타이거JK 그리고 T
  14. 2010.02.09이젠 이브온라인까지 건드려 봅니다
  15. (8)2010.02.07얼마전에 산 노키아 5800
  16. (8)2010.02.04카테고리 버튼..
  17. (3)2010.02.02게임불감증..