CSS를 사용하여 Div를 세로로 스크롤 가능하게 만들기

저희 웹사이트에서 사용하려는 콘텐츠는 크기가 크고 많은 공간을 차지할 수 있으며, 이는 웹사이트의 다른 요소가 대체되어 웹사이트의 반응성에 영향을 미칠 수 있음을 의미합니다. 이런 일이 발생하지 않도록 하려면 사용자가 관심이 있는 경우 아래로 스크롤하여 전체 콘텐츠를 읽을 수 있도록 스크롤 가능한 콘텐츠를 사용자에게 제공해야 합니다.

이 글에서는 div를 수직으로 스크롤하는 방법과 이를 달성하기 위해 어떤 속성을 사용할 것인지 살펴보겠습니다.

Div 스크롤을 수직으로 만드는 방법은 무엇입니까?

오버플로 속성에 여러 값을 입력할 수 있으므로 오버플로 속성을 사용하여 DIV를 세로로 스크롤할 수 있습니다. 숨김, 자동 등 일부 값이 있습니다. 사용된 값을 기반으로 가로 및 세로 스크롤바를 만들 수 있습니다. 자동 값을 사용하면 수직 스크롤바를 얻을 수 있습니다. 오버플로 속성의 구문을 살펴보겠습니다.

문법

으아악

x축과 y축을 사용하고 x축 속성을 숨김으로, y축 속성을 자동으로 설정합니다. 이렇게 하면 가로 스크롤 막대가 숨겨지고 세로 스크롤 막대만 표시되며 필요한 div가 자동으로 표시됩니다.

예

이 예에서는 div를 선언한 다음 div가 세로로 스크롤되도록 오버플로 속성을 추가할 단락을 작성합니다.

으아악

위 코드에서는 오버플로 속성을 사용하고 x축을 숨김으로, y축을 표시로 변경하여 여기서 작성 중인 단락에 수직 스크롤 막대를 제공합니다. 코드를 실행하여 얻은 결과를 살펴보겠습니다.

위 출력을 보면 아래로 스크롤하는 데 사용할 수 있는 세로 스크롤 막대가 있는 것을 볼 수 있습니다.

Note - 오버플로 속성을 사용할 때 "블록 요소"의 요소를 지정해야 합니다. 그렇지 않으면 작동하지 않을 수 있습니다. 이 속성은 사용되는 콘텐츠가 너무 커서 지정된 영역에 맞지 않기 때문에 콘텐츠를 자르거나 스크롤 가능한 막대(세로 또는 가로)를 추가하는 데 주로 사용됩니다.

이 속성을 더 잘 이해하기 위해 또 다른 예를 살펴보겠습니다.

예

이 예에서는 속성의 x축과 y축을 변경하는 대신 속성 값을 auto로 설정하여 div가 세로로 스크롤되도록 하겠습니다. 코드는 다음과 같습니다.

으아악

위 코드에서는 오버플로 속성의 값을 숨겨진 x축 및 자동 y축에서 auto로 변경하고 동일한 예를 사용하여 출력 결과를 확인했습니다. 이 코드가 생성하는 출력을 살펴보겠습니다.

위 출력을 보면 오버플로 속성에 자동 값이 있어도 여전히 스크롤 막대가 있음을 알 수 있습니다.

결론

오버플로 속성은 공간을 많이 차지하는 콘텐츠를 자르는 데 널리 사용됩니다. 또는 사용자가 아래로 스크롤할 수 있도록 스크롤 막대를 추가하여 웹 페이지에서 차지하는 전체 공간을 줄이려는 경우입니다.

이 글에서 우리는 오버플로 속성을 사용하는 방법과 div에 세로 스크롤 막대를 추가하는 방법, 그리고 오버플로 속성에 사용되는 값에 대해 자세히 배웠습니다.

위 내용은 CSS를 사용하여 Div를 세로로 스크롤 가능하게 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!