CSS의 Cascading 이란?
CSS 는 Cascading Style Sheet의 약자이며 Cascading은 위에서 아래로, 즉 상속이라는 뜻을 가지고 있음.
개발자 도구에서 확인해보면 위에있는 css규칙이 아래를 덮어쓴것을 확인할 수 있는데 이와 같이 같은 요소에 대해 여러개의 스타일이 중복될 경우 스타일 우선순위와 스타일 상속을 통해 어떤 스타일을 적용할지 결정하는 것이 Cascading이다.
스타일 우선 순위
1. 중요도 Importance
: 중요도에 따른다는 것은 스타일이 선언된 위치에 따라 즉, styesheet 종류에 따라 우선순위가 매겨진다는 것
: styesheet는 작성자(author), 사용자(user), 사용자 도구(user agent)가 작성한 세 종류로 나뉘고, 작성자 styesheet > 사용자 styesheet > 사용자 도구 styesheet 와 같이 우선순위가 결정됨
💡 중요도 명시하기 (
!important)
- 일반적인 순서는 위와 같지만 만약 의도적으로 중요도를 끌어올리고 싶다면 를 사용함
- 중요도를 끌어올리고자하는 속성 뒤에 를 붙여주는 방식으로 사용
- 하지만 스타일 디버깅을 복잡하게 하므로 가급적 사용하지 않는 것을 권장
ex) `속성: 속성값 !important;`
만약 작성자의 stylesheet와 사용자의 stylesheet에 모두 가 적용된다면 기본 우선순위를 따름. 즉 가 적용된 우선순위는 아래와 같음
!important 작성자 styesheet > !important 사용자 styesheet > 작성자 styesheet > 사용자 styesheet > 사용자 도구 styesheet
2. 명시도 Specificity
-
우선순위를 결정하는 두 번째 요소는 명시도로, 선택자의 복잡도에 따라 명시도가 다르고 명시도에 따라 우선순위가 다름. 즉, 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 준다는 것
-
명시도에 따른 우선순위는 인라인 > id > class > 태그 순서
-
태그의 속성으로 직접 style을 지정하는 인라인은 하나의 태그에서만 적용되므로 그 우선순위가 가장 높고, id는 문서 내에서 한 번만 등장하므로 비교적 좁은 범위를 가지게 됨. class는 여러 번 쓰이므로 넓은 범위를 갖고 태그는 문서 내 모든 태그를 지칭하므로 그 범위가 제일 넓음
3. 코드 순서 Source Order
- 우선순위의 마지막 요소는 코드 순서로, 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다는 것
스타일 상속
-
스타일 상속은 태그들이 어떻게 포함되었는지에 따라서 스타일을 적용할 지 결정하는 원칙
-
스타일 상속에 따라 부모 요소의 스타일을 자식 요소가 따라가게 되기 때문에 부모 요소에만 style을 적용해도 자식요소에도 적용됨
Position
: position 속성의 종류로는 static, relative, absolute, fixed, sticky 가 있음
1. static
- static은 기본위치로, 요소가 원래 있어야 할 위치인 HTML에 작성된 순서 그대로 브라우저 화면에 표시됨
top,bottom,left,right,z-index속성이 적용되지 않음
2. relative
- relative는 요소가 평소 위치에서 제거되지 않고, 평소위치에 상대적으로 배치됨
top,bottom,left,right속성을 이용해서 평소 위치로부터 지정된 값 만큼 이동 가능
3. absolute
- absolute는 해당 요소의 조상 요소들 중 position이 static이 아닌 가장 가까운 조상 블록을 기준으로 (없다면 최상위 블록 기준) 배치됨
- 평소 위치에서 제거되어 요소의 원래 자리는 차지하지 않음
top,bottom,left,right속성을 이용해서 position이 static이 아닌 가장 가까운 조상 블록을 기준으로 위치 지정 가능
4. fixed
- fixed는 평소 위치에서 제거되어 브라우저 전체 화면을 기준으로 지정된 위치에 배치됨. 즉, 스크롤해도 화면 기준 지정된 자리에서 움직이지 않음.
- 주로 navigation과 같은 요소를 만들때 사용하나, 평소 위치에서 제거되기 때문에 다른 요소와 겹치지 않도록 주의해야함
5. sticky
- sticky는 지정해준 값을 넘을 때 까지는 static, 이후에는 fixed가 되는 속성
- 기본적으로 static 처럼 배치되기 때문에 기존 배치에서 자리를 차지함.
top,bottom,left,right로 위치조정이 가능하고, 부모 요소안에 갇혀있기 때문에 화면 기준 지정된 위치에 닿았더라도 부모블록 경계에 갇혀 더 이상 화면에 고정되지 않고 움직이게 됨
