본문 바로가기
웹프로그래밍 기초/A반소스자료

CSS 테스트

by 이데렐라 2023. 4. 6.
반응형

CSS

<!DOCTYPE html>
<html>
    <head>
        <title>CSS 테스트2</title>
        <style>
            html,body{margin: 0px; padding: 0px;}
            h2{margin: 0px;}

            html{font-size: 18px;}
            li{float: left; list-style: none; padding: 20px; }
            .bg{background-color: blue;}
            li:nth-child(2n){background-color: blue;}
            li:nth-child(2n+1){background-color: pink;}
            li:first-child{
                color:#8F0404; 
                color: rgb(143,4,4);
                color: rgba(143,4,4,.5); opacity:0.5; }
            li:last-child{color:white;}


            .big{font-size: 22px;
                 width:200px; height: 175px;
                border-top:3px solid red;
                border-bottom: 3px solid blue;
                border-left:3px solid red;
                border-right: 3px solid blue;
                
                /*border-width: 3px;
                border-style: solid;
                border-color:red;*/

            }
            .big > h2{font-size: 2em;}
            .big div h2{font-size: 2rem;}
            .box{width: 200px; height: 200px; 
                border: 2px solid red;
                padding-top:20px;
                padding-bottom:20px;
                padding-left:20px;
                padding-right:20px;
                padding: 50px 30px 50px 30px;

                margin: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            영역테스트
        </div>
        <div class="big">
            <h2>크기단위 테스트</h2>
            <div>
                <h2>크기체크</h2>
            </div>
        </div>

        <h2>구조 선택자</h2>
        <ul>
            <li>1</li>
            <li class="">2</li>
            <li>3</li>
            <li class="">4</li>
            <li>5</li>
            <li class="">6</li>
            <li>7</li>
        </ul>
    </body>
</html>

cssTest2.html
0.00MB

반응형

'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글

위치속성과 변형/애니메이션  (0) 2023.05.11
디스플레이속성 과 폰트속성  (1) 2023.04.27
레이아웃 & CSS  (3) 2023.03.30
table & form Tag  (0) 2023.03.23
이미지와 멀티미디어 Tag  (0) 2023.03.23

댓글