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 가 있습니다.


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

,

브라우저별 표시 방법 - container 안의 div들에 float:left 했을 때

CSS 2007. 2. 13. 20:42
지난 번에 태터툴즈의 2단형 스킨의 구조에 대해 알아 본 적이 있습니다. 이번에는 그와 연관해서 하지만 조금 다른 이야기를 해보려 합니다.

기본 형태

html과 css를 이용해서 이런 형태를 만들었죠.


지난 번에 적은 내용에서는 스킨의 마지막 부분에 footer 영역이 있었습니다. 대체로 footer 영역에 clear:both 속성을 넣어주어 디자인되어 있는 스킨이 대부분입니다.

그런데, 만약 header나 footer 영역이 없이 content 영역과 sidebar 영역들만 존재한다고 가정해 보죠. 충분히 그럴 수 있잖아요. 꼭 header와 footer를 적어줘야만 하는 건 아니니까요. 이런 식으로 말이죠.

<div id="container">
   <div id="content"></div>
   <div id="sidebar1"></div>
   <div id="sidebar2"></div>
</div>

<style>
#container { }
#content   { float:left;}
#sidebar1  { float:left;}
#sidebar2  { float:left;}
</style>

이럴 경우 즉, content 영역과 sidebar 영역(들)이 여전히 float:left; 로 지정되는 경우 container 영역과의 위치관계는 어떻게 될까요? float을 사용하면 위에 (가상적으로^^) 뜬다고 했잖아요. 그럼 container는 float을 사용한 div들을 포함할까요? 아니면 포함하지 않을까요? 그래서 질문을 하는 겁니다. 어떻게 될까요?

한 마디로 말하자면 브라우저마다 그 형태가 다릅니다.

간단하게 말하면 인터넷 익스플로러와 오페라 등의 경우는 float:left; 되어도 container가 내부에서 float된 div들을 감싸주게 됩니다. 반면 파이어폭스, 사파리, 컨커러 (Konquerer) 등은 container가 내부에서 float된 div들을 감싸지 않게 됩니다.

백문이 불여일견. 이와 같습니다.

IE7

IE7 (윈도우 XP) (IE6도 같은 모습입니다.)


오페라

오페라 9.10 (우분투)


파이어폭스

파이어폭스 (윈도우 XP)


사파리

사파리 2.0 (OSX)


컨커러

컨커러 (Konqueror) 3.5.5 (데비안)


대부분의 경우 이런 차이가 있어도 크게 문제가 되지는 않습니다. 대체로 아래에 footer 영역을 사용할 때는 clear:both; 등으로 새롭게 시작하니 말이죠. 하지만 이런 차이는 분명히 다른 차이를 만들 수도 있습니다. 그건 다음에 알아보도록 하죠. ^^


참고

사파리와 컨커러는 KHTML 엔진을 사용합니다.
파이어폭스는 게코 (Gecko) 엔진을 사용하죠.
오페라는 오페라 엔진이고요.
인터넷 익스플로러 역시 자체 엔진을 사용합니다.


p.s. 언뜻 보니 몇몇 영역의 가로폭이 슬쩍 다른 것 같군요. 분명 같은 코드인데 말이죠. 이것 역시 다음에 설명하겠습니다. ^^
,

[질문] div에서 float 시켰을 때 IE에서 문제가 생깁니다.

CSS 2007. 2. 11. 11:31
이번에 Formal Boxes 1.1을 작업하다가 생긴 문제입니다. (사실은 그 이전에 Letter To You 1.1을 작업할 때도 같은 문제가 있었지요.)

왜 그 거창한 이유 있잖아요 - 시맨틱 & 디자인 뭐 그런 것들도 그런 거지만 단지 관리를 편하게 하기 위해 (^^) 본문 컨텐츠 영역과 사이드바를 div로 구성하고 css에 float:left; 해서 띄웠는데 유독 IE에서만 이상하게 보이는 에러가 생긴 겁니다.

IE에서 이상하게 보입니다.

IE에서 이상하게 보입니다.


어제 : 3 부분이 아래에 다시 반복되는 거 보이시죠? float:left 로 순서대로 붙여놓은 div들 중에서 제일 오른쪽에 붙인 div 의 마지막 문자열이 저런 식으로 넘치는 겁니다. 제가 특별히 뭘 잘 못 쓴 태그가 있나 싶어서 여러가지 테스트를 해봤는데 찾을 수 없었습니다.

아, 그리고 제가 확인한 바로는 IE에서만 저렇게 보이고요. 파이어폭스와 오페라에서는 저런 현상이 없었습니다.

혹시 비슷한 경험을 하신 분들 계시나요? 저게 해결되어야 앞으로도 좀 마음 편하게, 찜찜하지 않은 마음으로 작업을 할텐데 참 답답합니다;;;


추가

원인을 알았습니다. duplicate text bug 때문이라고 하는군요. 이 글을 읽어보세요.


,

