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

아래소스는 웹폰트변경툴인 @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에러가 나서 손놓고있다가 태영님이 아파치세팅을 바꿔주셔서 기존 퍼머링크에서 새로운 퍼머링크로 리다이렉트도 완료했습니다.

그런데 이스크립트는 타임존을 처리하는부분에서 문제가 있기에 이부분을 수정하려다가 아예 jquery용으로 다시 만들어보았다.

짜집기코드이므로 퀄리티를 논하지 말자!

html, CSS

<style type="text/css">
.friendfeed {}
.friendfeed li {}
.friendfeed_icon {
	float: left;
	width: 16px;
}
.friendfeed_text {
	display: block;
	padding-left: 24px;
}
.friendfeed_text img {}
.friendfeed_date {
	display: block;
	margin: .5em 0;
}
</style>
...
<div id="friendfeed-badge"></div>

javascript

/* calculate our timeZone */
var d = new Date();
var offset = (d.getTimezoneOffset()/60);             

// Used internally, takes ISO timestamp, makes it pwetty
// http://ejohn.org/projects/javascript-pretty-date
function prettyDate(time){
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," "));

	date.setHours(date.getHours()-offset);
	diff = (((new Date()).getTime() - date.getTime()) / 1000);
	day_diff = Math.floor(diff / 86400);

	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) {
		return;
	}

	return day_diff === 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}
 
$(document).ready(function() {
	// Friendfeed User Settings
	var settings = {
		userName : 'gtgrf', // user name
		nam : 'gtgrf',
		itemsToShow : 10, // Number of items to retrieve
		imageSize : 70 // thumbnail size
	};

	$.getJSON('http://friendfeed.com/api/feed/user/' + settings.userName + '?num=' + settings.itemsToShow + '&callback=?',
		function(data) {
			$('#friendfeed-badge').append('<ul class="friendfeed"></ul>');
			var container = $('#friendfeed-badge ul');

		// loop for each friendfeed entry retrieved
		$.each(data.entries, function(i, entry) {
			if (entry.hidden !== true) {
				var svc = entry.service;

				var t = '';

				t += '<li>';
				t += '<a href="'+svc.profileUrl+'" title="View '+settings.nam+'\'s profile on '+svc.name+'" class="friendfeed_icon">';
				t += '<img src="'+svc.iconUrl+'" alt="'+svc.name+'">';
				t += '</a>';
				t += '<span class="friendfeed_text">';
				t += '<a href="'+entry.link+'" title="'+entry.title+'">';
				if (/flickr|tumblr|youtube/i.test(entry.service.id)) {
					if (entry.media.length > 0) {
					t += '<img width="'+settings.imageSize+'" src="'+entry.media[0].thumbnails[0].url+'" alt="'+entry.title+'" />';
					}
					else {
					t += entry.title;
					}
				}
				else {
					t += entry.title;
				}
				t += '</a>';
				t += '<span class="friendfeed_date">';
				t += prettyDate(entry.published);
				t += '</span>';
				t += '</span>';
				t += '</li>';

				// append content to container
				container.append(t);
			}
		});
	});
});

참조 스크립트

• Read Friendfeed Using jquery
• Friendfeedbadge
• Javascript Pretty Date

그런데 작업후반 호환성테스트를 하면서 opera, ie8 rc1에서 렌더링문제가 있는것을 발견했다.

오페라에선 .load()를 이용한 페이지로딩시 제대로 작동하지 않고, 대부분의 페이지에서 빈페이지로 렌더링이 되어버렸으며, ie8 rc1에선 margin이 적용이 안된것처럼 렌더링이 되는 경우가 발생했다. 이경우 마우스로 그부분을 드래그해서 선택해주면 제대로 렌더링이 되기는 한다.

현재 버그리포팅이되어있기는 하지만 뚜렷한 원인이 밝혀지지 않은듯하여 수정에는 조금 시간이 걸릴것으로 보이기때문에 당분간은 1.2.6버젼을 사용하는게 좋을것이다.

