스크롤바2 [HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) 스크롤바 생성 overflow css속성 overflow로 자식 요소의 크기가 부모 요소의 크기를 초과했을 때 자식 요소들의 출력 방식과 스크롤바 생성을 제어할 수 있습니다. 수직과 수평 방향은 각각 oveflow-x, overflow-y로, 두 개를 동시에 제어할 때에는 overflow 속성을 사용합니다. overflow 속성을 사용할 때 주의할 점은 자식 요소의 크기가 '부모 요소의 크기를 초과했을 때' 출력 방식을 제어하는 속성이므로 부모 요소의 크기가 설정되어 있지 않으면 제어되지 않습니다. overflow-x 수평 방향 제어 overflow-y 수직 방향 제어 overflow 모두 제어 overflow-y 속성을 적용하면서 예시를 살펴보겠습니다. 1. visible 속성을 설정하지 않을 때 적용.. 2021. 4. 1. [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar Scrollbar 스크롤바 디자인 스크롤바 스타일에 관한 웹표준은 존재하지 않습니다. 스크롤의 동작은 overflow와 같은 css 속성을 사용하여 간단히 제어할 수 있지만, 스타일의 경우에는 과거엔 불가능했습니다. 스크롤이 다른 HTML 요소들처럼 태그로 존재하지 않기 때문입니다. 당연히 W3C(World Wide Web Consortium) spec에서도 스크롤바 스타일에 관한 명확한 규정은 찾아볼 수 없습니다. 그러나 각 브라우저에서 스크롤과 관련된 가상요소를 만들어내면서 이제는 간단한 css만으로도 스크롤바 스타일이 가능하게 되었습니다. 이 글에서는 webkit 브라우저(크롬, 사파리, 오페라 등)에서 유효한 css 가상요소를 사용해서 스크롤바를 디자인하는 방법에 대해서 살펴보겠습니다. 스크롤바의.. 2019. 8. 20. 이전 1 다음
