유권자

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


끝!