노션 스크롤바 만들기 방법해몽

노션 스크롤바란 무엇인가?

노션은 현재 많은 사람들이 즐겨 사용하는 생산성 도구입니다. 노션에서는 글이나 이미지 등 다양한 콘텐츠를 작성할 수 있는데, 글이나 페이지의 크기가 커지면 스크롤바를 사용하여 내용을 스크롤할 수 있습니다. 하지만 기본적으로는 스크롤바가 매우 얇고 작게 표시되는데, 이를 커스터마이징하여 더 사용자 친화적인 스크롤바를 만들어보고자 합니다.

노션 스크롤바 만드는 방법

노션 스크롤바를 커스터마이징하기 위해서는 CSS 코드를 사용해야 합니다. 노션 페이지 상단의 메뉴 중 "스타일" 메뉴를 선택한 뒤 "메인 스타일 바꾸기"를 클릭합니다. 그런 다음, 아래 코드를 복사하여 "범위"란에 붙여넣고 "업데이트" 버튼을 클릭합니다.

p {
    scrollbar-width: thin;
    scrollbar-color: #CC33CC #E8E8E8;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #E8E8E8;
}

::-webkit-scrollbar-thumb {
    background-color: #CC33CC;
}

위 코드를 적용하면 노션의 스크롤바가 얇고, 보라색으로 변경됩니다. CSS의 속성을 조정하여 원하는 스타일로 변경할 수 있습니다.

스크롤바 커스터마이징 예제

아래는 스크롤바를 커스터마이징하는 몇 가지 예제입니다.

1. 스크롤바 색상 변경하기

p {
    scrollbar-color: #008000 #F0F0F0;
}

2. 스크롤바 너비 조절하기

p {
    scrollbar-width: thick;
}

3. 스크롤바 숨기기

p {
    scrollbar-width: none;
}

4. 스크롤바 비율 조절하기

::-webkit-scrollbar-thumb {
    min-height: 50px;
}

위 예제 코드를 참고하여 노션에서 원하는 스크롤바 스타일을 만들어보세요.

마무리

위의 코드와 예제를 통해 노션의 스크롤바를 커스터마이징하는 방법에 대해 알아보았습니다. 노션의 스크롤바를 커스터마이징하면 사용자의 취향에 맞게 개인적인 스타일을 적용할 수 있으며, 더 쾌적하고 편리한 사용자 경험을 제공할 수 있습니다. 위 예제 코드를 활용하여 여러 가지 스타일을 시도해보며 노션 페이지를 더욱 멋지게 꾸며보세요.