계단식 및 상속

WEB/CSS

gartenhh 2021. 7. 20. 13:29

CSS는 Cascading Style Sheet의 약자다. 이름에서도 알 수 있듯이, CSS에서 cascading은 매우 중요하다.

계단식(cascade)과 우선순위(specificity), 상속(inheritence) 개념에 대해 알아보자

계단식(cascade)

CSS에서 동일한 우선순위를 가지는 서로 다른 규칙들이 적용된다면, 마지막에 나오는 규칙이 사용된다.

h1{
    color: purple;
}
h1{
    color: magenta;
}
h1{
    color: pink;
}

위와 같은 코드에서 h1은 핑크색이 된다.

동일한 요소에 대한 여러 규칙에 다른 선택자가 있는 경우, 브라우저가 어떤 규칙을 적용하는지 정하는 방법이다. 일반적으로 선택자의 선택이 구체적일수록 우선순위가 높다.

부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속되며, 일부는 그렇지 않다.

요소에 color와 font-family를 설정하면 설정을 직접 바꾸지 않는 한 해당 요소 내부의 모든 요소에도 같은 스타일로 적용된다. 그러나 width, 마진, padding, 테두리와 같은 일부 속성은 상속되지 않는다.

CSS에서는 상속을 제어하기 위한 4가지 특수 범용 속성 값을 제공한다.

inherit: 선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정한다.

initial: 선택된 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에 있는 해당 요소 속성의 설정값과 동일하게 설정한다.

unset: 속성을 natural 값으로 재설정. 속성이 자연적으로 상속되면 inherit된 것처럼, 아니면 initial처럼 작동한다.

revert

CSS 속기 속성을 all로 사용하면 상속 값(inherit, initial, unset, revert)들 중 하나을 모든 속성에 적용할 수 있다.

중요도의 순서는 다음과 같다.

소스 순서 : 동일한 가중치를 갖는 규칙이 여러개인 경우, CSS에서 마지막에 오는 규칙이 우선한다. (앞의 규칙을 덮어쓴다)

우선순위(specificity) : 구체적인 규칙이 더 높은 우선순위를 갖는다. 요소의 기본 스타일을 정의한 뒤, 특정 요소에 대해 class를 만들어 스타일을 지정해주는 방식으로 쓰인다.

브라우저가 우선 순위를 계산하는 방식은 다음과 같다.

단, 낮은 우선 순위의 선택자가 아무리 많아도 높은 우선 순위의 선택자를 덮어쓸 수는 없다. 특정 순위에서 동일한 우선순위를 갖는 경우에만 낮은 우선순위의 선택자가 영향력을 발휘한다.

!important : 특정 속성과 가치를 가장 구체적으로 만들어서 일반적 규칙을 무시하기 위해 쓰인다. !important를 재정의하기 위해서는 같은 우선 순위를 가지거나 다른 고유한 선언에 또다른 !important 선언을 포함해야 한다.

가급적 사용하지 않는 것이 좋다.