글자가 너무 작아 잘 보이지 않으면 마우스 휠을 굴리세요.

팁 2007. 3. 21. 18:34
우리가 흔히 웹사이트의 본문에 사용하는 한글 폰트의 크기는 12px 입니다. 하지만, 폰트의 단위가 px (픽셀)만 있는 건 아니죠. pt (포인트)도 있습니다. 12px = 9pt 입니다. 폰트의 크기를 표현하는 단위는 이것들 말고도 더 있죠. 간단히 말해 이렇습니다.

12px = 9pt = 0.75em = 75%

16px = 12pt = 1em = 100%

이 중에 주목할 만한 단위는 em 입니다. 1em은 시스템 (즉, 브라우저) 기본 폰트의 가로 크기와 같은 값을 가지는 재밌는 단위이지요. 또한 위의 관계를 보다보면 알다시피 1em = 100% 입니다. 2em = 200% 겠죠.

이 em이 편리한 이유는 시스템의 폰트에 반응하는 단위이기 때문에 특정 웹페이지에 적힌 글자들을 크게 볼 수도 있고, 작게 볼 수도 있습니다. 지금 이 페이지만 해도 CTRL키를 누른 상태로 굴리는 마우스의 휠에 반응합니다. 해보세요. 글씨가 작아지기도 하고 커지기도 하는 걸 볼 수 있을 거예요. 만약 제가 레이아웃을 정하는 폭들에도 em을 사용했다면 레이아웃 각각의 요소들의 높이와 폭도 변했겠지요.

외국 사이트들을 서핑하다 보면 깨알 같은 크기로 쓰여진 페이지들이 있습니다. 영어권 독자인 경우엔 모르겠지만 비영어권 독자들에겐 곤욕이죠. 외국 사이트들 뿐만 아니라 한글로 쓰여진 페이지들 역시 마찬가지 일 때가 있습니다.

게다가 사실 저는 현재 많은 사이트에서 표준처럼 사용되는 한글 폰트의 크기를 작다고 여기는 사람 중의 하나입니다. 12px (9pt, 0.75em) 이죠. 특히 하드웨어 사양이 점점 좋아짐에 따라 모니터 해상도를 점점 높게 두고 웹서핑을 하게 되니, 시간이 조금 지나면 눈이 아프기도 합니다. 해상도가 높아지면 같은 픽셀 하나의 크기가 줄어들게 되는 거잖아요.

이 글은 외국 사이트에서 깨알 같이 쓰여진 글을 읽다가 문득 생각나서 적는 것입니다. 폰트의 크기가 px이나 pt로 적용된 페이지들은 아무리 CTRL키 + 휠 콤보를 시도해도 글자가 커지질 않아요. ㅠ.ㅠ 그럴 땐 정말 서글퍼지죠. 어디 하소연할 곳도 없고 말이죠.

결론은… '우리 모두 em을 사용하자' 입니다. :)



,

미니홈피의 좁은 문을 열다. (PC사랑)

기타 2007. 3. 17. 11:36
미니홈피의 좁은 문을 열다. #1

'홈'으로 새 단장한 싸이월드에서 PC사랑이 먼저 놀아본 이야기


미니홈피의 좁은 문을 열다. #2

여러 블로그 서비스의 백업 기능들


PC사랑 3월호에 실린 글입니다. 3월이 많이 지나긴 했지만, 현재 클로즈드 베타 서비스 중인 싸이월드의 새로운 서비스에 대해 궁금하신 분들을 위한 글이니 서점가면 보실 수 있을 듯 합니다.

바로 위의 페이지는 작은 박스 기사 부분이긴 하지만 네이버와 티스토리의 백업 기능의 차이 말이죠… 제가 적고도 좀 안스러운 생각이 들었습니다;;;
 
(옆에 보이지는 않지만 이글루스에 대해서는 적절치 못하게 표현한 부분이 있어요. 유료였다가 무료가 된 이글루스 플러스 서비스와 PDF 백업, 중지된 나만의 책 만들기 서비스 등에 대해 조금의 착각과 표현상의 오류가 뒤섞여버린 채 적어버렸습니다.)

p.s. 조만간 이 글의 요약본을 올릴 예정입니다.
,

스킨을 배포합니다. Three Layers White 1.1

스킨/배포 2007. 3. 7. 00:02
스킨을 배포합니다.

Three Layers White 1.1

Three Layers White 1.1 입니다.



스킨명

Three Layers White 1.1


