[CSS] 기본

[CSS] 기본

[선택자] NexTree(http://www.nextree.co.kr/p8468/ ) <== 아주 잘 설명되어 있음

           반드시 기억해야 하는 CSS 선택자 30개

- Rule Set

선택자 { 선언: 속성; }

Ex> p { color: red; }

[선택자 (Selector) 종류]

- 전체 선택자 : * : CSS Level 2

HTML페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용

* { margin: 0; text-decoration: none; }

- 태크 선택자 : tag name : CSS Level 2

HTML요소를 직접 지칭

p { background: yellowgreen; color: darkgreen; }

- 클래스 선택자 : class name : CSS Level 1

class속성값으로 가진 HTML요소

.class1 { background: yellowgreen; color: darkgreen; }
div.class2 { background: darkgreen; color: yellowgreen; }

- ID 선택자 : id : CSS Level 1

class속성값으로 가진 HTML요소

#id1 { background: yellowgreen; color: darkgreen; }
div#id2 { background: darkgreen; color: yellowgreen; }

- 복합 선택자(Combinator) :  

두 개 이상의 선택자 요소가 모인 선택자

하위 선택자 - parent_selector below_selector : CSS Level 1 : 해당 하위 선택자 대상

자손 선택자 - parent_selector > son_selector : CSS Level 2 : 해당 자손 선택자만 대상

일반 형제 선택자 - elder_selector ~ younger_selector : CSS Level 3 : 하위 동생 선택자 대상

인접 형제 선택자 - elder_selector + adjacient_selector : CSS Level 2 : 인접 동생선택자만 대상

/* 하위 선택자 */
section ul { border: 1px dotted black; }

/* 자식 선택자 */
section>ul { border: 1px dotted black; }  

/* 인접 형제 선택자 */
h1+ul { background: yellowgreen; color: darkgreen; }

/* 일반 형제 선택자 */
h1~ul { background: darkgreen; color: yellowgreen; }  

태그들이 포함 관계를 가질 때

부모 요소 - 포함하는 요소

자식 요소 - 포함되는 요소

형제 관계 - 같은 부모 요소를 가지는 요소들

형요소 - 먼저 나오는 요소

동생요소 - 나중에 나오는 요소

하위 선택자 - 부모 요소에 포함된 '모든' 하위 요소가 대상

자식 선택자 - 부모의 바로 아래 자식 요소만 대상

인접 형제 선택자 - 첫번째 동생 요소가 대상 <형 요소에는 적용되지 않음>

일반 형제 선택자 - 조건을 충족하는 모든 동생 요소<형 요소에는 적용되지 않음>