ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • (55)CSS_clear
    HTML, CSS 2023. 4. 3. 16:44
    728x90
     

    (35)CSS_태그 설명

    font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사

    jm-rograming.tistory.com

    <!DOCTYPE html>
    <html lang="en">
    <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>clear</title>
        <style>
            body{
                margin: 20px 30px;
                max-width: 800px;
            }
            p{
                padding: 10px;
                text-align: center;
                font-size: 18px;
            }
            #p1{
                float: left;
                width: 38%;
                background-color: gold;
                margin-bottom: 20px;
            }
            #p2{
                float: right;
                width: 54%;
                background-color: deepskyblue;
                margin-bottom: 0;
            }
            #p3{
                clear: both;
                background-color: deeppink;
                margin-bottom: 0;
            }
        </style>
    </head>
    <body>
        <h2>clear</h2>
        <div id="p1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt alias est illo corporis provident velit iusto consectetur totam aliquid ducimus repellendus, omnis nesciunt similique, rerum eum, quos id quod voluptates.</p>
        </div>
        <div id="p2">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, deserunt nesciunt rerum iste ea porro voluptatibus magni sapiente, maiores eum accusantium ducimus repellat consequuntur. Voluptas quo ipsum minima reiciendis veritatis.</p>
        </div>
        <div id="p3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores vel quidem ratione eum cupiditate incidunt ducimus adipisci odio nam magni? Velit, architecto aut quisquam debitis consectetur mollitia minus hic iste.</p>
        </div>
    </body>
    </html>

    'HTML, CSS' 카테고리의 다른 글

    (57)CSS_2단 레이아웃  (0) 2023.04.03
    (56)CSS_레이아웃 기본 문법  (0) 2023.04.03
    (54)CSS_float2  (0) 2023.04.03
    (53)CSS_float1  (0) 2023.04.03
    (52)CSS_z-index  (0) 2023.04.03

    댓글

Designed by Tistory.