개요

매우 단순한 형태의 스킨입니다. 지난 번에 발표한 Three Layers Black 1.1 의 흰색 버전입니다.


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

- 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
  예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
  폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

- 두 스킨의 표면적 차이는,
   미디어로그가 있느냐 없느냐의 차이입니다.
   아, 스킨 하단부에 태터툴즈 아이콘이 있느냐 티스토리 아이콘이 있느냐의 차이도 있군요.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  이론상으로는 컨텐츠의 폭을 수정하는 게 어렵지 않지만
  전체적인 레이아웃을 배경이미지 하나로 처리했기 때문에
  images 폴더 안의 bg.gif 를 수정해야 합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 인터넷 익스플로러 7.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.


간단하게 스킨 구조를 표시하면 다음과 같습니다



<div id="header"></div>
<div id="content"></div>
<div id="sidebar1" class="sidebar"></div>
<div id="sidebar2" class="sidebar"></div>
<div id="footer"></div>



※ Three Layers Black 1.1 과 차이점은 거의 없습니다. 심지어 skin.html 은 완전히 동일하며 style.css 의 색깔들을 수정하였고, 몇 가지 설정값들만 살짝 고쳤습니다. 아, 그러고 보니 이미지 파일도 수정했군요. ^^


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Three Layers White 1.1

,

모니터 밝기 체크

팁 2007. 3. 2. 11:39
많은 분들이 아시는 이미지죠. 어떤 근거에서 이렇게 만들어졌는지는 저도 모릅니다. 따라서, 정확하다고도 말할 수가 없어요. 하지만, 실제로 모니터의 밝기를 체크하는데 있어서 어느 정도 효과가 있는 듯 합니다.

모니터 밝기 테스트 #1

이 이미지를 보고 A 부터 Z 까지 전부 다른 밝기로 보이도록 모니터를 설정해야 한다고 하는군요.


모니터 밝기 테스트 #1

이 이미지는 LCD의 경우 보통 7~8 정도 까지 보인다고 하더군요.


역시 다들 아시겠지만 모니터의 명도나 채도 등을 제대로 체크하려면 사실 캘리브레이션 툴 같은 도구를 사용해야 하지요. 워낙 고가의 도구라 전문가들이 아니면 구입하기 어렵지만, 팬톤 (Pantone)의 휴이 (Huey)같은 저가형 캘리브레이션 툴 같은 경우 취미로 사진을 많이 찍거나 이미지 작업을 많이 하시는 분들은 구입하실 수 있는 가격입니다. 요즘엔 보통 9만 9천원 정도 하더군요.



이 제품에 대한 설명은 얼리어답터에 잘 되어 있습니다.

▶ 얼리어답터 - Monitor Color Correction HUEY by PANTONE

,

IE에서 임시로 액티브엑스와 팝업창 허용하기

팁 2007. 3. 1. 02:00
IE7 이 나왔지만 그네들의 여전한 독자적인 방식 (이라고 쓰고 IE 버그라고 읽습니다) 은 어딜 가지 않는군요. 정확한 레이아웃 표현을 위해 IE6 핵 (hack)에 이어 IE7 핵까지 써야 한다니… 정말 마이크로소프트가 무언가를 새로 내놓을 때마다 무섭습니다.

각설하고, IE7 이야기 하다가 떠오른 팁입니다. 이미 아시는 분은 다 아시고, 모르시는 분은 여전히 모르는 그런 팁이죠;;;

윈도우XP 서비스팩 2를 깐 이후의 IE6와 IE7에서는 액티브엑스와 팝업창이 기본적으로 차단되어 있습니다. 액티브엑스야 대부분의 경우 한번 깔면 되니까 된다고 쳐도, 팝업창은 매번 허용하기에는 찜찜하고 (대부분이 광고니까) 그렇다고 새로고침해서 다시 보려고 하면 프레임이나 스크립트의 사용으로 엉뚱한 곳으로 이동하게 되는 경우가 있어서 불편합니다.

일시적으로 액티브엑스나 팝업창을 허용하고 싶으면 해당 사이트로 갔을 때, 컨트롤키 (CTRL)를 누르고 있으면 됩니다. 액티브엑스나 팝업창을 허용하고 싶은 사이트로 갈 때 아예 컨트롤키를 누른 채로 클릭을 하면 편하겠죠. :)
,
글 목록 번호 : 1
◀ 다음 글 목록 이전 글 목록 ▶

티스토리툴바