Scroll Indicator
article을 보다보면 스크롤을 내리는 일이 많아서 스크롤에 맞게 header에 진행 상황을 표시해주는 것을 종종 보곤 했는데, 평소에 그 기능을 어떻게 구현할 수 있을까 라는 의문점을 가지고 있었다.
외국의 문서들을 살펴보다가 좋은 글을 발견하여, 추후에 내가 그 기능을 만들 상황이 올 수도 있겠다 싶어서 글을 남겨본다.
우선 내가 발견한 scroll indicator를 만들 수 있는 방법은 두 가지 방법이 있다.
1. JavaScript 활용
2. only CSS
당연히 1번만 있겠거니 생각을 했었는데 2번의 오직 css만으로 scroll indicator 를 구현하는 글을 보고 깜짝놀랐다..
css 속성 중에서 @supports를 이용하여 구현하는 것이었다.
평소 @keyframes, @media 를 알고있었지만 @supports는 금시초문이었다.
이 글을 작성하며 새로운 css의 속성을 접하게되어 감사하게 생각한다.
우선, @supports 란 ?
- 주어진 하나 이상의 CSS 기능을 웹브라우저가 지원하는 지에 따른 스타일 선언을 할 수 있도록 해준다.
- 이것을 기능 쿼리(feature query)라고 부른다.
- @supports는 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있다.
다음 예제는 웹브라우저가 display: flex 가 지원이 된다고 판단하는 경우 선언된 속성과 값들을 처리한다.
@supports (display: flex) {
.wrapper {
display: flex;
justify-contenst: center;
align-items: center;
}
}
@supports not (display: flex) {
.wrapper {
/** declaration ** /
}
}// and 연산자로 연결된 두 개 이상의 표현식의 결과가 맞는 경우에만 처리하도록 한다.
@supports ( property-name: property-value ) and ( property-name: property-value ) { declaration }// or 연산자로 연결된 두 개 이상의 표현식의 결과에서 한 개 이상 맞는 경우에만 처리하도록 한다.
@supports ( property-name: property-value ) or ( property-name: property-value ) { declaration }따라서,
최신 스펙의 CSS 값을 사용할 때 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있다.
지원되는 브라우저의 css, 지원되지 않는 브라우저의 css 를 따로 설정할 수 있어 편리한 것 같다.
이제 Scroll Indicator를 만들어보자.
1. JavaScript 활용
2. Only CSS
마치며
scroll indicator에 대한 의문점을 갖고 있었던 것이 해소되었고, 새로운 css 기능을 배울 수 있어 좋았다.
요즘 포토폴리오에 이 기능을 많이 넣는 것을 보았는데, 나도 나만의 포토폴리오에 얼른 적용을 해보아야겠다 ..!
REFERENCE
꾸준히 새로운 것을 알아가는 것을 좋아합니다.