1. 상속

상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받는다.

속성 중에는 상속이 되는 것과 되지 않는 것이 있다.

inHerited가 yes인 경우만 상속된다.

속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있다.

2. 캐스케이딩 (cascading)

엘리먼트는 다양한 CSS 선언의 영향을 받는다. 이 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 한다.

캐스케이딩에는 다음과 같이 세가지 규칙이 있다.

중요도 - css가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.

명시도 - 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아진다.

소스순서 - css 선언을 나중에 할수록 우선순위가 높아진다.

중요도

css는 다양한 위치에서 기술될수 있는데, 그 위치에 따라서 우선순위가 달라진다.

css가 기술될 수 있는 위치는 아래와 같고, 우선순위는 아래로 내려갈수록 높다. (저작자 CSS의 !important가 제일 높음)

• 브라우저의 CSS.

• 사용자 CSS 일반선언.

• 저작자 CSS 일반선언.

• 저작자 CSS의 !important.

3. 의사요소

의사(가상) 클래스

요소가 특정 상태가 되었을 때 요소를 선택한다.
의사 클래스의 종류는 이외에도 매우 다양하다.

.a:hover {

    요소 바로 위에 마우스 커서가 올라왔을 때에만 작동

}

.a:active {

    요소가 활성화 되었을 때만 작동

}

.a:focus {

    요소가 포커스를 받을 때만 작동
    input을 위해 입력창을 클릭했을 때라던가 등

}

.a:disabled {

    비활성 상태의 요소
    focus와 동일한 성격임

}

.a:nth-child() {

    형제 사이에서의 순서에 따라 요소를 선택
    동일한 요소중 ()내부의 순서의 요소만 선택

}

의사(가상) 요소

선택 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

#vrclass::after {

    요소 뒤의 의사 요소를 생성 추가
    content: "after 요소";

}

#vrclass::before {

    요소 앞의 의사 요소를 생성 추가
    content: "before 요소";

}

#vrclass::first-line {

    블록 레벨 요소의 첫번째 선에 스타일을 적용
    화면에 나타나는 가장 첫번째 줄에만 스타일을 적용한다.

}

#vrclass::first-letter {

    가장 첫번째 글자만 적용

}

#vrclass::marker {

    목록 기호의 스타일을 적용
    ol의 정렬 기호에만 스타일을 적용한다.

}

#vrclass::placeholder {

    input 요소의 플레이스홀더에만 스타일 적용

}

4. z-index

요소가 쌓이는 순서를 결정

값이 클 수록 더 앞에 위치한다.

z-index: 1;
z-index: 2;

0. 참고자료

생활코딩, 상속

생활코딩, 캐스케이딩

유노코딩, 입문자를 위한 CSS 기초 강의