따라쟁이

media query에 -webkit-min-device-pixel-ratio:0 요게 들어가 있으면 된다는데…

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .myClass { background-color: #FF0000; }
     #myId {color: #0000FF;}
     p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
}

각 브라우저별 지원 버전 확인해 봐야겠음.
참조: http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/

MockFlow를 간단히 써 봤습니다.

장점은 완성도 높은 에디터, 기본적으로 제공되는 다양한 컴포넌트, MockStore를 통해서 얻을 수 있는 다양한 템플릿들이라고 할 수 있을듯 합니다. 특히나, 개별 컴포넌트들의 속성 설정이 훌륭해 보이네요.

단점이라면, 지원되는 액션이 다른 페이지로의 링크 밖에 안된다는 점이 가장 아쉬운 점입니다. 목업툴이 평면적이고, 이해/확인하기 어려운 ppt 문서를 대체하도록 사용되었으면 하는데, MockFlow는 결과물 자체로 봤을때는 PowerPoint 보다 그리기 편한 툴 정도로 밖에 안보이네요. 그리고, 세부적인 description이나 note를 작성하기 위한 방법도 따로 없는거 같아 아쉽구요.

채팅 기능이나 협업 기능도 의미는 있겠지만, 이보다는 좀 더 동적인 목업이 가능한 툴이었으면 했는데 아쉽네요.

아. 참고로 Flash로 구현되어 있고 그래서인지 한글이 안되는 문제가 있네요.

Closure(닫힘)는 수학과 프로그래밍 언어에서 서로 다른 의미로 사용된다.

수학에서의 closure는 특정 집합의 원소들을 가지고 연산한 결과가 동일한 집합에 속하게 되면 해당 집합은 대상 연산에 대해 닫혀 있다라고 표현한다. 예를 들어 자연수 더하기 자연수는 항상 자연수가 되므로 자연수 집합은 더하기 연산에 닫혀있는 집합인 것이다. 하지만 자연수 빼기 자연수는 음수가 나올 수 있으므로 자연수 집합은 빼기 연산에 닫혀있지 않는 집합이다.

참고: Closure (mathematics)

프로그래밍 언어에서의 closure는 자유 변수를 가진 프로시저를 나타내는 기법이란 의미로 사용된다(컴퓨터 프로그램의 구조와 해석, p.127).

@font-face는 새로운 font-family를 생성하는 CSS rule로, 이를 이용하면 local이 아닌 remote server 상에 있는 폰트로 웹 페이지를 렌더링 할 수 있습니다. 원래는 Internet Explorer 4에서부터 독자적으로 지원했었던 기능이었지만, CSS 3에서 공식적으로 채택되어 현재 Firefox 3.5, Safari 3.1, Opera 10에서도 지원하고 있습니다. 다만 IE에서는 Embedded OpenType (EOT) 포맷만을 지원하고 있고, 최근에 지원하기 시작한 FF, Safari, Opera의 경우 TrueType과 OpenType만을 지원하고 있습니다.

Syntax

font-face를 정의하는 syntax는 다음과 같고,

@font-face {
    font-family: <a-font-name>;
    src: <source> [,<source>]*;
    [font-weight: <weight>];
    [font-style: <style>];
    [unicode-range: <U+nnn-nnn> [,<U+nnn-nnn>]*];
}

실제 사용은 다음과 같이 합니다. @font-face에서 명시한 font-family를 일반적인 폰트 이름처럼 사용하면 됩니다.

@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

새로 알게된 내용들

local hint : src descriptor에는 서버에 있는 폰트 url을 명시하는 url hint 외에도 local hint를 이용해서 로컬에 있는 폰트를 지정할 수 있습니다. 또한 소스를 하나 이상 명시할 수 있습니다. 이들을 사용하는 이유는, 해당 폰트가 설치되어 있으면 설치된 폰트를 사용하고 그렇지 않은 경우에만 다운로드 받도록 하기 위함입니다.

@font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue"),
         local("HelveticaNeue"),
         url(MgOpenModernaRegular.ttf);
}

format hint : 여러 가지 유형의 폰트를 지원할 수 있으므로 source의 포맷을 명시하는 format hint 키워드가 있습니다. CSS Fonts Module Level 3(W3C Working Draft 18 June 2009) 문서에서는 “truetype”, “opentype”, “truetype-aat”, “embedded-opentype”, “svg”를 예제로 들고 있는데, 실제 브라우저에 따라 지원의 차이가 있을 수 있고 또 다른 포맷이 생길수도 있습니다. 참고로 IE에서는 format hint를 인식하지 못하며 포함된 경우 이를 무시하게 됩니다.

@font-face {
    font-family: Gentium;
    src: url(Gentium.ttf) format("opentype");
}

Cross Browsed @font-face

IE의 경우 eot 파일을, 그 외 브라우저(위에서 언급한 것들)에서는 TrueType 및 OpenType만을 지원하므로 크로스 브라우징이 가능하게끔 코딩을 해야 합니다. 앞서 언급한 src descriptor의 format hint를 이용하여 다음과 같이 코딩할 수 있습니다. 다음 코드에서 어떤 @font-face를 먼저 코딩하는지가 중요합니다.

@font-face { /* for IE */
  font-family: Gentium;
  src: url('Gentium.eot');
}
 @font-face { /* for non-IE */
  font-family: Gentium;
  src: url('Gentium.ttf') format('opentype');
}

Ajaxian의 @font-face: How to embed it, and how it looks across browsers에서는 하나의 @font-face에 src descriptor를 두 번 선언해서 사용하고 있습니다. 이런식으로도 가능하다면 위 코드는 다음과 같이 변경할 수 있습니다.

@font-face {
  font-family: Gentium;
  src: url('Gentium.eot');
  src: url('Gentium.ttf') format('opentype');
}

Bulletproof @font-face syntax

Bulletproof @font-face syntax을 읽고 추가한 사항입니다.

위의 Cross Browsed @font-face 단락에서 제시한 방법 모두 겉으로 보기에는 크로스 브라우징에는 문제가 없으나, IE에서 조금 이상한 request가 발생하는 문제(?)가 있습니다. IE에서는 먼저 Gentium.eot 파일을 요청(HTTP request)하고 다음번 src에 대해서는 Gentium.ttf’)%20format(‘opentype 로 요청을 발생시킴니다. IE가 src를 파싱하는 구조때문인것으로 보이는데 이 경우 404 응답(response)이 올 것입니다.

다음 코드는 이러한 문제를 해결하기 위한 것으로 ttf를 요청할 때 반드시 local hint를 먼저 입력하는 방식입니다. 이 방식은 non-IE 브라우저에서는 로컬에 설치된 경우 이를 사용할 수 있다는 장점이 있으며, IE에서는 local hint 자체를 인식하지 못하므로 파싱 오류가 발생할 것이고 어떤 요청도 하지 않게 됩니다. 참고로 local hint가 2번 사용된 것은 OS X의 Safari에서는 전체 폰트 이름과 Postscript 이름이 틀린 경우 Postscript 이름만을 사용하기 때문에 이를 추가해 준 것입니다(두번째 local hint에 있는 이름).

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot);
  src: local('Graublau Web Regular'), local('Graublau Web'),
         url('GraublauWeb.otf') format('opentype');
}

@font-face{
  font-family:'Graublau Web';
  src: url('GraublauWeb.eot'); /* here you go, IE */
}
@font-face{
  font-family:'Graublau Web';
  src: url(//:) format ('no404'), url('GraublauWeb.otf') format('opentype'); /* tricky! */
}