CSS에서 오버플로: 자동과 오버플로: 스크롤의 차이점은 무엇입니까?

CSS에서 'overflow' 속성은 HTML 요소 콘텐츠의 오버플로를 지정하는 데 사용됩니다. 예를 들어 div 요소의 높이가 "500px"이고 내부 콘텐츠의 높이가 "1000px"인 경우 콘텐츠를 스크롤 가능하게 만들어야 합니다.

이 튜토리얼에서는 CSS "overflow" 속성의 "auto" 값과 "scroll" 값의 차이점을 알아봅니다.

오버플로: CSS에서 자동

CSS에서 Overflow: auto는 HTML 요소의 오버플로를 자동으로 설정합니다. 즉, div의 콘텐츠가 오버플로되면 'scroll'이 오버플로 속성 값으로 설정되고, 그렇지 않으면 'none'이 오버플로 속성 값으로 설정됩니다.

문법

사용자는 다음 구문에 따라 Overflow: auto CSS 속성을 사용할 수 있습니다.

으아악

예

아래 예에서는 HTML div 요소를 만들고 "main" 클래스 이름을 지정했습니다. 또한 div 요소에 대해 고정된 너비와 높이를 설정합니다. 추가적으로 “overflow: auto” CSS 속성을 설정했습니다

출력에서 콘텐츠 크기가 div 요소의 크기보다 크기 때문에 스크롤 막대가 표시되는 것을 사용자는 확인할 수 있습니다.

으아악

예

아래 예에서는 div 요소의 내부 콘텐츠 크기가 div 요소의 크기보다 작습니다. 출력에서 사용자는 콘텐츠가 오버플로되지 않으므로 div 요소를 스크롤할 수 없음을 확인할 수 있습니다.

으아악

오버플로: CSS에서 스크롤

"overflow:scroll"은 요소의 내용이 오버플로되지 않더라도 HTML 요소에 항상 스크롤 막대를 표시하며 항상 가로 및 세로 스크롤 막대를 표시합니다.

문법

으아악

예

아래 예에서는 div 요소의 크기에 맞는 div 요소에 콘텐츠를 추가했습니다. 또한 CSS를 사용하여 div 요소에 대해 "overflow:scroll"을 설정합니다.

출력에서 사용자는 div 요소의 내용이 오버플로되지 않더라도 스크롤 막대가 표시되는 것을 확인할 수 있습니다.

으아악

overflow:auto와 Overflow:scroll의 차이점

다음은 Overflow:auto 및 Overflow:scroll CSS 속성에 대한 차이점 표입니다.

오버플로: 자동	오버플로:스크롤
HTML 요소의 내용이 넘치거나 원본 요소의 크기에 맞지 않는 경우에만 스크롤 막대를 표시합니다.	항상 스크롤바가 표시됩니다.

예

아래 예에서는 Overflow:scroll과 Overflow:automatic의 출력을 함께 보여줍니다. 클래스 이름이 "scroll"인 div 요소에 대해 Overflow:scroll을 설정하고 클래스 이름이 "auto"인 div 요소에 대해 Overflow:auto를 설정합니다.

출력에서 사용자는 Overflow:scroll이 스크롤 막대를 표시하지만 Overflow:auto는 표시하지 않는 것을 볼 수 있습니다.

으아악

사용자는 "overflow:auto"와 "overflow:scroll" CSS 속성의 차이점을 배웠습니다. 둘 사이의 유일한 차이점은 스크롤 막대를 표시한다는 것입니다.

위 내용은 CSS에서 오버플로: 자동과 오버플로: 스크롤의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!