SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

외계어..

흥미로운 경우는 value 매개변수가 함수의 참조일 때다. 이때는 확장 집합에 속한 엘리먼트마다 전달된 함수가 호출되며, 함수의 반환값이 어트리뷰트 값으로 사용된다. 이 함수가 호출되면 확장 집합 엘리먼트의 0부터 시작되는 인덱스가 매개변수로 전달된다. 이외에도 엘리먼트가 함수 호출에 대한 this 변수로 할당되기 때문에, 함수를 써서 해당 엘리먼트를 적절히 조작할 수 있다. 함수 매개변수의 힘은 여기에 있다. 다음과 같은 구문을 살펴보자.

$('*').attr('title', function(index) {
    return '나는 ' + index + '번 엘리먼트이고 내 이름은 ' + ( this.id ? this.id : 'unset') + '이다';
});

뭐, 뭐라고?

 

write less do more!

write less, do more.

 

html5 cheatsheet

HTML5 Cheat Sheet - Tags

HTML5 Cheat Sheet By InMotion Hosting - A Virtual Private Servers Provider

HTML5 Cheat Sheet - Event Handler Attributes

HTML5 Cheat Sheet By InMotion Hosting - A Web Hosting Provider

HTML5 Cheat Sheet - Browser Support

HTML5 Cheat Sheet By InMotion Hosting - A Dedicated Server Provider
 

Web Accessibility for Designers

Web Accessibility for Designers infographic with link to text version at WebAIM.org

alt="Web Accessibility for Designers infographic with text description below"

http://hyeonseok.com/soojung/accessibility/2011/10/02/674.html

 

오메.. vimeo couch 모드.

비에오 카우치 모드

오오미.. 플래시 아니다 html5다..

비메오 카우치 알아요?
(한국말 할줄 알아요?)

나온지 꽤 됐구만, 이제야 알아 버렸네..;; 24인치 full HD 전체화면하면 오오미~
http://www.vimeo.com/couchmode/hd/sort:newest/24718582

혹은 크롭앱스토어에서..

유사품 유튭 린백.. 통플래시라 구리구리함.. :(
http://www.youtube.com/leanback

 

petloves.me 에 놀러오세요!

펫러브즈미메인화면

펫러브즈미!

강아지 키우세요? 아니면 고양이? 포유류가 아니라면.. 뭐 거북이나 도마뱀 같은 파충류라든가.. 사실 뭐 개미나 풍뎅이 같은 곤충도 괜찮고.. 다리 여덟개 달린 거미.. 아니면 다리 하나 없는 달팽이 뭐 그런 동물도 괜찮아요. 일단 당신과 함께 살고 있다면.. :)

펫러브즈미 보셨어요? 펫러브즈미에 오셔서, 당신의 펫을 자랑하세요! 펫을 통해서 인연도 만들어 가시구요! 펫러브즈미는 유저스토리랩반려동물과 함께 하는 사람들을 위해 내놓은 따뜻한 소셜네트워크 서비스입니다. (음.. 과연 사람을 위한 서비스 인지 동물을 위한 서비스인지는.. 좀 더 지켜 봐야겠지만요. :p)

어느덧 오픈한지 한달... 휴가철에 휴가도 못 간채, 바쁜 이유이기도 하구요..;; 덕분에 이것 저것 투털거리며 만들다 보니, 나도 모르게 정들어 버렸나 봐요. 그 정이 무슨 정인지는 잘 모르겠지만.. 암튼 그 정 때문에(?), 나름 이것 저것 신경도 많이 쓰고 있습니다. :)

아무튼, 펫러브즈미는 이제, 제법 다양한 동물들이 함께 하고 있습니다. 개, 고양이 뿐 아니라, 햄스터, 기니피그, 고슴도치, 토끼, 조류 등등... 아 강아지나 고양이는 듣도 보도 못한 종들도 많고... 신기하고 재밌는 녀석들도 많아요! 아아.. 태희씨 품에 안겨본 스투벤도 부러워 해보고... (개.. 따위가 부러울 줄이야....) 모니터 타는 펜네스의 놀라운 기교에 놀라고... 마리와 아리를 보고서는 새들도 표정이 있다는 걸 느끼기도 하고 말예요.. :p 뭐 그렇습니다. 멀리서 구경하고 있으면, 그냥.. 뭐랄까... 재밌어요.. :)

네, 저는 동물을 끔찍히 좋아하지만, 사실 키우고 있지는 않아요. 아무래도 그렇겠죠? 불쌍한 제 한몸도 추스르기 버거운데, 동물까지 함께 하는 건 좀.. 무리잖아요?........; 네, 아무래도..... 그럼에도 불구하고 인기사진 페이지를 보고 있노라면, 키울수 없는 녀석들이지만, 한번쯤은 옆에 있으면 좋겠다는 생각이 들곤 해요.. 가끔은... 그러니까 지금처럼 무료하게 키보드를 두드리고 있을때 내 무릎 언저리에 턱을 괴고 누워서 앞발로 내 발가락을 잡으려 하고 있다거나..ㅋ 뭐 그랬으면 좋겠다구요. :p

뭐 여기에 광고해 봐야 뭐 딱히 소용은 없겠습니다만.. :p 펫러브즈미는 오픈을 맞아 몇가지 이벤트를 진행하고 있습니다. 1차 오픈부터 시작한, 반려동물 QRcard 만들기(절대 줄지 않을 것 같던 만장의 카드가 어느덧 절반을 향해 가고 있어요!), 8월 5일 부터 시작한 2011 온라인 도그쇼! 살다보니, 도그쇼가 뭔지 이제야 알게 되는군요.. 아무튼, 그 이름도 거창한 펫러브즈미 2011 온라인 도그쇼 이벤트엔 간단한 참여만으로도 드리는 경품이 많으니 꼭 한번쯤 둘러보세요! :)

