728x90
반응형
Pseudo element
- 해당 요소의 특정 부분을 선택하는 선택자
- 선택자 뒤에 ::을 붙여 원하는 부분만 선택할 수 있다.
- ::first-letter - 첫 번째 글자
- ::first-line - 첫 번째 줄
- ::selection - 블록지정된 부분만 선택
- ::before - 해당 요소의 맨 앞부분을 선택
- ::after - 해당 요소의 맨 뒷부분을 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_가상요소.html</title>
<link rel="stylesheet" href="./assets/css13.css">
</head>
<body>
<h3># Pseudo element</h3>
<ul>
<li>해당 요소의 특정 부분을 선택하는 선택자</li>
<li>선택자 뒤에 ::을 붙여 원하는 부분만 선택할 수 있다.</li>
<li>::first-letter - 첫 번째 글자</li>
<li>::first-line - 첫 번째 줄</li>
<li>::selection - 블록지정된 부분만 선택</li>
<li>::before - 해당 요소의 맨 앞부분을 선택</li>
<li>::after - 해당 요소의 맨 뒷부분을 선택</li>
</ul>
<div id="test-div">
국채를 모집하거나 예산외에 국가의 부담이 될 계약을 체결하려 할 때에는 정부는 미리 국회의 의결을 얻어야 한다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 국회의 정기회는 법률이 정하는 바에 의하여 매년 1회 집회되며, 국회의 임시회는 대통령 또는 국회재적의원 4분의 1 이상의 요구에 의하여 집회된다.
</div>
</body>
</html>#test-div {
font-size: 20px;
padding: 5px;
border: solid black 3px;
text-indent: 1.0em;
}
#test-div::first-letter {
font-size: 1.5em;
font-weight: bold;
}
#test-div::first-line {
color:red;
}
#test-div::selection {
color: white;
background-color: blue;
}
#test-div::before {
content: "요소의 맨 앞입니다~";
border: 1px solid red;
}
#test-div::after {
content: "요소의 맨 뒤입니다~😍";
border: 1px solid black;
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] Display (0) | 2023.06.08 |
|---|---|
| [CSS] Float (0) | 2023.06.08 |
| [CSS] 가상 클래스 (0) | 2023.06.07 |
| [CSS] 아이콘(Icon) (0) | 2023.06.07 |
| [CSS] 글꼴 (0) | 2023.06.07 |
