2010/06/04 11:25
[웹표준 개발]
5. 가상요소와 가상클래스-2
3) first-line, first-letter 가상요소
<style type="text/css">
body {font-size:12px;}
h2 {color:#666;}
.line p:first-line {font-size:12px; font-weight:bold; color:#44C4DF; width:100%;}
.letter p:first-letter {color:#E7963D; font-size:22px; text-indent:4em; font-weight:bold;}
</style>
문자 그대로 이해를 하시면 가장 편할듯 하네요.
first-line은 문단의 첫번째 줄에 적용이 되는 것 이구요,
fist-letter는 첫 글자에 스타일이 적용되는 것 입니다.
문제의 IE6에서도 적용이 되네요~
<h2>first-line 가상요소</h2>
<div class="line">
<p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳 물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다 </p>
</div>
<h2>first-letter 가상요소</h2>
<div class="letter">
<h2>first-letter 가상요소</h2>
<div class="letter">
<p>물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
</div>
4) before, after가상요소
<style type="text/css">
body {font-size:15px; line-height:150%;}
.cnt p:before {content:"노래시작" ; color:red;}
.cnt p:after {content:"노래끝" ; color:red;}
</style>
<div class="cnt">
<p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳 물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다
물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
</div>
문단의 처음과 끝에 가상컨텐츠가 적용되어있는것을 볼수있습니다.
IE6,7은 안되고 IE8부터 인식합니다.
4) before, after가상요소
<style type="text/css">
body {font-size:15px; line-height:150%;}
.cnt p:before {content:"노래시작" ; color:red;}
.cnt p:after {content:"노래끝" ; color:red;}
</style>
<div class="cnt">
<p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳 물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다
물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
</div>
문단의 처음과 끝에 가상컨텐츠가 적용되어있는것을 볼수있습니다.
IE6,7은 안되고 IE8부터 인식합니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 4 (2) | 2010/07/09 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 3 (1) | 2010/06/04 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
Trackback Address :: http://web2log.com/trackback/52
