월급날입니다.
대출, 전기세, 카드값 이것저것 때고나니 남는게 없군요.
2008년 7월 22일 화요일
저의 첫 페이지는 '다음'입니다.
구글 또는 about:blank를 즐겨 사용하다가 요 며칠 전 이슈를 보고서 첫 페이지를 다음으로 바꿨습니다.
처음에는 불편하다가 지금은 꽤 쓸만하더군요. -_-;;;;; 그래도 blank가 더 좋기는 합니다. 쩝~
그러나, 가끔 이 분들을 보기 위해서 네이버는 갑니다. ^^
 |  |
2008년 7월 21일 월요일
jQuery와 다른 라이브러리를 함께 사용하기
시작하는 글
jQuery는 다른 라이브러리와 함께 사용할 수 있도록 만들어졌는데요. jQuery라이브러리와 플러그인들은 jQuery(namespace) 안에 포함되도록 제한되어 있습니다. jQuery의 일반적인 규칙으로 "global"한 객체들은 모두 jQuery(namespace) 안에 정의되어지기 때문에 Prototype이나 MooTools 또는 YUI와 충돌에 관해서 걱정할 필요가 없습니다.
그러나, 단 하나의 예외가 있는데요. jQuery 라이브러리에서 jQuery(namespace)의 shortcut으로 사용되는 $입니다.
$ 함수 재정의하기
그러나, 이러한 $에 대해 충돌이 발생하더라도 jQuery.noConflict()를 호출함으로서 해결할 수 있습니다. (jQuery.noConflict()를 호출하기 위해서는 jQuery 라이브러리가 선언된 뒤여야만 합니다.)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...), $가 아닌 jQuery를 사용
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConfict()를 호출하게되면 _$(jquery.js 파일이 로딩될 때 기존에 선언되었던 $의 내용을 _$에 저장)의 내용들을 복원하게 됩니다. $를 호출하게 되면 위에서 선언하였던 prototype의 $가 호출이 되지만 jQuery는 페이지의 다른 곳에서 계속 사용할 수 있게 됩니다.
이 외에도 다른 해결책도 있습니다. 다른 라이브러리와 충돌이 나지 않는 shortcut을 선언하는 것입니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...), $가 아닌 $j를 사용
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConflict()에서 리턴되는 값은 jQuery입니다. 여기에 $j가 jQuery를 참조하도록 하는 코드구요. 당연히 $j 외에도 여러 다른 기호들을 alias로 사용할 수 있습니다.
jQuery 코드
jQuery 시작 부분을 보게 되면 jQuery에서 사용되는 jQuery와 $ namespace에 대해서 따로 저장을 하게 되구요.
// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
noConflict 함수가 호출되는 경우 이를 복원하는 형태를 취하고 있습니다.
jQuery.extend({
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
참고자료
2008년 7월 20일 일요일
WYSIWYG.CSS - 티스토리 2008 베타
티스토리 2008 베타에서는 wysiwyg.css 스펙을 추가하였는데요. 스킨을 작성할 때 wysiwyg.css를 따로 정의하면 글쓰기 페이지를 로딩할 때 wysiwyg.css를 읽어와서 글쓰기 페이지에 적용하게 됩니다.
지금까지는 Butterfly 스킨, IsBase 스킨, Moving Box 스킨, Pure 스킨, ViewFinder 스킨에 적용이 되었습니다. 아래는 적용한 예이구요.
스킨을 잘 구조화시키고 분리하였다는 생각이 드네요. 에디터의 header를 보면 wysiwyg.css 파일을 link 태그로 뿌려주는 것을 볼 수 있습니다.
티스토리 2008 베타 오픈 리뷰 (6) - 각주와 양쪽정렬
각주
최근에 보았던 Gatorlog 님의 "도움을 구합니다: commentpress에서 footnote 문제"글에 Zonathan Zittrain 교수가 쓴 The Future of the Internet and How to stop it 소개가 나옵니다. 여기에서 각주를 사용하고 있는데요.
- 각주를 저장할 페이지를 따로 생성합니다. 각각의 각주의 타이틀에는 <a name="note-1">타이틀<a>와 같이 선언해줍니다.
- 스킨(?) 페이지에 팝업창을 띄우기 위한 자바스크립트 코드를 추가합니다.
- 각주를 삽입할 위치에 각주로 이동하기위한 코드를 추가합니다.
책에서의 각주처럼 각주를 책의 마지막(다른 페이지)에 옮긴 후 링크만 남겨놓은 형태가 됩니다.
티스토리의 2008 베타에서 제공되는 각주는 위의 형태와는 좀 다른 방법을 취하고 있습니다. 먼저 사용방법은 다음과 같습니다.
입력부분은 각주 이미지와 함께 쉽게 입력할 수 있게 되어있지만 아쉽게도 Textarea로 구현되어 있어서 위지윅 스타일의 HTML 코드로 각주를 삽입할 수는 없습니다. 또한, HTML코드를 직접 삽입하여도 화면 출력시에 모두 제거되는 단점이 있습니다.
각주(footnote)는
논문 따위의 글을 쓸 때, 본문의 어떤 부분의 뜻을 보충하거나 풀이한 글을 본문의 아래 쪽에 따로 단 것 [footnote]다음 국어사전 (http://krdic.daum.net/dickr/small_search_word.do?q=%B0%A2%C1%D6)[/footnote]
이라고 합니다. 논문을 살펴보면 뜻을 보충, 풀이하는 글 옆에 다른 논문 출처가 포함되어서 나오게 되는데요. 마찬가지로 웹에서 각주를 추가한다면 링크 추가는 불가피하다고 생각됩니다. 스타일은 빠지더라도 링크 부분은 삽입될 수 있게 해주면 아주 좋을거라고 생각되네요.
양쪽정렬
티스토리 2008 베타에 양쪽정렬 기능도 추가되었습니다.
바로 아래 단락은 좌측정렬이구요.
무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.
바로 아래 단락은 양쪽정렬입니다.
무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.
좌측정렬은 style의 text-align 속성에 left를 주었고 양쪽정렬은 justify를 준 것인데요. 양쪽정렬이 필요한 지는 잘 모르겠습니다. -_-;;;
※ 각주 부분에 테스트로 삽입된 내용은 Zonathan Zittrain 교수가 쓴 The Future of the Internet and How to stop it의 글입니다.
관련 링크들
- Gatorlog님의 도움을 구합니다: commentpress에서 footnote 문제
- Zonathan Zittrain 교수의 The Future of the Internet and How to stop it
티스토리 2008 베타 오픈 리뷰 (5) - 서식
티스토리의 2008 베타에서 개선된 부분 중 서식도 빼놓을 수 없습니다. (점점 리뷰보다는 미션 지향적으로 변하고 있군요 쿨헉~;;) 서식은 글쓰기 페이지에서 상단의 글 종류에서 서식으로 저장하면 저장이 됩니다.
저장된 서식은 글쓰기 페이지의 우측 서식 항목에서 나오게 되는데요. 서식을 클릭하면 저장했던 양식이 글 본문에 삽입이 됩니다. 구분선 아래 쪽이 서식 포멧을 적용한 예입니다.
시작하는 글
jQuery는 다른 라이브러리와 함께 사용할 수 있도록 만들어졌는데요. jQuery라이브러리와 플러그인들은 jQuery(namespace)안에 포함되도록 제한되어 있습니다. jQuery의 일반적인 규칙으로 "global"한 객체들은 모두jQuery(namespace) 안에 정의되어지기 때문에 Prototype이나 MooTools 또는 YUI와 충돌에 관해서걱정할 필요가 없습니다.
그러나, 단 하나의 예외가 있는데요. jQuery 라이브러리에서 jQuery(namespace)의 shortcut으로 사용되는 $입니다.
$ 함수 재정의하기
그러나, 이러한 $에 대해 충돌이 발생하더라도 jQuery.noConflict()를 호출함으로서 해결할 수 있습니다. (jQuery.noConflict()를 호출하기 위해서는 jQuery 라이브러리가 선언된 뒤여야만 합니다.)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...), $가 아닌 jQuery를 사용
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConfict()를 호출하게되면 _$(jquery.js 파일이 로딩될 때 기존에 선언되었던 $의 내용을 _$에 저장)의 내용들을 복원하게 됩니다. $를 호출하게 되면 위에서 선언하였던 prototype의 $가 호출이 되지만 jQuery는 페이지의 다른 곳에서 계속 사용할 수 있게 됩니다.
이 외에도 다른 해결책도 있습니다. 다른 라이브러리와 충돌이 나지 않는 shortcut을 선언하는 것입니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...), $가 아닌 $j를 사용
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConflict()에서 리턴되는 값은 jQuery입니다. 여기에 $j가 jQuery를 참조하도록 하는 코드구요. 당연히 $j 외에도 여러 다른 기호들을 alias로 사용할 수 있습니다.
참고자료
서식을 작성할 때는 공개설정이 모두 사라지며, 글목록에서 서식목록을 공개로 클릭하는 경우에도 상태를 변경할 수 없다는 말이 나옵니다.
그러나, 베타페이지에서 나온
※ 베타 기간 동안 제작해주신 서식은 이후 정식 오픈 때에 여러분들의 이름으로 서식이 제공될 예정입니다.
를 보면 조만간 서식을 공개, 공유하는 부분이 추가되지 않을까 생각됩니다. N사의 레이아웃기능을 뛰어넘는 티스토리만의 기능이 되기를 기대해봅니다.
※ 허접이기는 하지만, 디자이너가 아닌 개발자로서 무려 4시간의 시간을 투자해가며 만들었답니다. 쿨헉~
서식에 사용된 글
2008년 7월 18일 금요일
서울한강체와 서울남산체 100% 무료는 아니군요.
오늘 현석님의 공개 한글 서체 포스트를 보다가 문득, 서울한강체와 서울남산체의 Embedding과 관련된 부분이 궁금해서 찾아봤습니다. Preview & Print embedding allowed라고 되어 있더군요.
폰트에는 폰트사용에 관한 라이센스와 폰트 삽입(Embedding)과 관련된 라이센스(?) 두 가지로 나뉩니다.
폰트 삽입과 관련된 항목은 총 4가지로 구성이 되는데요.
- Installable embedding allowed: 배포하는 문서에 폰트를 함께 넣어서 배포를 할 수 있고 원격 시스템(remote sysmte)에 영구히 설치를 할 수 있습니다.
- Editable embedding allowed: 배포하는 문서에 폰트를 함께 넣어서 배포를 할 수 있지만, 원격 시스템에는 임시적으로만 설치할 수 있습니다.
- Print & Preview embedding allowed: 배포하는 문서에 폰트를 함께 넣어서 배포를 할 수 있습니다. 그러나, 원격 시스템에 임시적으로만 설치할 수 있으며, 읽기-전용으로만 사용할 수 있습니다.
- Restricted liscence embedding: 문서에 폰트를 포함시켜서 배포할 수 없습니다.
아직 웹에서 ttf파일을 웹폰트처럼 사용할 수 없기 때문에, 문제가 되는 부분은 pdf파일이나 doc 파일같은 오피스 문서에만 해당되기는 합니다. 그러나, 무료로 배포하지만 문서에 포함시켜서 배포하는 부분에 제약을 둔 것은 좀 아쉬운 부분이네요.
서울시에서 배포하는 문서(예를 들어 doc파일)에 서울한강체와 서울남산체를 포함하여서 수정가능하게 배포하면, 라이센스에 위배가 되겠죠.
관련글:
2008/07/16 - [잡학사전/etc] - 서울한강체와 서울남산체
2007/01/15 - [잡학사전/etc] - 폰트 속성을 쉽게 찾아볼 수 있게해주는, Font properties extension
피드 구독하기:
글 (Atom)