[CSS] 의사요소 - fist-line, first-letter, before, after
안녕하세요. 명월입니다.
이 글은 CSS에서의 의사요소 (fist-line, first-letter, before, after)에 대한 글입니다.
지금까지 의사클래스 선택자에 대해서 설명했는데, 명명이 조금 다른 의사요소 선택자입니다.
(다른 전문 분야의 전문 용어는 잘 모르겠는데, IT 관련 전문 용어도 일본에서 온 경우가 많아서 명명이 참 더럽습니다. 지금이야 한국 IT도 많이 발전해서 영어 직독해한 전공 서적이 많은데, 예전에는 영어로 된 전공 서적이 일본어로 번역되고 다시 한국어로 번역된 것이 많아 이상한 명명들이 참 많습니다.)
의사요소는 태그와 속성를 선택하는(의사클래스) 선택자가 아니고 태그 안의 Text 요소를 선택하는 선택자입니다. 의사요소 선택자의 특징은 (:)으로 선택 요소를 설정합니다.
<!DOCTYPE html>
<html>
<head><title>css</title></head>
<body>
<!-- 첫번째 요소 예제 -->
<p>안녕하세요<br />명월입니다<br />이글은 연습입니다</p>
<!-- 두번째 요소 예제 -->
<ul>
<li>TEST1</li>
<li class="new">TEST2</li>
<li class="note">TEST3</li>
</ul>
</body>
</html>
/* 첫번째 요소의 첫번째 라인*/
p:first-line {
color:blue;
}
/* 첫번째 요소의 첫번째 글자*/
p:first-letter {
font-size:30px;
}
li {
margin:10px 0px;
}
/* 두번째 요소의 note클래스를 가진 요소의 앞부분*/
li.note:before {
content:"note!";
border:1px solid rgba(52, 94, 236, 0.51);
margin:0px 5px;
border-radius:5px;
color:rgba(224, 89, 89, 0.88);
background-color:rgba(102, 255, 253, 0.39);
font-weight:bold;
padding:1px;
font-size:9px;
}
/* 두번째 요소의 new클래스를 가진 요소의 뒷부분*/
li.new:after {
content:"new";
color:red;
font-weight:bold;
font-size:9px;
margin:0px 5px;
}
first-line의 경우는 위 첫번째 요소의 p태그를 보면 br태그로 3줄로 구성이 되어 있습니다. 그중 첫번째 줄에 대한 스타일입니다. 즉,「안녕하세요」가 그 대상입니다.
first-letter는 첫번째 글자에 대한 설정인데, p태그의 첫번째 글자는 「안」이 되겠습니다.
즉, 첫번째 줄은 파란색에 첫번째 글자의 font-size는 30px이 되는 것입니다.
그리고 두번째 요소에서 class가 note와 new에 해당하는 요소에 대한 스타일입니다.
before과 after의 의사요소는 반다시 content의 스타일이 필수로 들어갑니다. 즉, content의 글자가 before면 text value의 앞부분 즉, 위 예제로 「TEST3」의 앞부분에 note!라는 글자가 들어갑니다.
그리고 그 밑에 있는 테두리 스타일과 텍스트 스타일은 모두 추가된 note!의 글자에 스타일이 적용됩니다.
after의 경우는 before과 반대로 text value의 뒷부분 즉, 위 예제로는 「TEST2」의 뒷부분에 new라는 글자가 들어갑니다.
역시 스타일은 new라는 글자에 적용이 됩니다.
참고로 content에 글자가 아닌 태그의 요소, 즉 「content:"
check
"」가 들어가면 text value에 태그가 적용이 되는 것이 아니고check
라는 글자가 들어갑니다. 이점 주의해야 합니다.
저의 경우는 before과 after는 저도 자주 사용하는 요소의사이긴 합니다만, first-line와 first-letter의 스타일은 사용해 본 적이 없습니다. 아마 첫글자 대문자 설정등이 필요한 영어권에서 자주 사용되는 스타일이지 않을까 예상해 봅니다.
여기까지 CSS에서의 의사요소 (fist-line, first-letter, before, after)에 관한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [CSS] 위치(postion)과 요소 객체 스타일(display) (0) | 2020.01.29 |
|---|---|
| [CSS] 테두리 및 여백 스타일 - border, margin, padding (0) | 2020.01.28 |
| [CSS] 문자 스타일 (0) | 2020.01.27 |
| [CSS] 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus (0) | 2020.01.23 |
| [CSS] 의사클래스 - only-child, only-of-type, empty, empty, root (0) | 2020.01.21 |
| [CSS] 의사클래스 - first-child, last-child, first-of-type, last-of-type (0) | 2020.01.16 |
| [CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type (2) | 2020.01.15 |
| [CSS] 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자) (0) | 2020.01.15 |