요소선택


css는 html에 속성으로 설정된 테그명, id, css등을 이용하여 선택할 수 있습니다.


id 선택하기


id 속성값을 이용하여 요소를 선택 합니다. id는 문서 내에서 한번만 사용할 수 있는 유일한 속성 값입니다.


class 선택하기


class 속성값을 이용하여 요소를 선택합니다. class 속성은 문서내에서 여러번 설정을 할 수 있는 그룹과 같습니다.


테그선택


html 테그명을 이용하여 요소를 선택합니다. main 테그를 제외한 테그들은 하나의 문서내에서 여러개를 사용할 수 있습니다. 따라서 테그명을 이용하여 지정하는 경우에는 복수의 요소들이 선택됩니다.

[상태] 선택

후손/자손

자손

자신의 요소 바로 아래에 있는 하나의 요소를 말합니다.

자손을 선택할때에는 >를 사용합니다.

후손

자신의 요소 아래에 있는 모든 요소들을 말합니다.

후손을 선택하기 위해서는 스페이스로 구분을 합니다.

속성 선택

속성 선택은 []를 통하여 지정을 합니다.

속성 선택

속성을 통하여 선택을 합니다. 속성명만을 입력하는 경우, 해당 속성이 부여된 모든 요소를 선택하게 됩니다.

<style>
    [title] {
        color:red;
    }
</style>

속성값 선택

속성이 적용된 요소 중에서 특정한 값이 있는 요소만을 선택합니다.

<style>
    [title=heading] {
        color:red;
    }
</style>

테그와 중복

테그와 속성을 동시 조건으로 선택을 할 수 있습니다.

<style>
    h1[title=heading] {
        color:red;
    }
</style>

테그명과 속성[]을 붙여서 사용합니다.