소낙눈님 + 현재 body에 배경을 설정할 경우 뷰포트가 특정 너비보다 좁아지게 되면 배경이 끝까지 채워지지 않는 문제를 확인하였습니다.
일반적인 사용 환경에서는 문제가 없으며 해당 부분을 수정하는 대로 본문에 추가할 예정입니다.
macOS 최적화 가이드 macOS 환경에 최적화되어 있으며 Safari 전용 가이드를 포함할 수 있습니다 |
라이트 모드 단독 가이드 다크 모드에 대한 구문은 CXFT : 다크 모드 가이드를 참조하여 별도로 설정해주세요 |
부분적 환경 가이드 개인 환경에서의 테스트를 통해 작성되어 일반적이지 않을 수 있습니다 |
용어는 기본적으로 MDN 문서의 번역(및 표기)을 따르며(병행 표기 포함) /en-US/docs만 제공될 경우 임의 번역하였습니다.
밑밥 #0 : 도입
이번에 맥북을 구매하면서 macOS와 Safari 브라우저 환경의 테스트가 가능해졌습니다.
물론 시중에 크로스 브라우징 테스트 도구가 여럿 있지만 네이티브 환경에서 테스트하는 게 정확하기도 하고 편하죠.
그러다 트게더의 스크롤 바운스 효과를 만났는데...
제가 보라색을 싫어하는 건 아니지만 작업하는 CSS들과는 동떨어진 색이다 보니 좀 어색하더라구요.
그래서 해결해 보려고 합니다.
밑밥 #1 : 스크롤 바운스 효과 이해하기
macOS 환경에서 트랙패드로 웹 페이지를 스크롤하면 페이지의 최상단과 최하단에서 스크롤 바운스가 발생합니다.
쫀득하게 늘어났다가 다시 원래대로 복귀하는 스크롤이기 때문에
스크롤 바운스 외에도 탄력 스크롤이나 스프링 스크롤과 같은 명칭으로 불리기도 합니다.
밑밥 #2 : 트게더의 스크롤 바운스
트게더에서 스크롤 바운스 영역(배경)은 트게더의 고유 컬러인 #6441A5로 표시됩니다.
그러나 해당 영역은 HTML 영역인 theme-color 메타 태그를 통해 설정된 부분으로
일반적인 커스텀 CSS로는 조정할 수 없습니다.
따라서 다른 방법을 통해 해당 영역의 색상을 커스텀해보겠습니다.
시작 #1 : 테스트 결과 미리보기
Safari
- HTML을 선택자로 한 단일 색상 값 = 가능하나 불완전함(적용될 수도 있고 아닐 수도 있음)
- HTML을 선택자로 한 그레이디언트 값 = 가능함
Whale (크로미움 → 크롬도 동일할 것으로 예상)
- HTML을 선택자로 한 단일 색상 값 = 가능함
- HTML을 선택자로 한 그레이디언트 값 = 불가능함
Firefox
- HTML을 선택자로 한 단일 색상 값 = 가능함
- HTML을 선택자로 한 그레이디언트 값 = 불가능함
결론
- macOS가 또... 사파리가 또... 왜 너만 달라...?
- Safari와 Safari 이외의 경우를 전부 지정해준다면 모든 환경에서 적용됨.
시작 #2 : 단일 색상 배경 테스트
아래와 같이 html에 배경을 설정하면 해당 배경이 스크롤 바운스 영역에 표시됩니다.
색상 값을 넣을 경우 해당 색상으로 배경이 설정되며 → 스크롤 바운스 영역에 표시됩니다.
html {
background: 색상;
}
시작 #3 : 그레이디언트 색상 배경 테스트
그런데 사파리는 단일 색상 값을 넣으면 스크롤 바운스 영역이 가챠겜이 됩니다.
즉 해당 색상으로 표시될 수도 있고 아닐 수도 있게 됩니다. (조건 확인 불가)
이를 해결하기 위해 아래와 같이 linear-gradient 형태로 넣으니 가챠가 아니라 확정이 되었습니다.
html {
background: linear-gradient(색상, 색상);
}
|| cf. 단일 색상 vs 그레이디언트 || Q. 둘 다 색상 아닌가요? A. 아닙니다. 재미있게도 키워드나 RGB(헥사)/HSL 형식으로 지정한 일반적인 색상의 자료형은 색상 입니다. 하지만 linear-gradient를 통해 지정한 그레이디언트의 자료형은 이미지입니다. ∴ background 단축 속성에 색상을 넣을 경우 background-color 세부 속성의 값으로 지정되지만 그레이디언트를 넣을 경우 background-image 세부 속성의 값으로 지정됩니다. = 사파리는 스크롤 바운스 영역에 이미지를 잘 받아들이고 다른 브라우저는 색상만을 받아들인다. |
최종 #0 : 기본 설정
스크롤 바운스 영역을 설정하기 위해서는 HTML에 배경을 설정하면 됩니다.
∴ 일반 영역(그냥 보이는 부분)과 스크롤 바운스 영역의 배경을 각각 다르게 설정하고 싶다면 두 영역을 분리해야 합니다.
html {
···
}
body {
···
}
위와 같이 영역을 나누어 html {···}에는 스크롤 바운스 영역의 배경 값을, body {···}에는 일반 영역의 배경 값을 설정하면 됩니다.
만약 기존에 html 선택자에 배경을 위한 속성이 작성되어 있었다면 해당 속성 및 값을 body 선택자로 이동해주세요.
최종 #1 : 스크롤 바운스 영역 커스텀 - 일반 구문
최종적으로 브라우저 모두(Safari 포함)를 타겟으로 하는 단일 색상 스크롤 바운스 영역 배경 설정은 다음과 같습니다.
html {
background: linear-gradient(색상, 색상) 색상;
}
상단의 구문에 있는 세 '색상' 부분에 모두 동일한 값을 사용해야 합니다.
Safari에서는 명목상 그레이디언트 값(실질적으로는 단일 색상)을, 다른 브라우저에서는 일반적인 색상 값을 이용합니다.
|| CXFT mini : 구문 가이드 || 해당 구문의 속성은 다음과 같습니다. background 배경을 설정하는 단축 속성입니다. 다음의 세부 속성 값을 포함할 수 있습니다. 색상(-color) · 이미지(-image) ··· 해당 구문의 값인 세부 속성 값은 다음과 같습니다. 이미지(-image) → Safari = 그레이디언트 자료형 ↓ linear-gradient(색상, 색상) 선형 그레이디언트를 생성하는 함수입니다. 색상(-color) → 기타 브라우저 = 색상 자료형 ↓ 색상 |
아래는 사용 예시입니다.
html {
background: linear-gradient(#1C1E21, #1C1E21) #1C1E21;
}
|| 예시 상세 설명 || 해당 페이지(소낙눈 트게더)는 페이지의 양 끝단이 배경 대신 1단 상단바와 푸터바로 빈틈 없이 채워져 있으며 두 바 모두 색상이 #1C1E21로 동일합니다. 스크롤 바운스 시 각각의 바와 이어진 느낌을 주기 위해 스크롤 바운스 배경을 바의 색상과 동일한 #1C1E21로 지정했습니다. |
최종 #2 : 스크롤 바운스 영역 커스텀 - 사파리 특수 구문(상/하단 분리형)
Safari는 이미지형 값을 스크롤 바운스 영역 배경으로 잘 받아들인다는 점을 이용하여
상단 스크롤 바운스 배경과 하단 스크롤 바운스 배경을 다르게 설정할 수 있습니다.
어떻게 보면 Safari에서만 발생하는 문제점을 역으로 이용한 사례라고 볼 수 있습니다.
|| cf. 스크롤 바운스 영역(배경)과 그레이디언트 || linear-gradient에 중지점(color-stop)을 두 개 지정한 수직 방향 그레이디언트인 경우를 바탕으로, linear-gradient의 시작점 위치 값의(side-or-corner) 기본값은 to bottom = 180deg이기 때문에 일반적인 요소라면 먼저 지정한 값(=중지점)이 위로 가도록 그레이디언트가 표현됩니다. 도움! 하지만 스크롤 바운스 영역에서는 먼저 지정한 값이 하단 스크롤 바운스 배경색이 되고 나중에 지정한 값은 상단 스크롤 바운스 배경색이 됩니다. ∴ 스크롤 바운스 영역 배경은 일반적인 그레이디언트 방향과 반대로 표시됩니다. 이는 linear-gradient의 시작점 위치 값을 반대로 = to top = 0deg 해도 동일하며, 이 때는 먼저 지정한 값이 상단 스크롤 바운스 배경색이 되고 나중에 지정한 값이 하단 스크롤 바운스 배경색이 됩니다. |
최종적인 구문은 다음과 같습니다.
html {
background: linear-gradient(하단색, 상단색) 대체색;
}
일반 구문과 형태는 똑같지만 세 '색상' 부분에 각각 다른 값을 사용합니다.
대체색은 스크롤 바운스 배경으로 이미지형을 받지 않는 Safari 이외의 브라우저를 위해 작성하면 됩니다.
#2-1 : 기존 배경 구문에서 끌어오기
만약 기존에 트게더 배경을 그레이디언트로 사용하고 있었다면
해당 배경에 잘 맞는 상/하단 분리 스크롤 바운스 배경을 손쉽게 만들 수 있습니다.
전술한 설명에 따라 기존 linear-gradient 함수의 시작점 위치 값(side-or-corner)을 반대로 설정하면 됩니다.
즉, 기존에 배경(=body) 설정을 위해 사용하던 구문이 아래와 같은 경우
body {
background: linear-gradient(to bottom, black, red, white);
}
아래와 같이 그레이디언트 컬러의 색상 순서를 직접 뒤집어 스크롤 바운스 배경으로 설정해주거나,
html {
background: linear-gradient(to bottom, white, red, black) 대체색;
}
linear-gradient의 시작점 위치 값 키워드만 반대 방향으로 교체해 주면 됩니다.
html {
background: linear-gradient(to top, black, red, white) 대체색;
}
|| 키워드 미지정 시 || 만약 기존 linear-gradient에서 시작점 위치 값이 별도로 지정되어 있지 않을 경우 단축 속성의 원리에 따라 기본값인 to bottom으로 설정되어 있는 것과 같습니다. |
아래는 사용 예시입니다.
html {
background: linear-gradient(to top, #CCEECC, #E3F1AF, #4BC84B) #8BDB8B;
}
body {
background: linear-gradient(to bottom, #CCEECC, #E3F1AF, #4BC84B);
}
|| 예시 상세 설명 || 해당 페이지는 설명을 위해 개발자 도구를 통해 CSS 코드를 일부 변형한 상태입니다 해당 페이지(CSS 디자인 커뮤니티)는 그레이디언트 배경이 페이지 전부를 채우고 있으며 #CCEECC가 상단에서 시작되어 #4BC84B로 하단에서 종료됩니다. ∵ linear-gradient 시작점 위치 값(side-or-corner)이 기본값인 to bottom이기 때문에 먼저 작성된 #CCEECC가 위로 가도록 표시됩니다. ∴ 스크롤 바운스 시 페이지 배경과 이어진 느낌을 주기 위해 배경 설정에 사용된 linear-gradient 구문에서 시작점 위치 값을 뒤집고(to bottom → to top) 대체색을 추가하여 스크롤 바운스 배경으로 사용했습니다. |
#3 : 정리
스크롤 바운스 영역 커스텀은 macOS + 트랙패드라는 특정 조건이 갖춰진 상태에서만 그 효과를 발휘합니다.
따라서 일반적인 사용자분들이시라면 굳이 시간을 들여 커스텀하실 필요는 없다고 생각합니다.
댓글 0개 ▼