(CSS) 속성 선택자

선택자{속성:속성-값;}

메인 셀렉터

-유형 선택

이름을 연결

웹 페이지 전체에 일관되게 적용해야 할 때 사용합니다.

– ID 선택기

#아이디이름

특별해야 해

모든 HTML에는 하나만 있어야 합니다.

-클래스 선택

.클래스 이름

복제가 가능합니다.

다른 태그에도 동일한 클래스를 사용할 수 있습니다.

두 개의 태그를 사용할 수 있습니다.

/* Type Selector*/
h1{background-color : red;}

/* ID Selector*/
#container{background-color : blue;}

/* Class Selector*/
.top{background-color : green;}

속성 선택자

적절하게 일치하는 경우 적용됩니다.

• 태그 이름(속성)
• 태그 이름(속성 = 속성 값)

/* 태그이름(속성) */
input(name){background-color: red;}

/* 태그이름(속성=값) */
input(type="text"){background-color: blue;}

부분 일치도 선택할 수 있습니다.

• 태그이름(속성^=속성값)

속성 값으로 시작합니다.

• 태그 이름(속성 $=속성 값)

속성 값으로 끝납니다.

• 태그이름(속성*=값)

적어도 속성 값을 포함합니다.

/* 태그이름(속성^=값) */
a(href="http:"){background-color: aqua;}

/* 태그이름(속성$=값) */
a(href=".com"){background-color: green;}

/* 태그이름(속성*=값) */
a(href="google"){background-color: purple;}