[2주차] 위클리 페이퍼 - CSS의 Cascading에 대해 설명해주세요.

CSS Cascading의 정의

CSS Cascading은, 여러 규칙이 동일한 요소를 대상으로 할 때 브라우저가 어떤 스타일 규칙을 적용할지 결정하는 과정을 의미한다.

CSS Cascading의 주요 요소

Cascading의 주요 요소로는 Specificity, Importance, Source Order로 나뉘게 된다. 첫번째로 Specificity는, 더 구체적인 선택자를 가진 CSS 규칙이 덜 구체적인 규칙보다 우선권을 가지는 것을 의미한다. 예를 들어, ID 선택자(#header)는 클래스 선택자(.header)보다 더 구체적이므로, 둘 다 같은 요소에 적용될 경우 ID 선택자가 클래스 선택자를 덮어쓰게 된다. 두번째로 Importance는, !important로 표시된 스타일은 덜 구체적이더라도 다른 모든 스타일보다 우선권을 가지는 것을 의미한다. 단, 이 키워드는 순서에 상관 없이 우선권을 부여하므로, 소스의 순서를 꼬이게 만드는 원인이 될 수 있다. 절대적으로 필요한 경우가 아니라면, 피해야 할 키워드이다. 세번째로 Source Order는, 같은 Specificity와 Importance를 가질 때 규칙이 정의된 순서가 중요함을 의미한다. 나중에 정의된 규칙(CSS 파일에서 더 아래쪽에 위치하거나 나중의 <style> 블록에 있는 규칙)이 이전 규칙을 덮어쓰게 된다.

CSS의 작동 순서

CSS의 작동 순서는 다음과 같다:

1. !important > 인라인 CSS > 내부 CSS > 외부 CSS > 브라우저/사용자 스타일
2. !important: 소스에 관계없이 최고 우선순위를 부여
3. 인라인 스타일: !important에 의해 덮어쓰이지 않는 한 다음 우선순위를 부여
4. 내부 CSS: 해당 문서에만 적용되는 <style> 태그 내의 스타일
5. 외부 CSS: HTML 문서에 연결된 외부 CSS 파일의 스타일로, 여러 페이지에 전역적으로 적용
6. 브라우저/사용자 스타일: 기본값 또는 사용자 정의 환경설정

CSS Rule Overriding

CSS에는 Rule Overriding이라는 것이 존재한다. 이는 동일한 요소에 둘 이상의 스타일이 적용되어, 한 스타일이 다른 스타일을 이기는 경우에 발생한다. 이런 상황은 이미 스타일을 제공한 요소에 대해 스타일 속성을 제공한 경우에 발생한다. 예를 들어, 외부 CSS를 사용하여 요소에 스타일을 제공했는데, 나중에 CSS를 변경해야 하지만 코드를 어디에 작성했는지 찾을 수 없는 경우가 생긴다. 이 때, 최고 우선 순위를 가진 인라인 CSS를 이용하여 스타일을 덮어쓸 수 있게 된다. 참고로, Java에도 Overriding이라는게 있는데, 그것과는 다른 의미를 갖는다. Java는 Method의 이름이 같고, Type 변환이 호환되는 것이라보면 된다. CSS에서는 위에서 적용한 스타일을 밑의 코드에서 가져다 쓸 수 있음을 의미한다.

참고자료

• https://www.geeksforgeeks.org/css/what-does-the-cascading-portion-of-css-means/