드래그 할 때 선택되는 영역의 색깔 바꾸기 (CSS3)

CSS 2007. 2. 9. 00:39
보통 브라우저 상의 문서를 드래그해서 영역을 지정할 경우 회색 바탕으로 표시가 됩니다. 다음처럼 말이죠.

selection block #1

드래그해서 영역을 지정하는 일반적인 경우


그런데, 이 색상도 변경시킬 수 있습니다. CSS3 에 이 정의가 들어있다고 하는군요. 단, 아직 CSS3가 확정된 게 아니라고 하죠? 성질 급한(^^) 사파리와 파이어폭스가 우선적으로 이를 지원한다고 합니다. 스타일시트에 아래와 같이 적으면 이렇게 바뀝니다.

::selection { background:#b9fffe; color:#00388b; }
::-moz-selection { background:#b9fffe; color:#00388b; }

selection block #2

스타일시트에 정의한 후 드래그해서 영역을 지정하는 경우


::selection은 사파리를 위한 거고, ::-moz-selection은 파이어폭스를 위한 것입니다. IE에서는 아무런 변화가 없지요. 참, background와 color만 지원된다고 합니다.

표준으로 정해져서 많은 브라우저가 이 표준을 지키면 좋겠네요. 예쁘잖아요. :)
,

그림으로 알아보는 태터툴즈의 기본형 (2단형) 스킨의 구조 잡기

CSS 2007. 2. 5. 21:16
태터툴즈의 스킨을 제작하는데 아주 유용한 도움을 주는 레퍼런스가 있습니다. 바로  태터툴즈 스킨제작 레퍼런스 입니다. 총 5단계로 잘 설명이 되어 있죠. 이 레퍼런스를 보면서 제가 생각했던 걸 천천히 적어 볼 생각입니다. 초보자의 마음으로. :)

태터툴즈 뿐만 아니라 여러 블로그툴에서 가장 쉽게 볼 수 있는 구조는 바로 중앙의 본문과 그 옆에 각종 정보가 표현되는 형태가 아닐까 합니다. 메인 컨텐츠도 읽을 수 있고 사이트의 현황도 바로 파악할 수 있는 구조라서 그러겠지요. 그리고 위에는 블로그 정보, 아래에는 저작권 등의 정보가 포함되겠죠.
태터툴즈 기본형 스킨의 구조

출처는 태터툴즈 스킨제작 레퍼런스 step02

레퍼런스에서도 바로 이런 구조를 기본으로 삼고 있습니다.

자, 그럼 skin.html에 들어갈 코드를 간단하게 적어보겠습니다.

skin.html

<div id="container">
    <div id="header">
        <!--
            각종 헤더에 들어갈 내용들. 예를 들면 블로그 제목, 메뉴 등이 있겠지요.
        -->
    </div>
    <div id="content">
        <!--
            실제 내용이 들어갑니다. 기본 포스트들 이외에도 위치로그, 태그, 방명록 등
            본문 영역에 표현 될 여러 내용이 모두 이 안에 포함되지요.
        -->
   </div>
   <div id="sidebar">
       <!--
           사이드바 내용이 들어갑니다. 블로그 설명, 최근글, 댓글, 트랙백, 카운터 등
            각종 추가 정보들이 들어갑니다. 위 그림에서는 sideinfo 라는 영역이겠죠.
       -->
   </div>
   <div id="footer">
       <!--
           저작권 표시라든지 사이트 정보 등을 위한 영역이겠죠.
           기본 스킨에는 이곳에 블로그 메뉴가 한 번 더 반복되고 있습니다.
       -->
   </div>
</div>

대부분의 스킨이 저 구조를 따르고 있습니다. 제 스킨들도 대부분 그렇죠. 그럼 이렇게 적어주면 위의 그림처럼, 기본형의 형태로 표현이 될까요? 아닙니다. 이런 식으로 표현이 되지요.

영역별 색깔 구분

아니, 위와 다르잖아-!

(실제로는 각 영역을 구분하는 선도 없고, div 끼리 저렇게 공간도 없고 딱 붙어있지요. 이 그림들은 이해를 돕는 방법으로 표현된 것입니다.) div 태그에 스타일 정의가 하나도 되어 있지 않기 때문입니다. div란 division marker 즉, 영역을 구별하는 태그인데, 쉽게 설명하자면 div는 기본적으로 영역을 위, 아래로만 구분하거든요.div의 가로 영역은 화면의 왼쪽 끝에서 오른쪽 끝까지 입니다.

그럼 우리가 원하는 레퍼런스에 나오는 스타일을 만들어주기 위해 스타일시트를 만들어야 합니다. 기본 스킨이 style.css 를 이용하니 거기에 정의를 해주면 되겠지요. 꼭 필요한 것만 적어보도록 하겠습니다.

style.css

