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

팁 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

,
글 목록 번호 : 1 2 3 4 5 6 ··· 17
◀ 다음 글 목록 이전 글 목록 ▶

티스토리툴바