웹페이지의 설정은 직관적이어야 하는데, 한 페이지에 딱 들어맞지 않는 경우가 많습니다. 예를 들어 일부 뉴스 웹사이트에서는 더 많은 텍스트를 보려면 계속 아래로 밀어야 합니다. 브라우저의 오른쪽에는 항상 이 기사에서 설명하는 요소인 스크롤 막대가 있습니다. 웹 페이지에서는 한 페이지가 모든 데이터를 수용할 수 없을 때 오버플로를 사용하여 이를 설정하는 경우가 많습니다.
Overflow 속성의 역할은 콘텐츠가 요소 상자를 오버플로할 때 어떤 일이 발생하는지 지정하고 요소의 콘텐츠 영역을 오버플로하는 콘텐츠를 처리하는 방법을 정의하는 것입니다.
1.오버플로
오버플로 콘텐츠를 더 잘 처리하기 위해 CSS는 오버플로라는 속성을 제공합니다. 이 속성은 오버플로 요소 콘텐츠 영역의 콘텐츠를 처리하는 방법을 설정할 수 있습니다. 속성의 선택적 값은 다음 표와 같습니다.
예:
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:au to;}</style></head><body><divclass=hidden>웹페이지 설정은 직관적으로 설정해야 하는 경우가 많아 한 페이지를 정확히 만족시키지 못하는 경우가 있습니다. 예를 들어 일부 뉴스 웹사이트에서는 페이징을 사용합니다. 더 많은 내용을 보려면 브라우저 오른쪽에 항상 스크롤 막대가 있어야 합니다. 이 항목은 웹에서 설명합니다. 페이지에서 모든 데이터를 한 페이지에 담을 수 없을 때, 오버플로(overflow) 설정을 사용하는 경우가 많습니다. Overflow 속성의 역할은 콘텐츠가 요소 상자를 오버플로할 때 어떤 일이 발생하는지 지정하고 요소의 콘텐츠 영역을 오버플로하는 콘텐츠를 처리하는 방법을 정의하는 것입니다. <div> 슬라이딩하면 브라우저 오른쪽에 항상 스크롤 막대가 표시됩니다. 이는 이 문서에서 설명하는 요소입니다. 웹 페이지에서 한 페이지가 모든 데이터를 수용할 수 없는 경우 오버플로를 사용하여 설정하는 경우가 많습니다. Overflow 속성의 역할은 콘텐츠가 요소 상자를 오버플로할 때 어떤 일이 발생하는지 지정하고 요소의 콘텐츠 영역을 오버플로하는 콘텐츠를 처리하는 방법을 정의하는 것입니다. <div> 슬라이딩하면 브라우저 오른쪽에 항상 스크롤 막대가 표시됩니다. 이는 이 문서에서 설명하는 요소입니다. 웹 페이지에서 한 페이지가 모든 데이터를 수용할 수 없는 경우 오버플로를 사용하여 설정하는 경우가 많습니다. Overflow 속성의 역할은 콘텐츠가 요소 상자를 오버플로할 때 어떤 일이 발생하는지 지정하고 요소의 콘텐츠 영역을 오버플로하는 콘텐츠를 처리하는 방법을 정의하는 것입니다. </div></body></html>실행 결과:
2.오버플로-x, 오버플로-y
CSS3은 또한 Overflow-x와 Overflow-y라는 두 가지 속성을 제공합니다. 해당 기능은 Overflow 속성과 유사합니다. 속성의 선택적 값은 다음과 같습니다.
Overflow-x: 요소의 콘텐츠 영역의 콘텐츠가 가로 방향으로 요소를 오버플로할 때 오버플로 콘텐츠를 처리하는 방법을 설정합니다.
Overflow-y: 요소의 콘텐츠 영역의 콘텐츠가 요소의 세로 방향으로 오버플로되는 경우 오버플로 콘텐츠를 처리하는 방법을 설정합니다.
3. 오버플로의 마법 같은 사용법
첫 번째 사용법: 마진 최고 배송 문제 해결
여백 상단 전송 문제: 하위 요소의 여백 상단은 상위 요소를 함께 가져옵니다. 이는 상위 요소에 Overflow:hidden을 추가하여 해결할 수 있습니다.
두 번째 사용법: 플로팅의 영향을 제거합니다. 상위 요소의 높이가 축소됩니다.
보편적인 제거 방법
오버플로:숨김
클리어: 둘 다
세 번째 사용법: 숨김을 넘어 애니메이션 공개 및 숨기기
네 번째 사용법: 한 줄의 텍스트가 누락을 초과합니다.
예:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>dotcpp 프로그래밍</title><styletype=text/css>#{margin:0px;padding:0px;}섹션{width:800px; 높이:460px;마그 in:auto;}article{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px;}p{margin:10px50px;} .chapter_1 {배경 색상:#A3A3A3;}.chapter_2{배경 색상:#81559d;}.chapter_3{배경 색상:#54709d;}.chapter_4{배경 색상:#4f9d89;}섹션:hover >article{overflow:hidden;width:50px;}section>article:hover{width:650px;}</style></head><body><section><articleclass=chapter_1><h3>볼륨 1</ h3 ><p>C 언어의 세계에 오신 것을 환영합니다! C 언어는 아마추어 및 전문 프로그래머들 사이에서 인기가 있는 강력하고 전문적인 프로그래밍 언어입니다. 배우기 전에 이해하고 인식합시다! C언어의 원형은 A언어(ALGOL60언어)이다. </p></article><articleclass=chapter_2><h3>2권</h3><p>C 언어의 세계에 오신 것을 환영합니다! C 언어는 아마추어 및 전문 프로그래머들 사이에서 인기가 있는 강력하고 전문적인 프로그래밍 언어입니다. 배우기 전에 이해하고 인식합시다! C언어의 원형은 A언어(ALGOL60언어)이다. </p></article><articleclass=chapter_3><h3>3권</h3><p>C 언어의 세계에 오신 것을 환영합니다! C 언어는 아마추어 및 전문 프로그래머들 사이에서 인기가 있는 강력하고 전문적인 프로그래밍 언어입니다. 배우기 전에 이해하고 인식합시다! C언어의 원형은 A언어(ALGOL60언어)이다. </p></article><articleclass=chapter_4><h3>4권</h3><p>C 언어의 세계에 오신 것을 환영합니다! C 언어는 아마추어 및 전문 프로그래머들 사이에서 인기가 있는 강력하고 전문적인 프로그래밍 언어입니다. 배우기 전에 이해하고 인식합시다! C언어의 원형은 A언어(ALGOL60언어)이다. </p></article></section></body></html>실행 결과:
