-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfirst-letter.html
More file actions
37 lines (36 loc) · 1.65 KB
/
Copy pathfirst-letter.html
File metadata and controls
37 lines (36 loc) · 1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<!-- 문서 타입 선언: HTML5 -->
<html lang="ko">
<head>
<meta charset="utf-8">
<title>::first-letter - 블록 요소의 첫 번째 글자에만 스타일을 적용한다. 드롭캡(큰 첫 글자) 효과에 사용된다.</title>
<!--
[선택자] ::first-letter
설명: 블록 요소의 첫 번째 글자에만 스타일을 적용한다. 드롭캡(큰 첫 글자) 효과에 사용된다.
구문: selector::first-letter { }
팁: ::first-letter 앞에 ::before로 따옴표 등을 넣으면 그 문자가 첫 글자로 간주될 수 있다. float를 사용해 전통적인 드롭캡을 만들자.
-->
<style>
/* .dropcap: class 속성에 dropcap을 가진 요소 매칭 */
.dropcap {
width: 280px; /* 너비 280px */
line-height: 1.6; /* 줄 높이 1.6배 */
color: #374151; /* 진한 회색 텍스트 */
font-size: 15px; /* 글자 크기 15px */
}
/* .dropcap::first-letter: .dropcap의 렌더링된 첫 번째 글자 매칭 */
.dropcap::first-letter {
font-size: 3em; /* 첫 글자만 3배 크게 */
font-weight: bold; /* 굵게 */
color: #dc2626; /* 빨간색 강조 */
float: left; /* 왼쪽으로 띄워 텍스트 흐름 회피 */
margin-right: 8px; /* 오른쪽 8px 여백 */
line-height: 1; /* 줄 높이 1 */
}
</style>
</head>
<body>
<!-- 드롭캡이 적용될 단락 -->
<p class="dropcap">대한민국의 아름다운 계절이 돌아왔습니다. 봄바람이 불어오면 벚꽃이 만개하여 온 세상을 분홍빛으로 물들입니다.</p>
</body>
</html>