짧은 여행 스킨의 레이아웃이 조금 어긋나는 듯 합니다

기타 2007. 2. 27. 18:19
이번에 티스토리에서 새로 나온 스킨 중 짧은 여행 스킨의 레이아웃이 몇몇 브라우저에서 어긋나게 표시됩니다.

윈도우 XP + 파이어폭스 2.0.0.2

윈도우 XP + 파이어폭스 2.0.0.2 에서는 이렇게.


윈도우 XP + 오페라 9.1

윈도우 XP + 오페라 9.1 에서도 비슷하게.


동그라미 친 부분이 아무래도 얼굴인지라 제일 확실히 드러나는 부분이죠.

인터넷 익스플로러에서는 잘 보이더군요.

이처럼 브라우저 마다 표현이 제각각이기 때문에 간격을 정확하게 맞춰야 하는 스킨은 저 역시 많이 부담스럽더군요. ㅠ.ㅜ

※ 위의 캡쳐는 스킨 미리보기 화면이지만 실제로 적용했을 때에도 이렇게 나왔습니다.


,

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

스킨/배포 2007. 2. 26. 19:02
스킨을 배포합니다.

Three Layers Black 1.1

Three Layers Black 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>




다운로드 받으러 가기

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

,

font-variant:small-caps와 first-letter

CSS 2007. 2. 22. 22:50
font 를 제어하는 속성은 정말 다양합니다. 그 중에 영문 폰트를 사용할 때 유용한 속성 중의 하나가 바로 small-caps 죠. 풀어쓰자면 small capital letters 정도 되겠죠. 즉, 소문자를 모두 대문자로 만드는 속성입니다. 단, 크기가 작은 대문자로 만들어주죠.

백문이 불여일견, 예를 들어보죠.


[1]

font-variant:small-caps를 이용해 아래와 같이 출력시키는 건 쉽죠.



이렇게 하면 됩니다.



(font-size는 그냥 큼직하게 보이려고 줬습니다.) 분명히 코드 상으로는 H만 대문자이고, 나머지는 소문자인데, 전부 대문자로 나오고, 소문자였던 영문자들은 대문자였던 영문자보다 작게 표현되지요. 고유명사나 약어 등을 표기하는 방식으로 주로 쓰입니다. 이처럼 font-variant:small-caps는 널리 알려진, 매우 유용하고 효과적인 속성이지요.


[2]

이걸 first-letter 라는 걸 사용해 똑같이 만들 수 있습니다.



어떻게 하면 될까요?



예, 이렇게 하면 됩니다. 가상 엘리먼트 (pseudo element)인 first-leftter 를 사용하여 small-caps와 비슷한 효과를 낼 수 있었습니다. first-letter라는 게 뭔지는 자세히 설명하지 않아도 알겠지요? 해당 영역의 첫번째 문자입니다.


[3]

그렇다면 이걸 응용해보죠. 보시다시피 출판물에 자주 쓰이는 레이아웃이군요.



자, 우리는 이러한 형식도 귀찮은 테이블 따위 없이, 문장의 첫 문자만 따로 영역을 설정할 필요 없이, 쉽게 할 수 표현할 수 있는 겁니다. 바로 first-letter 라는 가상 엘리먼트 (슈도 엘리먼트)를 사용해서 말이죠.



.pdiv 의 가로 크기 100px은 어떻게 보이는지를 표현하기 위해 설정한 것입니다. 그거 말고는 이해가 되죠? 문장의 첫 문자에 따로 효과를 줄 수 있는 것입니다. float:left; 같은 것까지 먹다니, 정말 편리하군요. 게다가 보시다시피 한글도 된다는 거~!

참고로 이 first-letter 에 적용되는 속성들은 background, border, clear, color, float, font, line-height, margin, padding, text-decoration, text-transform, text-shadow, vertical-align 가 있습니다.


더 깊게 나가면 머리 아파지니 일단 이 정도로 끝내도록 하죠. ^^ 매우 유용하게 사용될 수 있는 스타일이라 생각합니다.

,

[예고] Three Layers 1.1 (black)

스킨 2007. 2. 22. 09:30
사이드바가 두 개인 스킨들을 만들면서 느낀 건데, 이게 의외로 안정감이 있더라고요. 이제껏 복잡할 것 같아서 사이드바는 한 개로만 만들어왔는데 말이죠.

