이 문서에서는 콘텐츠가 오버플로되는 것을 막고 CSS를 사용하여 스크롤을 활성화하는 방법을 보여줍니다.
콘텐츠 오버플로를 중지하고 스크롤을 활성화하는 방법은 무엇입니까?
콘텐츠가 넘쳐나는 것을 막는 목적은 콘텐츠가 해당 컨테이너에 맞고 웹 사이트 성능에 부정적인 영향을 미치지 않는 것입니다. 컨텍스트를 쉽게 이해할 수 있으며 사용자 끝의 접근성을 향상시킬 수 있습니다. 자세한 설명을 위해 예를 통해 논의해 보겠습니다.
1단계: 콘텐츠 오버플로가 있는 스크롤 활성화
처음에는 스크롤 효과를 적용할 HTML 파일 내부에 테이블을 만드는 것으로 시작합니다. 테이블이 이미 생성되었고 6개의 행과 7개의 열로 구성되어 있고 일부 더미 데이터가 테이블에 제공되었다고 가정해 보겠습니다.
< 테이블 >
< 트 >
< 일 > 머리 1 < / 일 >
< 일 > 머리 2 < / 일 >
< 일 > 머리 3 < / 일 >
< 일 > 머리 4 < / 일 >
< 일 > 머리 5 < / 일 >
< 일 > 머리 6 < / 일 >
< 일 > 머리 7 < / 일 >
< / 트 >
< 트 >
< td > 행 1 < / td >
< td > 행 1 < / td >
< td > 행 1 < / td >
< td > 행 1 < / td >
< td > 행 1 < / td >
< td > 행 1 < / td >
< td > 행 1 < / td >
< / 트 >
< 트 >
< td > 행 2 < / td >
< td > 행 2 < / td >
< td > 행 2 < / td >
< td > 행 2 < / td >
< td > 행 2 < / td >
< td > 행 2 < / td >
< td > 행 2 < / td >
< / 트 >
< 트 >
< td > 행 3 < / td >
< td > 행 3 < / td >
< td > 행 3 < / td >
< td > 행 3 < / td >
< td > 행 3 < / td >
< td > 행 3 < / td >
< td > 행 3 < / td >
< / 트 >
< 트 >
< td > 행 4 < / td >
< td > 행 4 < / td >
< td > 행 4 < / td >
< td > 행 4 < / td >
< td > 행 4 < / td >
< td > 행 4 < / td >
< td > 행 4 < / td >
< / 트 >< 트 >
< td > 행 5 < / td >
< td > 행 5 < / td >
< td > 행 5 < / td >
< td > 행 5 < / td >
< td > 행 5 < / td >
< td > 행 5 < / td >
< td > 행 5 < / td >
< / 트 >
< 트 >
< td > 행 6 < / td >
< td > 행 6 < / td >
< td > 행 6 < / td >
< td > 행 6 < / td >
< td > 행 6 < / td >
< td > 행 6 < / td >
< td > 행 6 < / td >
< / 트 >
< / 테이블 >
위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 나타납니다.
출력은 테이블 데이터가 덜 읽기 쉬운 형식이고 테이블이 많은 공간을 확보했음을 표시합니다.
2단계: 오버플로우 및 스크롤링 효과 설정
그런 다음 부모 '로 테이블을 래핑하십시오. <사업부> ” 태그를 지정하고 “ 과다 '. 그런 다음 해당 div 요소에 다음 CSS 속성을 할당합니다.
.과다 {
너비 : 200픽셀 ;
키 : 200픽셀 ;
오버플로-x : 자동 ;
오버플로-y : 자동 ;
스크롤 동작 : 매끄러운 ;
}
위의 코드 조각에서:
- 먼저 '200px' 값은 CSS ' 너비 ' 그리고 ' 키 ' 속성. 웹 페이지에 표시되는 테이블의 크기를 설정합니다.
- 다음으로 ' 오버플로-x ' 그리고 ' 오버플로-y ” 속성을 사용하여 스크롤을 활성화하고 “ 자동 ” 값을 X 및 Y축에 적용합니다.
- 마지막으로 '의 값을 설정하십시오. 매끄러운 ' 에게 ' 스크롤 동작 '를 통해 원활한 사용자 경험을 제공합니다.
위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 나타납니다.
웹 페이지는 이제 테이블이 더 적은 공간을 사용하고 콘텐츠가 넘치지 않도록 하고 있음을 보여줍니다. 또한 스크롤 효과가 활성화되었습니다.
메모 : '를 설정하여 오버플로: 자동 ' 또는 ' 오버플로: 스크롤 ”, 사용자는 넘쳐나는 콘텐츠에 대한 스크롤을 활성화할 수 있습니다. 또한 “ 오버플로: 숨김 ”를 사용하여 오버플로를 완전히 방지할 수 있습니다.
결론
'overflow-x' 및 'overflow-y' 속성은 오버플로를 제어하고 가로 및 세로 축에서 스크롤을 활성화하는 데 사용됩니다. 콘텐츠가 넘쳐나는 것을 방지하고 스크롤링을 가능하게 하여 모든 디바이스에 인터랙티브한 반응형 디자인을 만들어줍니다. 이 문서에서는 콘텐츠가 오버플로되는 것을 막고 CSS를 사용하여 스크롤을 활성화하는 방법을 설명했습니다.