CSS

[CSS] custom property

기록하는_사람 2022. 9. 15. 20:02

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의 첫째줄 글자색 설정.
            }