그래서, 한번 더 만들어 봤습니다. 이 스킨도 '심플!'을 강조하며 시작했건만 많이 심플한 것 같지는 않군요;;; 하지만, 제 스킨들이 다 그렇듯 좀 투박해 보이기도 하고, 어느 정도 튜닝이 가능한 (^^) 뭐 그런 측면으로 볼 때는 썩 나쁘지는 않은 듯 해요.

흰색 바탕에 검은 글씨라는 기본형을 벗어난 스킨은 많이 없는 게 사실이예요. 하지만, 특정 색깔을 강조하기도 애매하죠. 결국 사이트의 성격별로 특성에 맞는 색을 강조해야 할텐데 배포용 스킨에서는 그런 게 어렵기도 하고요.

어쨌든 배경 하나 달랑 깔고 (^^), 메뉴 아이콘 간단하게 만들어서 해봤습니다. 처음에 마진을 잘못 잡고 시작해서 수정을 조금 해야 할 것 같아요. 언제나 느끼지만 가독성이 좋은 페이지를 만든다는 건 참 어려운 것 같습니다. 스킨 잘 만드시는 분들 보면 정말 대단해요.

어쨌든 이 스킨 역시 조금 더 만져서 공개하려고 합니다. ^^
,

무비위크의 탈바꿈한 블로그 서비스 총정리

기타 2007. 2. 21. 16:59
확실히 웹2.0 시대의 3대 (블로그) 서비스 - 이른바 빅3는 티스토리, 네이버 블로그 시즌2, 싸이월드2로 확정된 모양이군요. 우리나라 사람들이 좋아하는 '3'이기도 하고, 각각 다음, 네이버, SK컴즈라는 대기업 계열이기도 하고 하니, 그리 보는 게 모양새가 좋은가 봅니다.

업계 속사정을 전혀 모르는 상태에서의 개인적인 의견입니다만 - 만약 이글루스가 SK컴즈에게 넘어가지 않았다면 여기에서 한 축을 차지할 수도 있지 않았을까 생각해 봅니다. SK컴즈에게 인수된 이후로는 조용하군요. 솔직히 예전에 이글루스가 가지고 있던 '물 좋은 블로그 서비스'란 타이틀이 요즘엔 티스토리에 슬쩍 넘어가지 않았나 생각도 해보고요.

설날에 고향에 내려가다 읽은 잡지에 블로그 서비스에 관한 기사가 나와서 사진을 찍어봤습니다. 지난 번에 이어 이번엔 무비위크로군요. 각각의 이미지를 클릭하면 읽을 수 있을 정도로 커집니다.

탈바꿈한 블로그 서비스 총정리 #1

아쿠아 스타일의 스크롤바는 예뻐보이지만 기사는 초반부터 삐그덕하는군요. 2006년 '올해'의 인물로 'you'를 선정한 건 뉴스위크가 아니라 타임지입니다.



탈바꿈한 블로그 서비스 총정리 #2

솔직히 네이버의 변신에 대한 표현은 거의 대부분 "레이아웃 (스킨)의 변경이 용이해졌다" 그 이상도 그 이하도 아닌 것 같아요. 만약 웹표준의 입장에서 이야기하면 고개 숙여야 하지 않을까요. 하긴, 그게 오늘날 우리나라의 인터넷 서비스를 선도하는 회사들의 수준이죠.


탈바꿈한 블로그 서비스 총정리 #3

티스토리가 두번째 주자입니다. 기사가 좀 아쉽군요. 솔직히 티스토리의 스킨은 CSS를 곁눈질로 배워 만족스럽게 수정할 수 있는 수준은 아니잖아요. 독립도메인에 대한 표현도 좀 아쉽고요. 하지만, 마지막 단락은 마음에 드는군요.예, 어떤 식으로든 나서야 합니다. :)


탈바꿈한 블로그 서비스 총정리 #4

싸이월드2 (일명 C2)도 나왔습니다. 솔직히 C2는 이 정도 분량으로 요약하기엔 너무 설명할 게 많죠. 복잡하기도 하고요. 게다가 중간에 "사용해 보진 않았지만" 이란 문구가 눈에 띕니다. 사용해 보지 않고 적는 기사라면 그냥 건너 뛰어도 될 듯 합니다.


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

티스토리툴바