요즘 Wordpress 가 급 땡기긴 하지만 서버 운영이랑 디자인 새로 하는데 시간을 투자하기 힘들어서,
당분간 그냥 티스토리 쓰는 걸로...

웹폰트하면 나눔글꼴이지. 하지만 이제 좀 질린다고 해야 하나.
서핑하다 구글의 Noto 폰트를 발견했다. 한국어도 완벽한 것 같고.
Noto 는 구글이 개발한 오픈 소스 폰트 패밀리이다.
컴퓨터에서 표시 못하는 문자를 사작형(ㅁ)으로 표시하곤 하는데 구글이 이를 "두부"(tofu) 라고 부르며,
웹에서 이를 없애기 위해 만든 이름이 Noto(No Tofu) 이다.

1. woff 파일 다운로드

https://www.google.com/fonts/earlyaccess
Early Access 페이지에 방문하면 구글에서 제공하는 많은 웹 폰트들의 링크/소스가 있다.
그 중에서 맘에 드는 폰트를 다운받으면 되는데, 링크를 가져가는 것 보다는 링크 속의 파일을 직접 다운받아
본인의 사이트에 적용하는 것이 조금은 귀찮지만 속도면에서는 훨씬 나을 것이다.
Noto 의 한국어 버전의 이름은 Noto Sans KR (Korean) 이다.

위에서 처럼 링크가 있는데 링크를 다운받아 보면 폰트 파일의 위치를 알 수 있다.

위 주소에서 원하는 woff 파일들을 모두 다운받는다.

폰트 두께 별로 7가지 (thin, light, black, ...)가 있는데 otf 파일을 받으면 실제 글꼴을 확인할 수 있다.
난 그 중 2가지만 사용하려고 한다. regular, bold (한 개당 용량이 1MB 쯤 됨.)

2. woff 파일 업로드 / CSS 적용

우선 다운받은 파일들(woff, woff2)을 본인의 사이트나 블로그에 올린다.
티스토리에서는 관리자 - HTML/CSS 편집 - 파일올리기 에서 올리면 된다.
올리고 css 파일을 수정한다.

font-face 정의하고 페이지 전체나 적용을 원하는 곳에 font-family : 'Noto Sans KR' 만 적용하면 끝.

CSS 문서에는 '@'을 이용한 특정기능을 하는 rule 들이 있습니다.

@charset

@charset 은 스타일 시트의 문자 인코딩을 설정할 수 있도록 합니다.
스타일 시트 문서의 최상단에 와야 합니다.
브라우저가 결정하는 css 인코딩 결정 우선 순위로는,
HTTP Content-Type -> @charset -> <link charset=""> 그래도 없으면 utf-8 로 인식합니다.

@import

@import 는 다른 스타일 시트에서 스타일을 가져올 수  합니다.
CSS2.1 에서는 @charset 을 제외하고는 문서에서 가장 앞에 와야 합니다.
URI를 문자열로 지정하는 방법과 url() 안에 지정하는 방법이 있습니다.

Media types 별로 스타일을 가져오고 싶다면 URI 뒤에 콤마(,)로 나열하면 됩니다.

@media

스타일 시트에서는 각기 다른 Media 마다 문서를 어떻게 표현할지를 지정할 수 있습니다.
각기 다른 Media 란 모니터, 프린터, 음성출력, 점자출력, 핸드폰 등이 있겠네요.
화면이 큰 모니터에 비해 모바일에서는 글자도 좀 더 크게 해야 할 것이고, 화면 분할도 필요할 것입니다.
(Media type : all, braille, embossed, handheld, print, projection, screen, speech, tty, tv)

스타일 시트에서는 Media type을 세가지 방법으로 지정할 수 있습니다.

Http Method의 GET과 POST를 보던 중 Idempotent 라는 단어가 있어서 짚고 넘어가 봅니다.

사전적 의미로 Idempotent 는 멱등(?) 이라는 이해할 수 없는 전문 용어를 뜻합니다.
하지만 멱등연산, 멱등행렬, 멱등법칙 등에서 xx=x, x∩x=x, x∪x=x 등의 연산을 보니 이해가 됐습니다.

Http Method에서 Idempotent 란 용어는 이것을 구분하기 위해 넣은 속성입니다.
동일한 URL이 같은 결과물을 나타내는지(idempotent) 아닌지(non-idempotent).

GET : Idempotent
POST : non-Idempotent

우리가 브라우저(i.e, chrome...)로 보는 웹페이지(html)는,
웹페이지에 정의된 DOCTYPE과 그에 해당하는 웹브라우저의 해석기로 렌더링 되어 보여집니다.
예를 들면 html 문서에서 doctype 을 xhtml1.0 transitional로 정의했으면
브라우저에서도 xhtml1.0 transitional로 모든 markup을 렌더링하여 보여줍니다.
만약 doctype 을 정의하지 않는다면, 브라우저 마다 내장된 호환모드(quirks mode)로 웹페이지를 해석하고,
제각기 화면들을 출력할 것입니다. 이러길 원하는 분은 없겠죠?
그래서 어느 브라우저든 동일한 화면이 보여지도록 하기 위해 웹페이지에 doctype 을 정의하고,
그에 맞는 markup 형식을 사용하도록 w3c 는 권고하고 있습니다.
이것이 바로 웹표준, 크로스 브라우징의 시작입니다.

다음은 (X)HTML DOCTYPE 리스트 입니다.

HTML4.01, XHTML1.0, HTML5 는 HTML 의 버전이라고 생각하면 될 듯 합니다.
버전을 선택했다면 어떤 DTD를 사용할 것인지 정의하고 그에 맞는 markup 을 사용합니다.
DTD는 Strict, Transitional, Frameset(Transitional+Frameset) 이 있으며 Strict 를 권장합니다.
Transitional는 DTD와 다르게 사용된 markup을 어느 정도 지원해 주지만,
Strict의 렌더링 속도가 더 빠르기 때문에 요즘 대세인 모바일웹에서는 의미가 있습니다.
HTML5는 아직까지는 표준이 아니며,
현재 대부분의 웹브라우저에서 가장 잘 표현이 되는 doctype 은 XHTML 1.0 Strict 입니다.