CSS

[CSS] Pseudo Element

기록하는_사람 2022. 9. 15. 18:58

Pseudo Element ::placeholder

📌 ::placeholder

: placeholder 꾸밀 때 사용.

 

Pseudo Element ::selection

📌 ::selection

: 선택한 것의 설정을 변경 할 때 사용.

 

Pseudo Element ::first-letter

📌 ::first-letter

: 첫 글자만 적용.

 

Pseudo Element ::first-line

📌 ::first-line

: 첫 줄만 적용.

 

Pseudo Element - 예시

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 기본 형식</title>
        <link href="styles.css" rel="stylesheet"/>
        <style>
            html {
                background-color: blanchedalmond;
            }
            body {
                height: 100vh;
                margin: 20px;
            }
            input::placeholder {
                color: darkorange;
            }
            p::selection {
                background-color: lightcoral;
            }
            P::first-letter {
                font-size: 50pt;
            }
            p::first-line {
                color: dodgerblue;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text" placeholder="name" />
        </form>

        <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>

+ 추가 설명

더보기

            input::placeholder {
                color: darkorange; → input의 placeholder 글자색 설정.
            }
            p::selection {
                background-color: lightcoral; → p를 드래그 할 경우 나타날 배경색 설정.
            }
            p::first-letter {
                font-size: 50pt; → p의 첫번째 글자 크기 설정.
            }
            p::first-line {
                color: dodgerblue; → p의 첫째줄 글자색 변경.
            }