CSS - 반응 선택자 / 상태 선택자 / 구조 선택자

SeomIII·2021년 8월 13일

FRONTEND

목록 보기

5/11

📌 반응 선택자

✅ :hover --> 마우스를 올리면~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            div{
                width:300px; background-color: red;
                /* 언제나 가운데 정렬 */
                margin:0 auto;
            }
            ul > li{
                font-size:20px; 
                font-weight:bold;
                color:orange;
            }

            /* 반응 선택자 --> 마우스 올리면 */
            li:hover{
                color:blue;
            }

        </style>
    </head>
    <body>
       <div>
           <ul>
               <li>menu1</li>
               <li>menu2</li>
               <li>menu3</li>
               <li>menu4</li>
               <li>menu5</li>
           </ul>
       </div>
        
    </body>
</html>

마우스 올리면 남색으로 바뀜

📌 상태 선택자

✅ ex) input:focus / input:enabled / input:disabled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 상태선택자 */
            input:focus{ border: 2px solid #ff8080; padding:10px;}
            input:enabled{ color:orange; font-weight: bold;}
            input:disabled{ color:green;}

        </style>
    </head>

    <body>
        <form>
            이름: <input type="text" name="uname"><br>
            아이디: <input type="text" name="uid"><br>
            비밀번호: <input type="password" name="upwd" value="12345" disabled="disabled"><br>
        </form>

    </body>
</html>

📌 구조 선택자

✅ ex) ul li:nth-child(2n+1) / ul li:first-child / ul li:last-child

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #content{
                width:300px;
            }

            ul li{ list-style: none; border:1px solid #cccc; 
                padding: 10px; background-color: #efefef; font-weight:bold;
                font-size:20px;
            }
            /* 구조 선택자 */
            ul li:nth-child(2n+1){ background-color: #ff8080;}
            ul li:first-child, ul li:last-child{ background-color: yellow;}
            ul li:first-child{ border-radius: 10px 10px 0 0;}
            ul li:last-child{border-radius: 0 0 10px 10px;}

        </style>
    </head>

    <body>
        <div id="content">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
                <li>menu5</li>
                <li>menu6</li>
                <li>menu7</li>
            </ul>

        </div>
    </body>
</html>

👌 레이아웃 예제

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #header, #content, #footer {  
                width:1000px;
                margin:0 auto;
                overflow:hidden;
            }

            #header .left_space , #content .left_space, #footer .left_space{
                width:150px; height:150px;
                float:left;
                border:1px solid #c0c0c0;
                background-color: lightgray;
                
            }

            #header .center_space, #content .center_space ,#footer .center_space{
                width:694px; height:150px;
                float: left;
                border:1px solid #c0c0c0;
                background-color: lightgray;
            }

            #header .right_space, #content .right_space, #footer .right_space{
                width:150px; height:150px;
                float:left;
                border:1px solid #c0c0c0;
                background-color: lightgray;
            }

            #header .left_space, #footer .right_space{
                border-radius: 30px 0;
            }

            #header .right_space , #footer .left_space{
                border-radius: 0 30px;
            }

            #content .left_space{
                border-radius: 0 30px 30px 0;
                height:300px;
            }

            #content .right_space{
                border-radius: 30px 0 0 30px;
                height:300px
            }

            #header .center_space{ border-radius: 0 0 30px 30px; 
            }

            #content .center_space{
                border-radius: 30px;
                height:300px;
            }

            #footer .center_space{
                border-radius: 30px 30px 0 0;
            }

            #content .center_space ul li{
                list-style: none;
                float:left;
                padding:0 40px;
                font-weight: bold;
                font-size: 20px;
            }
            
            #content .hello{
                clear:both;
                padding:10px;
            }


        </style>
    </head>

    <body>
        <div id="header">
            <div class="left_space"></div>
            <div class="center_space"></div>
            <div class="right_space"></div>
        </div>

        <div id="content">
            <div class="left_space"></div>
            <div class="center_space">
                <div>
                    <ul>
                        <li>menu1</li>
                        <li>menu2</li>
                        <li>menu3</li>
                        <li>menu4</li>
                    </ul>
                </div>

                <div class="hello">
                    <h1>hello world!</h1>
                    <p>i want to go home i want to go homei want to go homei want to go homei want to go homei want to go homei want to go home</p>
                </div>
                
            </div>

            <div class="right_space"></div>
        </div>

        <div id="footer">
            <div class="left_space"></div>
            <div class="center_space"></div>
            <div class="right_space"></div>
        </div>

    </body>
</html>