:first-line Pseudo-element

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

문장 중에서 첫 번째 행을 다루는 가상 element입니다. <BR> Tag을 사용하여 줄을 바꾸지 않더라도 문장이 길어져서 행이 바뀌면 첫 번째 행에 가상 클래스를 적용해서 CSS Property 들을 지정합니다. 문장의 첫 번째 행에만 영향을 받고 나머지 행들은 영향을 받지 않습니다. 아래의 에제는 앞 페이지의 first-letter와 first-line을 동시에 지정했습니다.

입력

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

:first-line Pseudo-element

Pseudo(가상) element, Pseudo class