유권자

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


끝!