CSS ' 과다 ” 속성은 선택한 HTML 요소에 대한 콘텐츠의 오버플로를 제어하는 데 사용됩니다. 콘텐츠는 '의 도움으로 특정 방향으로 제어할 수 있습니다. 오버플로-y ' 그리고 ' 오버플로-x ' 속성. 'overflow' 속성은 '와 같은 값을 허용합니다. 스크롤 ”, “ 보이는 ”, “ 숨겨진 ' 그리고 ' 자동 ” 기능이 서로 다릅니다. 그러나 이 가이드에서는 실제 예제를 사용하여 overflow:scroll과 overflow:auto의 차이점을 보여줍니다.
overflow:scroll은 overflow:auto와 어떻게 다릅니까?
'의 주요 차이점은 스크롤 ' 그리고 ' 자동 ” 값은 “ 오버플로:스크롤 ”는 필요 여부에 관계없이 항상 스크롤바를 표시하여 시각적인 주의를 산만하게 합니다. 한편, “ 오버플로:자동 ”는 콘텐츠가 넘칠 때만 스크롤바를 표시합니다. 이러한 방식으로 사용자의 관심을 쉽게 끌 수 있는 더 깨끗하고 간소화된 디자인을 만들 수 있습니다.
예제 1: overflow:scroll 속성 사용
CSS ' 오버플로:스크롤 ” 속성은 오버플로된 콘텐츠를 제어하기 위해 기본적으로 스크롤바를 설정합니다. 오버플로 내용을 보지 않고 스크롤 막대를 적용합니다. 대신 코드 컴파일 후 가로 세로 스크롤바를 표시하는데, 사용자가 디자인 요구사항에 따라 사이드 스크롤바만 수정하여 표시할 수 있습니다.
아래 코드를 방문하여 'overflow:scroll' 속성을 활용하십시오.
< 사업부 >
< h3 > 예 ~을 위한 오버플로:스크롤 h3 >
< 사업부 수업 = 'scrollingBox 스크롤' >
< 피 > 이것은 단지 활용된 더미 콘텐츠입니다. ~을 위한 overflow-y 속성 값 scroll과 auto의 차이점 데모.
피 >
사업부 >
사업부 >
위의 코드 블록에서:
- 먼저 루트 ' 사업부 ” 요소가 생성되고 중첩된 “ <사업부> ” 태그를 붙입니다.
- 다음으로 '의 클래스를 할당합니다. scrollingBox ' 그리고 ' 스크롤 '를 이미 생성된 중첩된 ' <사업부> ” 태그.
- 마지막으로 더미 데이터를 ' ' 그리고 ' ' 안의 ' 태그 사업부 ” 요소.
HTML 구조를 만든 후 CSS 오버플로 속성을 적용합니다.
< 스타일 >.scrollingBox {
너비: 300px;
높이: 150px;
테두리: 1px 단색 진회색;
}
.스크롤 {
오버플로: 스크롤;
}
스타일 >
위의 CSS 코드에 대한 설명:
- 먼저 ' scrollingBox ” 클래스를 만들고 “의 값을 제공합니다. 300픽셀 ”, “ 150픽셀 ' 그리고 ' 1px 솔리드 다크그레이 ” CSS에 “ 너비 ”, “ 키 ', 그리고 ' 국경 ' 속성. 이러한 속성은 더 나은 시각화 프로세스에 활용됩니다.
- 다음으로 “ 스크롤 ” 클래스를 선택하고 “ 스크롤 '는 CSS '로 전달됩니다. 과다 ' 재산.
컴파일 단계 종료 후:
위의 출력은 콘텐츠가 넘치지 않고 스크롤바가 X축과 Y축 모두에 추가되었음을 보여줍니다.
예제 2: overflow:auto 속성 사용
overflow:auto 속성은 overflow:scroll과 비슷합니다. 둘 다 스크롤 막대를 표시할 수 있기 때문입니다. 유일한 차이점은 ' 오버플로:자동 ”는 콘텐츠가 넘칠 때 스크롤바를 추가하고 콘텐츠가 넘치지 않으면 스크롤바를 추가하지 않습니다. 동적으로 변화하는 특성으로 인해 반응형 웹 디자인을 만들 때 주로 사용됩니다.
예를 들어 아래 코드를 방문하십시오.
< 사업부 수업 = '자동 예시' >< h3 > 예 ~을 위한 오버플로:자동 h3 >
< 사업부 수업 = '스크롤박스' 스타일 = '오버플로: 자동' >
< 피 > 이것은 단지 활용된 더미 콘텐츠입니다. ~을 위한 overflow-y 속성 값 scroll과 auto의 차이점 데모.
피 >
사업부 >
사업부 >
위의 코드 블록에서:
- 첫째, 동일한 HTML 구조를 활용하고 더미 데이터를 ' h3 ', 그리고 ' 피 ” 요소가 변경됩니다.
- 다음으로 “ 스타일 ” 속성은 내부 중첩된 “ 사업부 ” 요소와 “의 값을 설정합니다. 자동 ” CSS에 “ 과다 ' 재산.
실행 후 ' 사업부 ” 요소는 이제 다음과 같이 나타납니다.
위의 스냅샷은 콘텐츠의 길이에 따라 스크롤바가 추가되지 않은 것을 보여줍니다.
이제 ' 오버플로:자동 ' 재산. 중첩된 ' 사업부 ' 요소. 코드를 업데이트하면 웹페이지가 다음과 같이 표시됩니다.
출력은 오버플로 콘텐츠의 존재로 인해 이제 스크롤 막대가 추가되었음을 확인합니다.
결론
“ 오버플로:스크롤 ' 그리고 ' 오버플로:자동 ” 속성은 스크롤바를 추가하는 상황에 따라 다릅니다. 'overflow:scroll'은 내용이 오버플로되었는지 여부에 관계없이 항상 스크롤 막대를 표시합니다. 'overflow:auto'는 선택한 HTML 요소의 내용이 넘칠 때만 스크롤 막대를 표시합니다. CSS의 가치 ' 과다 ” 속성은 특정 디자인 및 사용자 경험 요구 사항에 따라 다릅니다. 이 기사에서는 'overflow:scroll'과 'overflow:auto' 속성의 차이점을 설명했습니다.