CSS

우리가 CSS를 배우기 위해서 가장 먼저 해야할 것은 이름의 뜻을 파악하는 것이다.

Cascading Style Sheets

Cascading이란 폭포를 뜻한다.

여기서 CSS에는 어떤 의미로 적용되냐?

HTML 요소들은 하나 이상의 CSS 스타일에 영향을 받을 수 있다.

그 말은 즉, 우리가 <h1>Welcome</h1> 이라는 HTML 요소에 글씨 크기를 조절하는 스타일, underline의 스타일 + 주황 배경색을 적용한다고 하면 이미 3가지의 스타일링에 영향을 받는 것이다.

이런 특성 때문에 어떤 스타일을 적용 받을지에 대한 우선순위에 대한 결정이 중요한 역할을 한다.

이를 Cascading(캐스캐이딩)이라고 한다.

Cascading의 3가지 요소

Cascading을 결정하는 3가지 요소가 있다.

위의 숫자에 따라서 중요도가 다른데, 이를 그림으로 표현한다면 다음과 같다.

늦게 선언된 스타일일 수록 우선 적용이된다.

실제로 우리가 CSS 코드를 짜면 가장 쉽게 접할 수 있는 Cascading 특성이고 Cascading에 대한 오류도 코드 순서에 의해 발생하는 경우가 많다.

예를 들어

이와 같은 html 코드가 있다고 하면

이렇게 span 태그에 aqua 색이 적용된 것을 볼 수 있다.

하지만 밑에서

id 를 부여하고 선택자로 색을 brown으로 변경하게 된다면 cascading 한 속성을 무시하고 brown 색이 적용된다.

[CSS] CSS Display 속성 (block, inline, inline-block) (0)	2020.10.04
[CSS] Box Modeling에 필요한 모든 것(margin, padding, border) (0)	2020.10.04
[Javascript-Core] 자바스크립트의 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해서 알아보자. (0)	2020.07.31
[Javascript-Core] 함수 내부에서의 this와 우회 방법 그리고 화살표 함수의 this (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(3) (2)	2020.07.28
[Javascript-Core] 메서드 내부에서의 this 그리고 함수와 메서드의 차이점 (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(2) (5)	2020.07.28