스타일의 Cascading와 Specificity

Cascade : 폭포처럼 위에서 아래로 흐르는 물

main에 .top-sec을 타고 .filter-box를 타고 또타고...

Cascade의 사전적인 의미는 폭포처럼 흐르는 물이란 뜻으로

CSS의 C는 Cascading Style Sheet로 폭포처럼 흐르는 스타일 문서라고 해석할수있겠다.

 

막무가내로 적는다고 스타일링되는것이 아니고 나름의 규칙이 있다.

스타일은 상속된다

출처 - 은서쌤의 강의자료(....를 가져왔습니다 허락해주세요 🙏)

부모요소에 적용된 스타일이 자식에게도 상속이 되는데

모든 스타일이 상속되는것은 아니다.

그러나 만약 강제로 상속시키고 싶다면 inherit; 값을 주는 방법도 있다!

 

 

 

캐스케이딩에도 점수가 있다?

이미지 출처 : https://velog.io/@khsfun0312/CSS-선택자-우선순위

기본적으로 CSS는 뒤에있는 코드일수록 우선순위를 가지게 되는데, 그렇다고 무조건 1등인것은 아니다.

⭐️명시도, 중요도도 같이 고려해서 우선순위(Specificity)가 정해진다⭐️

 

위 그림은 명시도순으로 점수를 매긴 자료인데 (절대적인 점수는 아니다!)

가장 강력한것은 !important로 1만점이나 가져간다.

2순위 인라인 스타일로 html내에서 정의하면 1000점!

3순위 id선택자, 그뒤로 class, tag, * 선택자 순으로 점수를 가져가고 이 점수를 환산해 우선으로 적용되게 된다.

!important는 명시도는 물론 중요도로서도 가장 1순위로 정의되기때문에 남발해서는 절대 안된다고 MDN 공식문서에서도 나와있으니

쓰는것은 왠만하면 삼가하도록 하자!

 

참고자료

https://azurealstn.tistory.com/132
https://velog.io/@khsfun0312/CSS-선택자-우선순위

[CSS] Cascading 이해하기! 추가로. ::before, ::after

 

 

 

 

 

 

오늘의 실습과제 📚

오늘의 과제!

 

 

See the Pen Untitled by 배근영 (@lyla-bae) on CodePen.

 

progress-bar 라는 키프레임을 만들어
0%일때는 width를 0

50% 진행했을때는 100%로 만들어 기본적인 progress bar을 만들었고

거기서 자연스럽게 사라지는것도 구현했어야했기에
opacity값을 활용해 기본값 1에서
75%쯤 진행했을때 0으로 만들어주었다.

100%가 아닌 이유는 opacity가 0이 되고나서 여유시간을 주는게 자연스러운 애니메이션을 주었기때문이다

 

또한 예시화면을 보면 묘하게 easing이 들어가있는거같아

animation을 적용할때 같이 적용해보았다

animation: progress-bar 12s ease-in-out infinite;

 

 

또한 bar에 hover을 하면 페이지 아래에 loader4라는 박스가 하나 나오게 해야하는데

이또한 bottom값을 조절하고 transition속성으로 손쉽게 구현이 가능했다!

 

오랜만에 animation 구현하려니까 헷갈리는 부분이 있긴했지만 재밌었던거같다.

본격 JS 들어가면 얼마나 힘들지,,, 지금을 즐기자,,,,,, 😂