그런데 언제부터인가 과열로 인한 자동 잠자기때문에 사용이 불가능할 지경이 됐는데 초반에는 작업(WOW)을 심하게 할때만 그랬지만 요즘은 파일 권한체크만 해도 중간에 시퓨온도가 90°C를 넘어가며 잠자기로 들어가버린다.

그래서 지금 진행중인 작업이 끝나면 분해해서 팬청소라도 해줄까 하고 생각하고 있었는데 여기저기 글을 읽어보니 내가 사용중인 모델은 분해가 아주 까다로운데다가 분해해봤자 의외로 먼지가 없다는 반응이 대부분이었다.
인텔맥이라면 Fan Control 프로그램으로 과열을 어느정도 막을수 있지만 PPC기반은 System Management Controller (SMC)가 없기때문에 프로그램을 이용한 방법은 사용할수도 없다.
그러다 발견한 방법이 Fan Speed를 조절하는 kext파일을 수정하는 방법인데 과정은 상당히 간단했다.

/System/Library/Extensions/AppleFan.kext/Contents/Info.plist파일을 root계정으로 열어서 fan-hysteresis-temp와 fan-speed-table의 값을 원하는 온도(°C)의 값만큼 낮춰주면 된다. 이 값은 온도(°C)x256으로 되어있다.
예를들면 fan-hysteresis-temp (fan이 돌아가는 온도?)는 14080/256 즉 55°C이다.

이걸 수정하면 팬이 엄청 시끄러워질테고, 자칫하면 컴사망의 원인이 될수도 있기때문에 최후의 보루로 남겨둘 생각이다.

.pngbg { background-image: url(bg.png); }

* html .pngbg {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png", sizingMethod="crop");
}

이 방식은 지금까지 수도없이 사용했던 방식이었고 테스트서버에서도 아무런 문제가 없었는데 본서버로 데이터를 옮기자 ie6에서 png이미지가 아예 로딩되지 않는 문제가 발생했다.

1. 동일한 파일인데도 특정서버에서는 png이미지가 로딩되지 않는다.
2. filter를 지우고 저장한뒤 페이지를 리로드해보면 hack이 적용안된 이미지가 보인다.
3. 다시 filter를 주고 저장한뒤 페이지를 리로드하면 제대로 png hack이 적용이 된다.
4. 페이지를 이동한뒤 다시 확인해보면 이미지가 사라져있다.

아마 서버상의 캐쉬관련 세팅문제일거라고 추측은 되는데 확인할 재주가 없어 gif노가다로 처리할 수 밖에 없었다.

황금같은 주말이브를 말아먹어주신 ie6 ㄱㅅ

ps. png8을 이용한 크로스브라우저를 지원하는 투명png를 만드는 방법이 있긴하다. (링크수정)

그런데 새로운 기능이 다 좋은것만은 아니다.

크롬스타일의 새로운 탭바는 자리를 덜 차지하고 조금더 직관적인 인터페이스를 보여주지만 파일을 드래그해서 새탭을 만들수있는 방법이 없어져버렸다.
snapback버튼은 검색창에만 남아있고 주소창에선 사라져버렸으며 아직까지는 되돌릴수 있는 방법도 없다.
snapback버튼과 로딩바를 밀어내고 주소창안으로 이동한 reload,stop,loading 겸용 버튼은 눈에 띄지않는다. 페이지로딩이 빨라졌다는걸 강조하고싶은 마음은 이해하지만 기존의 로딩바가 훨씬 직관적이고 눈에 잘 띈다.

이런점들과 도저히 타협할 수 없는 사람들을 위해 새로운 기능들을 제거하는 방법이 올라왔다. 그중에 위에 말한 내용을 되돌리는 방법은 다음과 같다.

탭바를 원래위치로 되돌리기

$ defaults write com.apple.Safari DebugSafari4TabBarIsOnTop -bool NO

주소창 원래대로 되돌리기 (snapback은 되돌릴수 없다)

$ defaults write com.apple.Safari DebugSafari4IncludeToolbarRedesign -bool NO
$ defaults write com.apple.Safari DebugSafari4LoadProgressStyle -bool NO