[프런트] CSS Cascading에 대해 설명해주세요

✅ 추천 구조 (실전용)
1. 한 줄 결론 → 질문에 대한 직접 답
2. 이유/근거 (1~2개) → 왜 그렇게 생각하는지
3. (선택) 예시 or 경험 → 신뢰도 상승

결론: ~입니다.(한 줄 결론 → 질문에 대한 직접 답)
이유: 왜냐하면 ~ 때문입니다.
보충: 추가로 ~ 특징이 있습니다.
예시/경험: 실제로 ~ 해봤습니다.
정리: 그래서 ~라고 볼 수 있습니다.

- 마무리 애매하면 감점 느낌 남
- 모른다고 끝내면 안 됨, 아는 선까지 말하기

---

1차 답변 (안 찾아보고 답변, 틀림)

1. 한줄 결론

CSS Cascading은 부모에게 준 style이 자동으로 자식에게 적용되는 CSS의 특징을 일컫는 말입니다. 

 

2. 이유

- CSS의 앞글자 C 자체가 Casacding의 약자라, CSS의 가장 큰 특징이라고 볼 수 있습니다.

- 해당 특성 덕분에 스타일링 해줘야 하는 양이 획기적으로 줄어들 수 있습니다

 

3. 예시

예를들어 card-container라는 클래스의 div 태그 안에

card-title, card-body, card-footer라는 클래스의 자식 div 태그가 있는 구조라고 합시다

 

CSS에 Cascading이라는 특성이 있기에

자식 div 일일이 css를 적용하기보다

부모 card-container div에 css를 적용해서 
한번에 스타일링을 해줄 수 있습니다.

 

4. 정리

정리하자면, cascading은 css의 가장 큰 특징으로,

부모의 스타일이 자식에게 물려지는 형태를 칭하는 말입니다. 

 

2차 답변 (찾아보고 답변)

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction

Introduction to the CSS cascade - CSS | MDN

1. 한줄 결론

CSS Cascade는 다양한 곳에서 어떠한 element의 스타일을 정의할때

무엇을 우선순위로 둘지 정해주는 알고리즘입니다. 

 

2. 이유

- CSS가 Cascading style sheet인 만큼, casacde 알고리즘은 css의 큰 비중을 둡니다.

    왜냐하면 element 기준으로 다양한 곳에서 style을 지정해주기 때문입니다. 

    부모의 style, 자식의 style, 해당 element 내에서는 id정의, class 정의, important 등등... 
    다양한 곳에서 정의하고 충돌이 나는데
    CSS는 그 중 하나를 선택해줘야하기 때문이죠

- Cascading 순위를 따지는 흐름은 다음과 같습니다:

    Importance -> Origin -> Specificity -> 선언순서

Importance	transition > !important
Origin	개발자 CSS > 사용자 스타일 >  browser 기본
Specificity	inline > id >class > element(tag)
선언순서	위에까지 같은 순위이면 나중에 쓰인것이 이

 

3. 예시

- 가장 잘 사용되는 곳이 reset.css이겠습니다. 

모든 프로젝트에서 broswer기본 스타일을 지우기 위해서

cascade상으로 더 높은 우선순위를 가지는 개발자 css에서 reset을 해줍니다.

 

- 클린하지 않은 예시긴 하지만 같은 element가 id로, class로, 태그로 

스타일이 정의되어 있으면

id에 정의되어 있는 스타일이 지정되는것을 예시들수 있겠습니다

 

4. 정리

그래서 casacde는 충돌하는 style 정의중 어떤 것을 사용할지 지정해주는

CSS의 근간이 되는 알고리즘이라 할 수 있겠습니다.