TIL58-01 css 공부

김태혁·2023년 3월 17일
0

TIL

목록 보기
147/205

z-index

  • z-index는 HTML과 CSS를 사용하여 웹 페이지를 디자인할 때, 요소들의 쌓이는 순서를 결정하는 속성입니다.
  • 요소들은 기본적으로 브라우저 화면의 x, y 좌표 상에서 위치를 지정합니다. 그런데, 만약 두 개 이상의 요소가 겹쳐져 있을 경우, 어떤 요소가 다른 요소보다 앞에 나타나야 할지를 결정해야 합니다. 이때 z-index 속성을 사용하여 요소들의 쌓이는 순서를 지정할 수 있습니다.
  • z-index 속성 값은 숫자로 지정됩니다. 값이 높을수록 요소가 더 앞에 위치하게 됩니다. 기본 값은 0이며, 음수 값도 지정할 수 있습니다. 음수 값을 지정하면 요소가 화면 뒤쪽으로 감춰지게 됩니다.
  • z-index는 position 속성이 static이 아닌 다른 값으로 설정된 요소에만 적용됩니다. 즉, position 속성이 relative, absolute, fixed 중 하나로 설정된 요소에서만 z-index 속성을 사용할 수 있습니다.
  • z-index는 가장 많이 사용되는 CSS 속성 중 하나이며, 요소들의 쌓이는 순서를 조절하여 웹 페이지 디자인에 유용하게 사용됩니다.

webkit-scrollbar

  • webkit-scrollbar는 웹킷(Webkit) 브라우저에서 스크롤바(Scrollbar)의 디자인을 커스터마이징하기 위한 CSS 속성입니다.
  • 웹킷 브라우저는 사파리(Safari), 크롬(Chrome), 오페라(Opera) 등 여러 브라우저에서 사용됩니다. 따라서 webkit-scrollbar 속성은 이러한 브라우저에서만 동작하며, 다른 브라우저에서는 적용되지 않습니다.
  • webkit-scrollbar 속성은 다음과 같은 하위 속성들을 포함합니다.
width: 스크롤바의 너비를 설정합니다.
height: 스크롤바의 높이를 설정합니다.
background: 스크롤바의 배경색을 설정합니다.
track: 스크롤바의 트랙(Track) 부분의 스타일을 설정합니다.
thumb: 스크롤바의 썸(Thumb) 부분의 스타일을 설정합니다.
corner: 스크롤바의 코너(Corner) 부분의 스타일을 설정합니다.
  • 이러한 속성들을 사용하여 스크롤바의 디자인을 원하는 대로 변경할 수 있습니다. 예를 들어, webkit-scrollbar-thumb 속성을 사용하여 스크롤바의 썸 부분에 그림자 효과를 추가하거나, webkit-scrollbar-track 속성을 사용하여 스크롤바의 트랙 부분의 배경색을 변경할 수 있습니다.
  • 하지만 webkit-scrollbar 속성은 모든 브라우저에서 지원되지 않으며, 웹킷 브라우저에서만 적용됩니다. 또한, 이 속성을 사용하여 스크롤바 디자인을 변경하더라도, 일부 사용자는 브라우저 설정에서 스크롤바를 기본 스타일로 변경할 수 있기 때문에, 디자인이 반영되지 않을 수도 있습니다.
profile
도전을 즐기는 자

0개의 댓글