CSS 선택기
# 선택자
선택기는 특정 HTML 태그를 선택하는 데 사용됩니다.
선택기를 사용하여 특정 HTML 태그를 선택하면 선택한 태그에 원하는 스타일이나 스크립트를 적용할 수 있습니다.
ㅁ 선택자, 스타일 속성, 스타일 값을 아래와 같이 설정합니다.
h1 { /* h1 은 선택자입니다.
*/
color : green; /* color 은 속성입니다.
*/
} /* green 은 스타일 값 입니다.
*/
ㅁ 스타일 시트는 스타일 태그에 CSS 블록을 삽입하여 생성한 코드입니다.
<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color : green;
}
</style>
</head>
<body>
<h1> CSS 선택자를 공부합니다.
</h1>
</body>
</html>
ㄴ> h1 태그의 color style 속성에 style 값을 green으로 해주세요!
그 뜻은.
# 선택자 유형
ㅁ CSS 셀렉터는 스타일시트뿐만 아니라 자바스크립트에서도 많이 사용되기 때문에 일반적으로 사용되는 셀렉터의 종류가 너무 많다.
https://www.w3.org/TR/css/ 또는 구글을 참조하시면 편리합니다.
유형 | 모양 | 적용 예 |
전체 선택기 | * | * |
태그 선택기 | 징후 | h1 |
ID 선택기 | #ID | #ID |
클래스 선택 | .수업 | .헤더 |
자손 선택자 | 선택기 선택기 | 제목 h1 |
자손 선택자 | 선택기 > 선택기 | 제목 > h1 |