📌 Cascading란?
CSS - Cascading Style Sheet
여러 스타일의 중복을 막기 위해 우선순위를 결정하는 것을 말합니다.
1. Cascading 결정하는 3요소
1-1. 중요도
1-2. 명시도
1-3. 코드 순서
1-1. 중요도
스타일이
선언된 위치에 따라 우선순위를 매깁니다.
<head>의 <style>
<head>의 <style> 내의 @import
<link>로 연결된 CSS 파일
<link>로 연결된 CSS 파일 내의 @import
브라우저의 기본 CSS
1-2. 명시도
셀렉터가 가리키는 것이 명확할수록 우선순위가 높습니다.
✨ !important > 인라인 > id > class / Pseudo Selector > tag > 상속
1-3. 코드 순서
늦게 선언된 스타일이 먼저 나온 스타일을 보다 최우선으로 적용됩니다.
위에서 아래로 적용됩니다.
📌 Position의 속성 및 특징
position은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.
top,left,bottom,right속성과 함께 사용됩니다.
position: static
👉 기본값으로 문서의 흐름대로 배치됩니다.
top,left,bottom,right속성의 영향을 받지 않습니다.
position: relative
👉 원래의 위치를 기준으로
top,left,bottom,right속성값에 따라 배치할 수 있습니다.
position: absolute
👉 상위 요소를 기준으로
top,left,bottom,right속성값에 따라 배치할 수 있습니다.
부모 요소(상위 요소)의 display를 relative로 지정해 주어야 합니다.
position: fixed
👉 뷰포트 기준으로 항상 고정된 위치에 배치할 수 있습니다.
이때,top,left,bottom,right은 브라우저 기준으로 해당 요소가 얼마나 떨어져 있는지를 결정합니다.
👉 요소가 일반적인 문서의 흐름에서 완전히 제외됩니다.
회면의 특정 위치에 고정되어 스크롤 해도 그 자리에 계속 배치되어 있습니다.
position: sticky
👉 지정된 스크롤 위치에 도달하기 전까지
static속성과 같지만, 뷰포트 기준으로 정해놓은 offset에 도달하게 되면fixed됩니다.
top,left,bottom,right중 하나를 필수적으로 지정해 주어야 합니다. (=offset)
👉 일반적인 문서의 흐름에 따라 움직입니다.
👉 콘텐츠마다 다른 정보를 고정해야 하는 경우 유용하게 사용할 수 있는 속성입니다.
