small-caps, first-letter, first-line

-- CSS 2012. 9. 3. 13:34
,
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<style>
.scaps {
    font-variant: small-caps;
}

.first:first-letter {
    font-size:1.4em;
}

.intro:first-line {
    text-transform:uppercase;
}
</style>

<div class="scaps">Hello world</div>

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

<div class="first">HELLO WORLD</div>

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

<div class="intro">HELLO WORLD</div>

가상엘리먼트 :first-line 은단락의맨첫줄을형식화한다. 제목(h2:first-line) 이나단락(p:first-line) 등의모든텍스트구간에이것을적용시킬수있다. :first-letter 와마찬가지로, 하나의단락에만클래스를적용시킬수있고, 그단락의첫줄에만형식을정의할수있다. 페이지첫단락의첫줄에있는모든글자를대문자로만들려고한다고가정하자. 첫단락의 HTML에 <p class = "intro"> 와같이클래스를적용하고나서다음과같이스타일을작성하면된다.

참고 : http://holahouhai.tistory.com/312
참고 : http://bones.tistory.com/38

'-- CSS' 카테고리의 다른 글

테이블 상단, 하단, 왼쪽, 오른쪽 border 제어  (0) 2013.12.21
useful color collection  (0) 2012.11.07
font-family 글꼴 지정 시 주의사항  (0) 2012.08.20
Meta no-cache  (0) 2012.08.06
mso-number-format  (0) 2010.11.08
posted by 어린왕자악꿍

티스토리툴바