Pseudo-elements and pseudo-classes

▲ ▶

거짓 element와 class는 더 다양하게 스타일을 적용시키기 위해서 HTML 4.0에 존재하지 않는

element를 만들어 낸 것을 말한다.

First-line pseudo-element

문단의 첫 줄에만 스타일을 줄 때 사용한다. 특성상 Block-level elements에만 적용된다. 

<HTML><HEAD>
<Meta http-equiv="Content-Type" content="text/HTML; charset=euc-kr">
<Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<TITLE>Pseudo-elements and pseudo-classes 예 1</TITLE>
<STYLE type="text/css">
BODY{font-size:10pt;}
TABLE{background-color:#ff99cc;width:100%;height:20px;margin-bottom:1em;}
TD,P{text-align:center;font-size:14px;font-weight:700;font-family:바탕체;font-weight:bold;line-height:2;}
P:first-line{color:blue;}
P:second-line{color:yellow;}
P:third-line{color:red;}
P:fourth-line{color:black;}
</STYLE></HEAD>
<BODY>
<TABLE>
<TR>
<TD>Pseudo-elements and pseudo-classes 예 1
</TABLE>
<P>이 문단은 길이가 길기 때문에 여러 줄에 걸쳐 나올 것입니다.
<BR>첫 번째 줄은 글자 색이 파란색으로 나온다는 것인데, 파란색인가요?
<BR>두 번째 줄은 글자 색이 노란색으로 나온다는 것인데, 노란색인가요?
<BR>세 번째 줄은 글자 색이 빨간색으로 나온다는 것인데, 빨간색인가요?
<BR>네 번째 줄은 글자 색이 까만색으로 나온다는 것인데, 검은색인가요?</P>
<P style=color:green>역시 첫 번째 줄만 해당 사항이 적용되네요.</P>
<P style=color:red>라인에 단독으로 넣은 스타일도 먹히지 않는군요.</P>
</BODY></HTML>

※ 아직 이론대로 구현되지 않는다.

Font properties,color properties,background properties,'word-spacing','letter-spacing',

'text-decoration','vertical-align','text-transform','line-height','clear'하고만 함께 쓸 수 있다.

First-letter pseudo-element

첫 글자만 크게 하거나 색을 주거나 할 때 사용한다. 

<HTML>
<HEAD>
<TITLE>TITLE</TITLE>
<STYLE type="text/css">
P{font-size:11pt;line-height:11pt}
P:first-letter{font-size:200%;font-style:italic;font-weight:bold;float:left}
P{text-transform:uppercase}
</STYLE>
</HEAD>
<BODY>
<P><P>The first</P>few words of an article in The Economist.</P>
</BODY>
</HTML>

※ 역시 아직 구현되지 않는다.: Font properties,color properties,background properties, 'text-decoration','vertical-align' ('float' 값이 'none'일 때만),'text-transform','line-height', margin properties,padding properties,border properties,'float','clear'하고만 함께 쓸 수 있다.

First-line과 first-letter pseudo-element는 함께 쓸 수도 있다는데... 다음 버젼의 브라우저에서 기대해 보자.

Anchor pseudo-classes:link,:visited,:active

링크의 색이나 밑줄 등을 바꿀 때 사용한다.

:link는 한 번도 클릭하지 않은 링크,:visited는 가본 적이 있는 링크,

:active는 클릭하는 순간의 링크를 말한다. 

<HTML><HEAD>
<Meta http-equiv="Content-Type" content="text/HTML; charset=euc-kr">
<Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<TITLE>Pseudo-elements and pseudo-classes 예 3</TITLE>
<STYLE>
BODY{font-size:10pt;}
TABLE{background-color:#ff99cc;width:100%;height:20px;margin-bottom:1em;}
TD{text-align:center;font-size:14px;font-weight:700;}
A:link{ color:red;} /*:link라고만 써도 된다. */
A:active{ color:lime;} /*:active라고만 써도 된다. */
A:visited{ color:blue;} /*:visited라고만 써도 된다. */
A:link, A:active, A:visited{ text-decoration:none;} </STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Pseudo-elements and pseudo-classes 예 3
</TABLE>
<A href = "http://www.chosun.com">조선일보</A>
</BODY></HTML>

A.external:link(class=external인 A의 링크)와 같이 클래스와 같이 쓸 수도 있고, a.link나 a#link와 같이 link,active,visited를 클래스나 id로 사용할 수도 있다.

▲ ▶