Pseudo-elements and pseudo-classes
◀ ■ ▶
거짓 element와 class는 더 다양하게 스타일을 적용시키기 위해서 HTML 4.0에 존재하지 않는 element를 만들어 낸 것을 말한다.
- Pseudo-elements : Element의 일부분을 하나의 element로 만든다. 하나의 selector에 하나의 pseudo-element만이 사용될 수 있다. 예) 문단의 첫 줄이나 첫 글자.
- Pseuo-classes : 그룹으로 묶일 수 있는 element들을 하나로 만든다. 예) 새 링크와 가본 적이 있는 링크, 클릭하는 순간의 링크.
First-line pseudo-element
문단의 첫 줄에만 스타일을 줄 때 사용한다. 특성상 Block-level elements에만 적용된다.
<HTML>
<HEAD>
<STYLE type = "text/css">
P:first-line { color : green }
</STYLE>
</HEAD>
<BODY>
<P>
이 문단은 길이가 길기 때문에 여러 줄에 걸쳐 나올 것입니다.
첫번째 줄은 글자 색이 녹색으로 나온다는 것인데,
first-line pseudo-element는 아직 제대로 구현이 안 되는군요.
다 까맣지요?</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: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> 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>
<TITLE>Title</TITLE>
<STYLE type="text/css">
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>
<A href = "http://www.chosun.com">조선일보</A>
</BODY>
</HTML> 이렇게 나와요
A.external:link(class=external인 A의 링크)와 같이 클래스와 같이 쓸 수도 있고, a.link나 a#link와 같이 link, active, visited를 클래스나 id로 사용할 수도 있다.
◀ ■ ▶