CSS 상속과 캐스케이딩 - by. UXKM

2024-07-30

요약 설명
CSS 상속은 부모 요소에서 자식 요소로 일부 스타일 속성이 자동으로 전달되는 것을 의미합니다. 일반적으로 텍스트 관련 속성에 적용되며, 부모 요소에서 설정된 스타일이 자식 요소에 적용됩니다.

캐스케이딩은 여러 CSS 규칙이 동일한 HTML 요소에 적용될 때 우선순위를 결정하는 방식으로, 중요도, 명시도, 소스 순서를 기준으로 합니다. 이를 통해 스타일 충돌 시 우선 적용되는 스타일을 결정할 수 있습니다.

상속은 부모 요소에서 자식 요소로 스타일을 전달하는 개념이며, 캐스케이딩은 여러 스타일 규칙이 동일한 요소에 적용될 때 우선순위를 결정하는 방식입니다. 이러한 개념을 이해하면 CSS를 보다 효율적으로 활용할 수 있습니다.

상속(Inheritance)

상속(Inheritance) 요약 설명

CSS의 일부 속성은 부모 요소에서 자식 요소로 상속됩니다. 이는 자식 요소가 부모 요소의 일부 스타일을 자동으로 상속받게 됨을 의미합니다.

일반적으로 텍스트 관련 속성(글꼴, 글자 크기, 색상 등)은 상속됩니다. 예를 들어, 부모 요소에 font-family: Arial; 속성이 적용되어 있다면 자식 요소에도 동일한 글꼴이 적용됩니다.

하지만 모든 속성이 상속되는 것은 아닙니다. 배경 이미지, 너비, 높이와 같은 레이아웃과 관련된 속성은 일반적으로 상속되지 않습니다.

inherit(상속) 키워드

현재 요소가 상속해야 하는 속성 값을 부모 요소의 속성 값으로 설정합니다.
예를 들어, 텍스트의 크기를 상속하려면 font-size: inherit;와 같이 사용할 수 있습니다.

								p {
									font-size: 16px;
								}
								p span {
									font-size: inherit; /* 부모 요소(<p>)의 text-align 속성을 상속 */
								}

initial(초기) 키워드

속성을 해당 속성의 초기값으로 설정합니다.
즉, 요소의 스타일을 초기화하여 브라우저의 기본 스타일을 사용합니다. 예를 들어, color: initial;을 사용하면 텍스트 색상이 브라우저의 기본값으로 설정됩니다.

								p {
									color: green;
								}
								p span {
									color: inherit; /* 부모 요소(<p>)의 color 속성을 상속하지 않고 브라우저의 기본값으로 설정 */
								}

unset 키워드

상속된 속성의 경우 inherit과 동일하게 작동하고, 상속되지 않은 속성의 경우 initial과 동일하게 작동합니다.
즉, 상속된 속성은 부모 요소의 값으로 설정되고, 상속되지 않은 속성은 초기값으로 설정됩니다.

아래 예제를 보면, 자식 요소(<span>)는 부모 요소(<p>)의 폰트 크기와 텍스트 색상을 상속받지만, 줄 높이와 텍스트 정렬은 초기값으로 설정됩니다.

								p {
									font-size: 16px;
									color: green;
								}

								p span {
									/* font-size, color는 상속된 부모 요소의 값으로 설정 */
									font-size: unset;
									color: unset;

									/* line-height, text-align은 부모에게 상속되지 않기 때문에 초기값으러 설정 */
									line-height: unset;
									text-align: unset;
								}

revert 키워드

특정 속성의 모든 값을 해당 속성의 초기값으로 되돌립니다.
이는 initial과는 다르게, 상속 여부에 관계없이 모든 속성을 초기값으로 설정합니다.

								p span {
									color: revert; /* 상속 여부와 관계 없이 특정 속성을 초기갑으로 설정 */
								}

all 키워드

모든 속성을 한 번에 설정하는데 사용됩니다.
따라서, all: inherit;은 모든 스타일을 부모 요소의 값으로 상속시키고, all: initial;은 모든 스타일을 초기값으로 설정합니다.

								body {
									/* Global values */
									all: initial;
									all: inherit;
									all: unset;

									/* CSS Cascading and Inheritance Level 4 */
									all: revert;
								}

캐스케이딩(Cascading)

캐스케이딩(Cascading) 요약 설명

캐스케이딩은 여러 CSS 규칙이 동일한 요소에 적용될 때 우선순위를 결정하는 방식입니다.

캐스케이딩의 우선순위는 중요도(Importance), 명시도(Specificity), 소스 순서(Source Order) 세 가지 기준에 의해 결정되며, 스타일 규칙이 충돌할 때 어떤 스타일이 우선적으로 적용되는지를 결정합니다.

캐스케이딩은 다양한 CSS 규칙들 사이의 우선순위를 이해하고, 원하는 스타일을 적용하는 데 도움을 줍니다.

중요도(Importance)

속성 값 뒤에 !important 키워드가 있는 경우, 해당 속성은 다른 모든 것보다 우선시됩니다.
일반적으로 !important 키워드는 사용을 지양해야 하며, 오버라이딩¹⁾을 어렵게 만들어 코드를 복잡하게 할 수 있습니다.

1) 오버라이딩이란?
동일한 요소에 여러 스타일 규칙이 적용될 때, 더 나중에 선언된 규칙이 이전에 선언된 규칙을 덮어씁니다.
같은 속성에 대해 나중에 선언된 스타일이 먼저 선언된 스타일을 덮어씌워 특정 요소에 적용된 스타일을 변경하거나 재정의할 수 있습니다.

명시도(Specificity)

CSS 규칙의 선택자가 구체적일수록 우선순위가 높습니다.
명시도는 일반적으로 다음과 같은 순서로 결정됩니다.

인라인 스타일
HTML 요소에 직접 적용된 스타일은 가장 높은 명시도를 갖습니다.
ID 선택자
#으로 시작하는 ID 선택자가 클래스 선택자보다 우선합니다.
클래스, 속성, 가상 선택자
.className, [attr], :not() 등과 같은 선택자가 일반 요소 선택자보다 우선합니다.
요소 선택자
HTML 요소의 이름으로 된 선택자는 가장 낮은 명시도를 갖습니다.

소스 순서(Source Order)

동일한 중요도와 명시도를 가진 규칙의 경우, 더 아래에 나오는 규칙이 더 높은 우선순위를 갖습니다.
따라서 소스 코드에서 더 나중에 선언되어 있는 규칙이 더 마지막에 적용되어, 이전에 정의된 규칙을 덮어씁니다.