TIL 14 | CSS 우선순위, CSS 스크롤 효과, Position sticky와 fixed 차이

CSS 우선순위

구체적인 것이 포괄적인 것보다 우선순위가 높다. 포괄적인 것으로 전체적인 디자인을 하고 구체적인 것으로 세부적인 것을 디자인 하기 위함이다. css 적용 우선순위는 다음과 같다. 참고자료

1. !important
모든 우선순위를 무시하고 적용된다. 디자이너-개발자 간의 커뮤니케이션시 중요한 속성임을 알리는 뜻으로 사용되기도 한다.

2. 인라인 스타일
HTML에서 태그 내부에 스타일을 지정한 것

• 인라인 스타일 > 내부 스타일(HTML 내부 별도 영역의<style> > 외부 스타일(css파일을 link하는 방법) > 브라우저 기본값

3. #id

4. .class, :pseudo-selectors

5. a, h1같이 태그이름으로 지정한 속성

6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다.

---

CSS 스크롤 설정

네비게이션을 클릭하여 특정 위치로 이동하는 효과를 찾아보다가, 과거에는 자바스크립트로만 할 수 있었던 스크롤 효과를 CSS로 설정할 수 있게 되었음을 알게 되었다. 3가지 스크롤 효과에 대해 알아본다.

1. 부드러운 스크롤 효과

네비게이션 바에 a태그를 걸고, 앵커를 클릭하여 페이지 내의 특정 위치로 이동하게 할 수 있다. 이동시 스크롤을 부드럽게 만들고자 할 때는 다음의 CSS property를 사용할 수 있다. MDN문서

scroll-behavior:smooth;
scroll-behavior:auto;
아쉽게도 자바스크립트 없이 CSS만으로는 속도나 애니메이션 방식을 조절할 수 없다.

2. 스크롤 영역 제한

참고자료
MDN

스크롤링 체인 (Scrolling Chain)

기본적으로 자손 요소에서 스크롤 하다가 영역의 끝에 다다르면 조상 요소를 스크롤 하게 된다. 페이지 구석에 상담 채팅창이 조그맣게 띄워져 있는데, 채팅창 내부에서 스크롤이 끝에 다다르면 그 이후부터는 페이지 전체가 스크롤되는 것이다.

overscroll-behavior

이를 CSS의 overscroll-behavior property를 사용하여 제어할 수 있다.

/* Keyword values */
overscroll-behavior: auto; 
-> 브라우저 기본 값
overscroll-behavior: contain;
-> 현재 커서가 위치한 범위 바깥으로 스크롤이 연결되지 않음.
overscroll-behavior: none;
-> 현재 커서 위치 범위 뿐만 아니라 바깥의 스크롤 동작도 방지함. 터치 인터페이스를 사용해 좌우 방향으로 손가락을 쓸면 동작하는 네비게이션 이동 기능도 작동하지 않도록 방지한다고 한다. 의도치 않게 이동 기능이 동작할 경우의 불편함을 방지할 수 있다.

/* Two values */
overscroll-behavior: auto contain;

/* Global values */
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: unset;

3. 스크롤 스냅

원하는 위치에서 스크롤이 멈추도록 하는 기능. 마찬가지로 자바스크립트로 구현하던 기능을 CSS를 활용하여 구현할 수 있다.

참고자료 1
참고자료 2
MDN

용어

• Scroll Container : 스크롤 스냅이 발생하는 영역
• Snap Area : 스크롤 컨테이너 내부의 각 요소

Property & Value

• scroll-snap-type : 스크롤링 방향, 스냅 허용 정도

  • 스크롤링 방향
    x, y, block (=y방향), inline(=x방향), both
  • 스냅 허용 정도
    • mandatory : 항상 동작함. 중간에 걸치기 어려워짐),
    • proximity : 기본값. 스크롤 영역이 경계선 근처에 올 때만 동작함. 중간에 걸쳐둘 수 있다.)

• scroll-snap-align : 스크롤 조작을 마쳤을 때 이동할 위치가 영역의 어디를 기준으로 할 것인지 결정

  • none, start, center, end

• scroll-padding- : Scroll Container에 선언한다. 스크롤 영역의 padding이 적용됨. scrollport와 snapport의 위치를 조정할 수 있다

• scroll-margin- : Snap Area에 선언한다.

사용시 주의점

scroll-snap-type: mandatory

콘텐츠 간의 간격이 넓을 때 강제로 스냅을 하게 되면 중간 콘텐츠를 건너뛰고 다음 콘텐츠로 이동하는 경우가 발생하니 주의해야합니다.

---

Position Fixed VS Sticky

네비게이션 메뉴, 채팅 상담 버튼 등을 화면 스크롤을 하더라도 동일한 위치에 고정하여 계속 보여지게 하는 방법으로 position: fixed와 position: sticky를 떠올릴 수 있다. 이 둘의 차이에 대해 알아본다.

참고자료 1
참고자료 2
MDN

position: fixed

• 박스를 뷰포트에 고정하기 때문에 화면의 절대적인 위치로 존재한다.

• 부모요소에 영향받지 않는다.

position: sticky

• 박스를 scroll 박스(overflow: auto 또는 overflow: scroll 속성을 적용한 가장 가까운 조상 박스)에 고정하기 때문에 최초에 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 요소를 고정시킨다.

• scroll box를 기준으로top, right, left, bottom의 값을 적용한다.

• 뷰포트는 하나뿐이지만, scroll 박스는 문서 안에서 더 많이 생성할 수 있다.

• 부모요소에 overflow hidden 적용되어있으면 sticky도 동작하지 않는다.

이곳에서 예제를 직접 보면 뭐가 다른지 이해가 훨씬 쉽다
sticky 예제