CSS는 ::first-letter 의사 요소를 사용하여 요소의 첫 글자 스타일을 지정하는 데 도움이 됩니다. 구두점, 이중 문자 및 콘텐츠 속성은 첫 글자를 변경할 수 있습니다.
다음 예는 CSS ::first-letter pseudo-element를 보여줍니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
body > * {
background-color: slategrey;
}
::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
