기본 스타일은 photoshop CS6에 맞춰져 있으며 Retina는 지원하지 않습니다.

Download Retro Photoshop Icon for osX

1. XCode Command line tools 설치

   https://developer.apple.com/downloads/index.action

2. XQuartz 설치

   http://xquartz.macosforge.org/landing/

3. Homebrew 설치 (터미널 명령)

   ruby <(curl -fsSk https://raw.github.com/mxcl/homebrew/go)

4. Fontforge 설치 (터미널 명령)

   brew install fontforge

5. Symbolic Link 만들기 (터미널 명령)

   brew linkapps

   ~/application에 FontForge symbolic link를 생성한다.

via (Installing Fontforge in Mountain Lion)

http://stackoverflow.com/questions/4970045/android-webviews-window-innerwidth-is-coming-313

자 이젠 브라우저랑 폰트사이즈 다른 이유만 찾으면 되는데…

Camera+앱에 사용된 서체 Type Together의 Bree™

원문: So You Want to be a Designer: Top 5 List by Aza Raskin

브라우저 호환성과 폰트변환 오류때문에 수정된 글입니다.

아래소스는 웹폰트변경툴인 @font-face Generator로 만들어진 소스기준으로 설명드립니다.

일단 웹폰트는 css에 다음과 같이 지정해준다.

@font-face {
	font-family: 'NanumGothicRegular';
	src: url('nanumgothic.eot');
	src: local("☺"),
		url('nanumgothic.woff') format('woff'),
		url('nanumgothic.ttf') format('truetype'),
		url('nanumgothic.svg#webfonturzspG4F') format('svg');
}

@font-face {
	font-family: 'NanumGothicBold';
	src: url('nanumgothicbold.eot');
	src: local("☺"),
		url('nanumgothicbold.woff') format('woff'),
		url('nanumgothicbold.ttf') format('truetype'),
		url('nanumgothicbold.svg#webfontqaHEB3q2') format('svg');
}

이제 이 폰트를 사용하고 싶은 부분에 font-family를 지정해준다

body {
	font-family: "NanumGothicRegular", 대체폰트, sans-serif;
}
strong {
	font-family: "NanumGothicBold", 대체폰트, sans-serif;
}

위와 같이 하면 본문은 나눔고딕으로, strong태그는 나눔고딕 Bold로 나오게된다.

유의할점

• Bold체를 위해서 font-family에 NanumGothic Bold를 따로 선언하지않고 같은이름에 font-weight로만 지정해준다 font-weight나 font-style로 표현할 경우 ie와의 호환성 문제가 생긴다고 합니다.
• 로컬폰트를 사용할 수 있게 src: local('폰트이름'), local('postscript이름')에 맞춰 지정하게 되어있지만 맥에서 한글같은 2바이트 폰트이름의 문제때문에 ☺같은 특수문자로 대체합니다.
• svg폰트의 #xxx부분은 svg폰트로 변환시에 지정되는 id입니다.

css와 font 다운로드 (용량문제와 재변환시간문제로 삭제합니다.)

@font-face Generator에서 폰트업로드후 expert옵션의 subsetting에서 어떤 캐릭터셋인지, 어떤 캐릭터를 포함할건지를 선택후 변환하시면 됩니다.

자신의 서버가 폰트파일을 허용하지 않을때에는 css option에서 base64인코딩을 선택하시면 됩니다.

style linking을 체크하시면 유의사항1에서 말씀드린 문제를 겪게 됩니다.

서핑하다 발견한 마음에 드는 일본어 폰트. – 그림의 내용에 신경쓰진 말자;
타이포그래피 자체는 산만해서 맘에 들지 않지만 폰트만은 너무 마음에 든다.

#cursorTest {
   cursor: url(example.png), url(example.cur), pointer;
}

• 첫번째 값을 인식하지 못하면 다음값을 적용하는 방식이다.
• 브라우저 호환성을 위해 마지막은 url이 아닌 cursor를 지정해줘야 한다.
• IE는 .cur파일을 사용해야한다.
• IE는 상대경로로 할때 css기준이 아닌 도큐먼트 기준으로 정해줘야한다.
• Windows의 브라우저는 32×32이하의 사이즈를 사용해야한다.
• opera(현재10기준)는 지원하지 않는다

참고 URL

• http://www.quirksmode.org/css/cursor.html
• http://www.w3.org/TR/CSS2/ui.html#propdef-cursor
• http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/

Variable height liquid float galleries with JQuery and Prototype

구글 이미지검색결과의 경우도 이와 비슷한 효과이긴 한데 테이블로 되어있어서 윈도우 사이즈가 변하면 서로 다른 tr로 td가 이동하게 되어있다.

얼핏 애플고딕같은 느낌이라 맥을쓸때는 전혀 눈치채지 못했다.

나같으면 플래쉬로 처리해버리고 싶은 유혹을 뿌리치지 못했을듯.

소스를 보면서 html5의 간단한 doctype을 보고 있자니 xhtml의 doctype을 외워서 사용하는 사람의 퍼센트가 얼마나 될지 궁금해졌다. 누가 이렇게 복잡하게 만들어 놓은거야?

wordpress 2.3이후로 Canonical URLs 기능이 추가되서 여러가지 퍼머링크로 접속해도 자동으로 기본 퍼머링크로 리다이렉트시켜주는데 이전에 사용하던 퍼머링크에서 날짜를 빼버린탓인지 계속 404에러가 나서 손놓고있다가 태영님이 아파치세팅을 바꿔주셔서 기존 퍼머링크에서 새로운 퍼머링크로 리다이렉트도 완료했습니다.