요소선택
css는 html에 속성으로 설정된 테그명, id, css등을 이용하여 선택할 수 있습니다.
id 선택하기
id 속성값을 이용하여 요소를 선택 합니다. id는 문서 내에서 한번만 사용할 수 있는 유일한 속성 값입니다.
class 속성값을 이용하여 요소를 선택합니다. class 속성은 문서내에서 여러번 설정을 할 수 있는 그룹과 같습니다.
html 테그명을 이용하여 요소를 선택합니다. main
테그를 제외한 테그들은 하나의 문서내에서 여러개를 사용할 수 있습니다.
따라서 테그명을 이용하여 지정하는 경우에는 복수의 요소들이 선택됩니다.
[상태] 선택
후손/자손
자손
자신의 요소 바로 아래에 있는 하나
의 요소를 말합니다.
자손을 선택할때에는 >
를 사용합니다.
후손
자신의 요소 아래에 있는 모든
요소들을 말합니다.
후손을 선택하기 위해서는 스페이스
로 구분을 합니다.
속성 선택
속성 선택은 []
를 통하여 지정을 합니다.
속성 선택
속성을 통하여 선택을 합니다. 속성명만을 입력하는 경우, 해당 속성이 부여된 모든 요소를 선택하게 됩니다.
<style>
[title] {
color:red;
}
</style>
속성값 선택
속성이 적용된 요소 중에서 특정한 값이 있는 요소만을 선택합니다.
<style>
[title=heading] {
color:red;
}
</style>
테그와 중복
테그와 속성을 동시 조건으로 선택을 할 수 있습니다.
<style>
h1[title=heading] {
color:red;
}
</style>
테그명과 속성[]
을 붙여서 사용합니다.