CSS로 첫글자만 꾸미기

 

유럽등의 고서에서 위의 이미지처럼 첫글자만 크거나 무늬로 꾸며져 있는 것을 영화등에서 본적이 있다.

저부분만 따로 span 으로 씌워서 만들어야 하나? 하고 의문을 가지다가,

CSS로 첫글자 꾸미기 또는 첫글자만 대문자로 만들기를 찾아 봤다.

다시 말해 무슨 말이냐 하면 바로 윗줄의 "C" 부분처럼 문장의 첫번째 글자만 꾸미는 것을 말한다.

 

해결 방법은 ":fisrt-letter" 선택자이다.

p.first-letter-deco:first-letter{font-size:20px}

 

이제 first-letter-deco를 클래스로 가지는 모든 p 태그의 첫번째 글자 크기는 20px로 된다.

 

그런데 여기서 궁금한 것!

"first-letter" 가 있으니 당연히 "last-letter"도 있겠지 했는데 없다.

다만 트릭?을 이용하면 가능하다.

 

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

/* https://stackoverflow.com/questions/15441742/change-last-letter-color */

이렇게 하면 끝 글자만 파랑색으로 된다. last-letter 효과를 볼 수 있다.