HTML, CSS

rgba, rem 등 사용법

JooKit 주킷 2021. 6. 8. 19:38
목차 접기
728x90
반응형

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>백분율 단위</title>
    <style>
        p:nth-child(1) {

        }
        p:nth-child(2) {
            font-size: 100%;
        }
        p:nth-child(3) {
            font-size: 150%;
        }
        p:nth-child(4) {
            font-size: 200%;
        }

        #first {
            /* background-color: rgb(255, 222, 100); */
            background-color: rgba(0, 0, 0, 0.3);
            /* alpha 값은 0.0(완전 투명), 1.0(완전 불투명) */
        }
    </style>
</head>
<body>
    <!--<h1>백분율 단위로 나타낸 문장</h1>-->

    <!-- %단위는 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정할 때 사용하면 유용하다.-->
    <p id="first">Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>

</body>
</html>

😶 rgba(255, 255, 255, 1.0)

  • alpha 값은 0.0(완전 투명), 1.0(완전 불투명)
728x90
반응형
LIST