Programming/HTML CSS
<p>안녕하세요.<br />
반갑습니다.</p>
위 tag 에서 첫글자 '안'과 첫번째줄인 '안녕하세요'에 style을 적용하려면 아래와 같은 선택자를 사용합니다.
p::first-letter {
 font-size: 50px;
}
▶ 첫글자 '안'의 크기를 50px로 합니다.
p::first-line {
 color: red;
}
▶ '안녕하세요' 첫줄 전체를 붉은 색으로 합니다.

문자와 관련하여 반응형으로 동작하는 재미있는 선택자도 있는데
p::selection {  color: red; }
이와 같이 selection 선택자를 사용하면 사용자가 p tag 내부의 특정 내용을 drag 하여 선택했을때 선택한 부분만 붉은색으로 바뀌도록 합니다.

또 다른 형태로 아래 선택자를 사용하면 tag 내부의 처음 또는 마지막에 특정 내용을 추가할 수 도 있습니다.
p::before {
 content: "->";
}
▶ p tag 의 처음 부분에 '->' 내용을 추가합니다.
p::after {
 content: "<-";
}
▶ p tag 의 마지막 부분에 '<-' 내용을 추가합니다.

이때 content 는 p tag 내부의 요소를 의미하는 것으로 before나 after 선택자에서만 사용이 가능합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
0 0