CSS Pseudo-elements

W3C/CSS 2006. 9. 11. 18:58
CSS pseudo-elements는 어떤 선택자에 특별한 효과를 더할 때 사용된다.

Syntax
selector:pseudo-element {property: value}
CSS classes는 pseudo-elements로도 사용된다.
selector.class:pseudo-element {property: value}


The :first-line Pseudo-element
"first-line" pseudo-element는 선택자의 첫번째 줄 텍스트에 특별한 스타일을 더해준다.

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

<p>Some text that ends up on two or more lines</p>

위 예제는 브라우저가 "first-line" pseudo element에 따라 형태가 적용된 첫번째 줄을 보여준다.
"first-line" pseudo-element는 block-level 요소에만 사용될 수 있다.
다음 속성은 "first-line" pseudo-element가 허용된다.
  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
<!-- 첫번째 줄 텍스트 스타일 지정 -->
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>

<body>
<p>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</p>
</body>
</html>


The :first-letter Pseudo-element
"first-letter" pseudo-element는 선택자의 첫번째 문자 텍스트에 특별한 스타일을 더해준다.

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

<p>The first words of an article.</p>

"first-letter" pseudo-element는 block-level 요소에만 사용될 수 있다.
다음 속성은 "first-letter" pseudo-element가 허용된다.
  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if 'float' is 'none')
  • text-transform
  • line-height
  • float
  • clear
<!-- 첫번째 텍스트 문자 스타일 지정 -->
<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>

<body>
<p>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</p>
</body>
</html>


Pseudo-elements and CSS Classes
Pseudo-elements CSS 클래스들을 결합할 수 있다.

p.article:first-letter {color: #FF0000}

<p class="article">A paragraph in an article</p>


Multiple Pseudo-elements
여러 pseudo-elements는 결합될 수 있다.

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>The first words of an article</p>

위 예제에서 문단의 첫번째 문자는 24pt의 폰트 크기를 가진 빨간색이 될 것이다.
문단의 나머지가 기본 색상일 때 첫번째 줄의 나머지는 파란색이 될 것이다.


CSS2 - The :before Pseudo-element
":before" pseudo-element는 요소 전에 어떤 내용을 삽입하는데 사용할 수 있다.

/* h1 요소가 나타나기 전에 사운드가 플레이 된다. */
h1:before
{
content: url(beep.wav)
}


CSS2 - The :after Pseudo-element
":after" pseudo-element는 요소 뒤에 어떤 내용을 삽입하는데 사용할 수 있다.

/* h1 요소가 나타난 후에 사운드가 플레이 된다. */
h1:after
{
content: url(beep.wav)
}


Pseudo-element

:first-letter - 첫번째 텍스트의 문자에 특별한 스타일을 더한다.
:first-line - 첫번째 줄의 텍스트에 특별한 스타일을 더한다.
:before - 요소 전에 어떤 내용을 삽입한다.(ie: x)
:after - 요소 후에 어떤 내용을 삽입한다.(ie: x)

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret