[css] selector, Declaration block, id, Descendant Selector

JINN·2023년 6월 6일

CSS

선택자(slector): CSS의 주어

h2{color:red;font-size:10px;}

- h2 : 선택자(selctor)

- {color:red;font-size:10px;} : 선언 블록(Declaration block)

- color:red; , font-size:10px : 선언(Declaration)

- color, font-size : 프로퍼티(property)

- red, 10px : 값(property value)

<!DOCTYPE html>
<html>
    <head>
        <style> 
            li{
                color:red;
                text-decoration:underline
            }
            #select{
                font-size:50px;
            }    
        </style>
       
        <body>
            <ul>
                <li>HTML</li>
                <li id="select">CSS</li>
                <li>Javascript</li>
            </ul>
        </body>
    </head>
</html>

id="select"

- id : style을 li에 적용할때 원하는 li에만 적용하고 싶을때 사용

부모자식선택자(Descendant Selector)

- ol의 직계인 li에만 테두리 효과(border)를 주고싶을때

- ol>li 사용

- ol이 한가지가 아니기때문에 id또한 적용

<!DOCTYPE html>
<html>
    <head>
        <style>
         ul li{
            color:red;
         }
         #lecture>li{
            border:1px solid red;
        }
        ul,ol{
            background-color: powderblue;
        }
        </style>
    </head>
        <body>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>Javascript</li>
            </ul>
            <ol id="lecture">
                <li>HTML</li>
                <li>CSS
                    <ol>
                        <li>selector</li>
                        <li>declaration</li>
                    </ol>
                </li>
                <li>Javascript</li>
            </ol>
        </body>
</html>