CSS: 3 구체성, 상속, 캐스케이딩
구체성(Specificity) 구체성: 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것 구체성의 값은 네개로 이루어짐. 제일 좌측에 있는 값이 클수록 높은 구체성을 갖는다. 0, 0, 0, 0 1, 0, 0, 0 : inline 스타일 0, 1, 0, 0: 선택자에 있는 모든 id 속성값 0, 0, 1, 0: 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스 0, 0, 0, 1: 선택자에 있는 모든 요소, 가상 요소 전체 선택자(*)는 0, 0, 0, 0을 갖는다 조합자는 구체성에 영향을 주지 않는다.(>,+) h1 { ... } /* 0,0,0,1 */ body h1 { ... } /* 0,0,0,2 */ .grape { ... } /* 0,0,1,0 */ *.bright { ... ..
CSS: 2 선택자
선택자(SELECTOR) CSS의 속성과 속성값을 어디에, 어느범위로 적용시킬지 택한다. 요소선택자(태그 선택자) h1 {color:yellow;} h2 {color:yellow;} h3 {color:yellow;} h4 {color:yellow;} h5 {color:yellow;} h6 {color:yellow;} 태그별로 적용시키는 경우. 쉼표(,)로 그룹핑이 가능하다. h1,h2,h3,h4,h5,h6{ color:yellow; } 선택자 & 선언 그룹화 가능 h1,h2,h3,h4,h5,h6{ color:yellow; font-size: 2em; background-color: gray; } 전체 선택자 *{ color:yellow; } 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용 ..
