:first-letter Pseudo-element

Pseudo class(가상 클래스)란 실제로 HTML Element가 지원하지 못하는 기능을 지원하는 class로서, 예를 들어 문장의 첫 글자나 첫 줄을 다룬다든지, Printing 할 때 필요한 만큼 페이지를 나눈다든지 하는 HTML Element는 없기 때문에 이런 가상 Element를 사용하여 class를 지정하게 됩니다.

문장 중에서 첫 번째 글자를 다루는 가상 element입니다. 첫 번째 글자에 가상 클래스를 적용해서 CSS Property 들을 지정합니다. 문장의 첫 번째 글자만 영향을 받고 나머지 글자들은 영향을 받지 않습니다.

입력

<HTML>
    <HEAD>
        <TITLE>first-letter pseudo class</TITLE>
    <STYLE type="text/css">
    <!-- 
    p.double:first-letter{font:bold 200%; color:tomato;text-decoration: underline;} 
    /*p Tag에만 적용되는 double 클래스를 지정하고, :first-letter 가상 element 사용*/
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <P class="double">문장 중에서 첫 번째 글자를 다루는 가상 element입니다.  
        첫 번째 글자에 가상 클래스를 적용해서 CSS Property 들을 지정합니다. 
        문장의 첫 번째 글자만 영향을 받고 나머지 글자들은 영향을 받지 않습니다.</P>
    </BODY>
</HTML>

:first-letter Pseudo-element

Pseudo(가상) element, Pseudo class