custom property
📌 custom property
: 값을 저장하는 것.
'변수'라고 생각하면 쉬움.
root에서 선언
📌 규칙
: --( )-( ) 형식으로 이름 사용.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
:root {
--main-color: #ffadba;
--default-border: 2px solid black;
}
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
P::first-letter {
background-color: var(--main-color);
border: var(--default-border);
}
p::first-line {
color: dodgerblue;
}
</style>
</head>
<body>
<div>
<p>
No words are enough for you. 멜로디로 담고 싶어.
So, 너의 모든 감정 내가 들을 수 있게 해줘.
I just want to love you. 널 혼자 두지 않아 난
I just want you, I need you. 이 밤은 짧고 넌 당연하지 않아.
</p>
</div>
</body>
</html>
+ 추가 설명
더보기
p::first-letter {
background-color: var(--main-color); → p의 첫번째 글자 배경색 설정.
border: var(--default-border); → p의 경계선 설정.
}
p::first-line {
color: dodgerblue; → p의 첫째줄 글자색 설정.
}
'CSS' 카테고리의 다른 글
| [CSS] Transform (0) | 2022.09.19 |
|---|---|
| [CSS] Transition (0) | 2022.09.19 |
| [CSS] Pseudo Element (0) | 2022.09.15 |
| [CSS] States (0) | 2022.09.15 |
| [CSS] Pseudo Selectors (0) | 2022.09.14 |
댓글