그밖에 더 많은 소개는 여기(펫러브즈미뉴스)에서 보실 수 있어요. 그리고 앞으로도 변하거나 새로 더해질 기능도 아주 아주 많습니다! 유저스토리북처럼, 실시간으로 올라오는 이야기 피드도 만들어야 하고.. 종 별로 검색해서 찾아 볼수도 있게 할 거고.. 아이폰 앱도 준비해야 하고 말예요.. 기획팀에서 넘어올(?)온(?) 문서를 얼핏얼핏 보고 있는데.. 아무래도 올 여름 휴가도 바이바이.. :p

암튼.. 기대해 주시고, 많이 많이 놀러와 주세요! 저처럼 동물 안 키우시는 분들도! :D

 

deviantART Muro

 

세상에~!

사용자 삽입 이미지

2011.5.11 google doodle 2245x1319 마사 그레이엄

sprite animation....;;;;;;;;;;;

TAG
 

약 50% 정도...;;

아이폰모바일1아이폰모바일2

연습삼아 집에서 짬날때 마다, 복작이고 있습니다. 티스토리 모바일이 부러워서요..; 흙흙.. 네 아직은 대략 50% 정도에요.. :p

 

font-weight:700 과 800의 차이

font-weight 비교

유저스토리북 메인 - font-weigt 비교

왼쪽부터 순서대로, Firefox 4.0 beta, IE 9 beta, Chrome 순입니다. 화살표로 표시한 부분(사용자 닉네임)을 보시면 앞의 두 브라우저와 크롬이 font-weight 처리가 다른 것을 보실 수 있습니다. Chrome 에서 보이는 두께가 우리가 일반적으로 지금까지 알아 왔던 bold(두껍게) 표현입니다. 앞의 두 브라우저는 이보다 더 두껍게 표현되어 있구요..

CSS 에서, 위 닉네임 부분에 적용된 font-weight 값은 bold 가 아닌 800 입니다. 지금껏 (물론 제가 아는 한에서) font-weight:800 을 표현해주는 브라우저는 없었습니다. 그런데 FF 4.0과 IE 9 는 앞으로 이 차이를 표시하려나 봅니다. :)

css 명세서에는 각 숫자는 그 전 단계의 숫자보다 두껍거나 같게 대응되기만 하면 된다고 되어 있다. 따라서 100,200,300,400 전부가 약간 얇은 하나의 폰트 변형에 대응될 수 있고, 500과 600 모두 약간 두꺼운 하나의 폰트 변형에 대응될 수도 있으며, 700,800,900이 아주 두꺼운 하나의 폰트 변형을 나타낼 수도 있다. 자신 보다 작은 숫자의 폰트보다 두께가 더 두껍다면 전혀 문제가 없다. 공교롭게도 이 수자들은 특정 폰트 변형의 이름이나 폰트 웨이트의 값에 맞추어져 정의가 되어 있다. 400은 normal 과 동일하도록 정의되고, 700은 bold와 대응되도록 정의되어 있다.

위 내용은 "에릭 마이어(Eric Meyer)의 CSS 완벽 가이드 117p. 폰트웨이트의 원리" 에서 발췌한 내용입니다.

400이 normal 이니까 대개 800을 bold 로 생각하시는 분이 많은 것 같습니다. 저 역시 그랬던 적이 있었으니까요. 아 물론 이것이 잘못 되었다는 것이 아닙니다. 그동안 이 차이를 표현해주는 브라우저가 없었다는 거죠. 어짜피 700이든 800이든 화면에 보이는 글꼴의 두께는 같았으므로, 700을 적든 800을 적든, 별 문제 될 것도 없었어요. 그런데 이젠 800 900 으로 작성할 경우, 본래 의도치 않은 결과를 보이게 될지도 모르겠습니다. 혹은 포토샵으로는 표현하기 힘든 두께의 글꼴을 디자인적으로 사용할 수 있겠다는 의미도 되겠지요? :)

한가지 흥미로운 점은 윈도의 기본 한글 글꼴 굴림,돋움 따위의 특정 크기 이하에서 비트맵으로 표현되는 글꼴(EBDT 정보를 담고 있는 글꼴)에선 역시 아무런 변화가 없다는 겁니다. 위 캡쳐한 그림에서도 영문 글꼴인 Arial 만(영문 닉네임에만) 적용된 것을 보실 수 있습니다. 윈도에서 말하는 클리어타입(안티앨리어싱 처리된 글꼴모양)이 적용되는 글꼴에서만 유효한게 아닐까 싶어요.

나눔고딕, 맑은 고딕 따위의 글꼴에서는 어떻게 처리되는지 아직 확인해 보지 않았습니다만. 아마도 700과 800의 차이가 있겠죠? :)

시간이 나는 대로, 100~900 글꼴 표현에 대한 간단한 테스트를 해 보겠습니다. 뭐 아직 두 브라우저 모두 베타 상태이니... (사실은 더 아는것이 없어서..) 조금은 여유를 가져도 되겠지요. 그러니 오늘은 여기까지만... :)

(유저스토리북 메인은 현재 font-weight: 700 으로 모두 수정된 상태입니다. 그래서 지금은 변화를 보실 수 없어요. 사실 발견한지는 좀 되었거든요...)