°³Ã¼ÀÇ Ã³À½±ÛÀÚ¿¡ ÇÑ°³ ÀÌ»óÀÇ ½ºÅ¸ÀϽ¬Æ® ¾ÖÆ®¸®ºäÆ®¿Í °ªÀÇ Â¦µéÀ» Àû¿ëÇÑ´Ù.

Àμö
cssSelector : (½ºÅ¸ÀÏ ¼±ÅÃÀÚ)
¼Ó¼ºÀ» °¡Áú¼ö ÀÖ´Â ¿¤·¹¸àÆ®()³ª Ŭ¶ó½º(class) À̸§ ȤÀº ÀνÄÀÚ(id)ÀÌ´Ù.

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº °³Ã¼ÀÇ Ã³À½±ÛÀÚ¿¡ Àû¿ëµÇ´Â ÇÑ°³ ÀÌ»óÀÇ ½ºÅ¸ÀϽ¬Æ® ¾ÖÆ®¸®ºäÆ®¿Í °ªÀÇ Â¦µéÀ» ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

Ư±â

background, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, color, styleFloat, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, margin, padding, textDecoration, textTransform¿Í verticalAlign ¼Ó¼ºµéÀº :first-letter °¡»ó ¿¤·¹¸àÆ®(pseudo-element)¸¦ Àû¿ëÇÑ´Ù.

:first-letter °¡»ó ¿¤·¹¸àÆ®´Â ù ±ÛÀÚ¸¦ °­Á¶ÇÏ¿© Ç¥ÇöÇϱâ¿Í °°Àº È¿°ú¸¦ ³»±âÀ§ÇÏ¿© »ç¿ëµÉ ¼ö ÀÖ´Ù. ±ÛÀÚ ³»·ÁÁü(drop)Àº ¹®´ÜÀÇ Ã³À½ ±ÛÀÚ°¡ ´Ù¸¥ ±ÛÀÚº¸´Ù Ŭ °æ¿ì, Å« ±ÛÀÚ¸¦ Ç¥ÇöÇÒ ¼ö ÀÖµµ·Ï ±âÃʶóÀÎÀÌ ¾Æ·¡µµ À̵¿ÇÏ¿© Ç¥ÇöµÇ°í, ´ÙÀ½ ÁÙÀÇ ±ÛÀÚµéÀº ±× µÚ¿¡ ³ª¿À°ÔµÈ´Ù.

:first-letter °¡»ó ¿¤·¹¸àÆ®´Â ºí·°·¹º§ ¿¤·¹¸àÆ®¿¡ Àû¿ëµÉ ¼ö ÀÖ´Ù. display ¼Ó¼ºÀÌ blockÀ¸·Î ¼³Á¤µÈ °æ¿ì¿¡´Â ÀζóÀÎ ¿¤·¹¸àÆ®¿¡µµ ÷ºÎÇÒ ¼ö ÀÖ´Ù..

Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
ADDRESS BLOCKQUOTE BODY CENTER DD DIV DL DT FIELDSET FORM hn LEGEND LI LISTING MARQUEE MENU P PLAINTEXT PRE XMP
ÂüÁ¶
:first-line

ÀÌ °¡»ó Ŭ¶ó½º´Â CSS1(Cascading Style Sheets, Level 1)¿¡¼­ Á¤ÀǵǾú´Ù.


ùÁ٠ù±ÛÀÚ´Â Å©°Ô Ç¥ÇöÇÑ´Ù.
¹®´ÜÀÇ µÎ¹ø° ÁÙ.

<STYLE>P.BigFirst:first-letter { font-size: 200%; float: left; line-height:1.2em }</STYLE>
<P class="BigFirst">ùÁ٠ù±ÛÀÚ´Â Å©°Ô Ç¥ÇöÇÑ´Ù.<BR>
¹®´ÜÀÇ µÎ¹ø° ÁÙ.</P>

ùÁ٠ù±ÛÀÚ´Â Å©°Ô Ç¥ÇöÇÑ´Ù.
¹®´ÜÀÇ µÎ¹ø° ÁÙ.
¹®´ÜÀÇ ¼¼¹ø° ÁÙ.

:first-line°ú :first-letter °¡»ó Ŭ¶ó½º¸¦ µ¿½Ã¿¡ Àû¿ëÇÏ¿´´Ù.

<STYLE>
.LetterAndLine:first-line { font-weight:bold; }
.LetterAndLine:first-letter { font-size: 200%; float: left; line-height:1.2em }
</STYLE>
<P class="LetterAndLine">ùÁ٠ù±ÛÀÚ´Â Å©°Ô Ç¥ÇöÇÑ´Ù.<BR>
¹®´ÜÀÇ µÎ¹ø° ÁÙ.<BR>
¹®´ÜÀÇ ¼¼¹ø° ÁÙ.</P>

ù±ÛÀÚ´Â Å©°Ô Ç¥½ÃÇÏ¿© °­Á¶µÈ´Ù.
ÀϹÝÀûÀ¸·Î ¾Æ·¡·Î È®ÀåµÈ´Ù.
´ÙÀ½ ºÎÅÍ´Â Á¤»óÀûÀ¸·Î Ç¥ÇöµÈ´Ù.
<STYLE>
.colmn { border-right:solid 2px black; padding-right:10px;  padding-left:5px; width:140px; text-justify:newspaper; }
.newsbite:first-letter { padding-left:25; padding-right:10; font-size:24; float:left; padding-bottom:5; padding-top:15; line-height:1.2em }
</STYLE>
<DIV class="colmn">
<DIV class="newsbite">ù±ÛÀÚ´Â Å©°Ô Ç¥½ÃÇÏ¿© °­Á¶µÈ´Ù.<BR>
ÀϹÝÀûÀ¸·Î ¾Æ·¡·Î È®ÀåµÈ´Ù.<BR>
´ÙÀ½ ºÎÅÍ´Â Á¤»óÀûÀ¸·Î Ç¥ÇöµÈ´Ù.</DIV>
</DIV>