#container {
       margin:0px auto;
       width:800px;
}
#header {
       height:200px;
}
#content {
       float:left;
       width:500px;
}
#sidebar {
       float:left;
       width:300px;
}
#footer {
       clear:both;
       height:200px;
}

이렇게 적어주면 대충 제일 위의 이미지처럼, container 안에 header가 시작되고, 그 아래 content와 sidebar가 사이좋게 영역을 차지하고, 그 아래 footer가 깔리게 됩니다.

여기서, width, height는 말 그대로 넓이와 높이를 선언해주는 것이죠. 쉽습니다. 쉬운 건 넘어가고 핑크색으로 되어 있는 것만 설명해보죠.

#container의 margin:0px auto;

사실 margin도 여백이라는 뜻이니 쉬운데, 뒤에 붙은 auto가 특이합니다. 결론만 말하면 margin에 auto를 붙이면 가운데 정렬이 됩니다. 화면의 가로폭이 1024px인데 container가 의 가로폭이 800px이고, 좌우 여백을 auto로 맞추려면 가운데 정렬되는 수 밖에 없겠죠.

container가 다른 div를 모두 감싸고 있기 때문에 전체 레이아웃이 가운데 정렬이 됩니다. 만약 좌측 정렬하고 싶으면? auto를 지워주면 됩니다. margin:0px; 이렇게 적어주면 좌측 정렬되겠지요. 모든 html 요소들은 좌측부터 시작하니까요.

#content의 float:left

이건 div를 띄워서 좌측에 위치시키라는 뜻입니다. 결과에 입각해 말하자면, 가로폭은 500px이면서 띄워서 왼쪽에 붙이니 여기까지만 적는다면 이런 모양이 되겠지요.

content가 떴습니다.

자, content가 떴습니다.

예, 공중에 떴습니다. 즉 화면에 붙는 공간을 잡아먹지 않고 떴기 때문에 sidebar와 footer가 header 바로 아래에 달라 붙었군요. 그리고, 분명히 content 영역은 sidebar와 footer가 있든 말든 그 위에 떠있습니다.

#sidebar의 float:left

자, 이젠 sidebar 영역도 띄우라고 했군요. float 속성은 서로 같은 속성이 반복될 경우 차근차근 순서대로 달라붙습니다. (float:left가 반복되면 왼쪽에서 오른쪽으로 순서대로 달라붙고, float:right가 반복되면 오른쪽에서 왼쪽으로 달라붙겠죠.) content 영역도 띄웠고, sidebar 영역도 띄운다면… 상상이 되십니까? 맞습니다. 이렇게 되지요.

sidebar도 떴습니다.

sidebar도 떴습니다.

두 개의 div가 떴기 때문에 footer 영역이 header 영역 바로 아래로 달라붙었습니다.

그렇다면 sidebar를 float:right 시키면 어떻게 될까요? 맞습니다. 이렇게 됩니다. 오른쪽에 가서 달라붙게 되지요.

sidebar도 떴습니다. #2

뜨긴 뜨는데, 오른쪽에 달라붙겠지요.


#footer의 clear:both

그런데, 이래선 곤란합니다. content와 sidebar는 사이좋게 옆으로 붙어서 좋은데, footer가 그 아래로 겹쳐서 표현되면 안되겠지요. (물론 어떤 레이아웃들은 의도적으로 겹쳐 놓지만 이 경우는 각자 보이는 게 목표니까요.) 그래서, footer 영역이 자리잡을 위치를 초기화시켜줍니다.

clear:left; 는 위에 float:left 한 게 있다면 그 영역을 존중(^^)해주고 겹치지 않게 그 아래에 표시하라는 뜻입니다. clear:right; 는 float:right 한 것의 영역을 존중(^^)해주라는 뜻이겠지요.

clear:both는 float:left 든 float:right든지 상관없이 모두 존중하라는 뜻입니다. 따라서, 이렇게 표현이 됩니다.

footer가 겹치지 않습니다

footer가 겹치지 않고 착하게 아래로 내려옵니다.



사실 이 글을 읽는 분들은 대체로 table 태그 정도는 알고 계실 겁니다. 그리고, 그 태그가 얼마나 막강한지도 말이죠. rowspan과 colspan까지 사용하면 세상의 모든 바둑판 모양의 레이아웃은 전부 표현할 수 있습니다. 로직 또한 아주 직관적이죠.

그러나, 우리가 이 막강한 table 태그를 사용하지 않고 어렵고 복잡한 것 같아 보이는 div 태그 (span 태그도 비슷해요.)와 css를 사용하는 이유는 위처럼 어떤 면에서는 이게 더 편하고 강력하기 때문이지요.

이런 식으로 하나씩 알게 되면 skin.html를 열어봤을 때 table 태그로 이루어져 있지 않더라도, style.css에 여러가지 선언들이 되어 있더라도 헉- 하는 소리는 나오지 않을 것 같아요. :)

,
글 목록 번호 : 1 2
◀ 다음 글 목록 이전 글 목록 ▶

티스토리툴바