Cascading
Cascading은 위에서 아래로 흐르는, 종속하는 이라는 뜻으로 Cascading은 CSS에서 중요한 스타일 적용 규칙이다.
폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말하는데, 우선순위가 높은 규칙일수록 우선적으로 적용된다.
예시에서 div에는 글자색으로 red를 지정하고, p에는 글자색을 purple로 지정하면 text의 글자색은 무엇이 될까?
text의 글자색은 Cascading에 따라 purple이 되는데 세 가지의 원칙을 알아보자.
Cascading은 다음과 같은 세 가지의 원칙을 통해 스타일을 적용할지 결정한다.
1. 선언 순서
2. 명시도
3. 상속
선언 순서
스타일 규칙이 동일한 특정도를 가질 때, 마지막에 선언된 규칙이 이전 규칙을 덮어쓴다. 스타일 규칙은 CSS 파일이나 <style> 요소에서 선언된 순서대로 적용된다.
명시도
여러 CSS 규칙이 동일한 요소에 적용되는 경우, 스타일 규칙의 특정도에 따라 어떤 스타일이 우선적으로 적용된다. 명시도는 선택자의 복잡성 및 명시성과 관련이 있다. 더 구체적인 선택자는 더 높은 특정도를 갖으며 우선한다.
상속
일부 CSS 속성은 부모 요소에서 자식 요소로 상속된다. 예를 들어, 부모 요소에 대한 글꼴 스타일을 설정하면 자식 요소에도 적용될 수 있다. 이것은 글꼴 크기, 글꼴 색상, 줄 높이 및 기타 스타일 속성에 적용된다.
position
CSS의 position 속성은 요소의 위치를 지정하는 데 사용된다. 요소를 문서 상에 어떻게 배치할지를 결정하는 속성이다.
static
요소의 기본 값이다. 이 값은 일반적으로 명시적으로 설정하지 않을 때 자동으로 지정된다.
relative
요소를 기본 위치(static)에서 상대적으로 이동시킨다. 이때 요소의 원래 자리는 그대로 차지한다.
absolute
요소를 가장 가까운 상위(relative, absolute, 또는 fixed 위치된 조상 요소)를 기준으로 위치시킨다. 상위 요소 중에서 position이 static이 아닌 첫 번째 조상을 기준으로 한다. 만약 이러한 조상이 없다면 문서(body)를 기준으로 위치된다. 이때 요소의 원래 자리는 차지하지 않는다.
fixed
요소를 뷰포트(Viewport)를 기준으로 위치시킨다. 스크롤을 하더라도 화면에 고정된다. 주로 화면 상단에 고정된 메뉴(내비게이션)나 광고 등을 만들 때 사용된다.
sticky
static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다. 기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.
z-index값
앞뒤 순서를 정할 때 쓰는 값이다. 단위없이 사용하며 값이 높을수록 화면 앞쪽으로 위치한다. 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 위치한다.
사진 출처
https://scriptoplankton.hashnode.dev/position-property-in-cascading-style-sheets
