CSS Overflow 속성 사용법을 아시나요? 자세히 소개해드리겠습니다! 우리는 어느 정도 경험을 쌓아왔고 이를 서로 수정하고 싶습니다.
CSS 오버플로 속성 값 :
1. visible: 기본값, 콘텐츠가 잘리지 않고 요소 상자 외부에 표시됩니다.
2. 숨김: 콘텐츠가 잘리고 나머지 콘텐츠는 보이지 않습니다.
3. 스크롤: 콘텐츠가 잘리지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.
4. 자동: 콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.
또한 오버플로에는 거의 사용되지 않는 두 가지 자매 속성인 Overflow-y와 Overflow-x도 있습니다. 이러한 각 값을 살펴보고 일반적인 사용법과 기술에 대해 논의해 보겠습니다 .
(1) 자동
오버플로의 자동 값은 스크롤과 매우 유사합니다. 이 방법이 해결하는 유일한 문제는 스크롤 막대가 필요하지 않을 때 나타나는 문제입니다.
(2)숨겨진 것
표시되는 기본값의 반대 값은 숨겨집니다. 상자 밖의 모든 것을 숨길 것입니다. 이는 콘텐츠 오버플로로 인해 일부 레이아웃 문제를 일으킬 수 있는 동적 콘텐츠를 처리하는 데 정말 유용합니다. 하지만 이 방법을 사용하여 숨겨진 콘텐츠는 (소스 코드를 확인하지 않는 한) 전혀 표시되지 않는다는 점을 기억하세요 . 예를 들어 일부 사용자가 브라우저의 기본 글꼴을 의도한 것보다 크게 설정하면 일부 텍스트가 상자 밖으로 밀려나와 완전히 숨겨지게 됩니다.
(3)보이는
오버플로 속성을 설정하지 않으면 기본 오버플로 속성 값이 표시됩니다. 따라서 일반적으로 다른 곳에 설정된 값을 재정의 하려는 경우가 아니면 오버플로 속성을 특별히 표시로 설정할 이유가 없습니다 . 여기서 기억해야 할 중요한 점은 상자 외부의 콘텐츠가 표시되더라도 해당 콘텐츠가 페이지의 작업 흐름에 영향을 주지 않는다는 것입니다. 일반적으로 말해서 내용이 텍스트인 상자에 대해서는 적어도 고정 높이를 설정할 필요가 없으므로 이러한 상황이 발생하지 않습니다.
(4)스크롤
상자의 오버플로 값을 스크롤하도록 설정하면 상자 외부에 렌더링된 내용이 숨겨 지지만 상자 내부에서 스크롤할 수 있는 스크롤 막대가 제공되어 나머지 내용을 볼 수 있습니다. 스크롤을 사용하면 콘텐츠에 둘 중 하나만 필요한 경우에도 가로 및 세로 스크롤 막대가 동시에 생성된다는 점은 주목할 가치가 있습니다 .
예: Visible 및 Hidden 속성 값 사용
<!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:auto;}</style></head><body><divclass=hidden>visible: 기본값, 넘치는 콘텐츠는 처리되지 않고 요소 콘텐츠 영역 외부에 콘텐츠가 표시됩니다. ; <br>hidden: 오버플로 요소 콘텐츠 영역의 콘텐츠를 숨깁니다. <br>스크롤: 오버플로 요소 콘텐츠 영역의 콘텐츠를 숨기고 요소의 왼쪽과 아래에 스크롤 막대를 만듭니다. 콘텐츠;<br>auto: 콘텐츠 오버플로가 발생하면 요소 왼쪽에 스크롤 막대가 생성됩니다. 스크롤 막대를 밀어서 요소의 모든 콘텐츠를 볼 수 있습니다. ;<br>inherit: 상위 요소로부터 오버플로 속성 값을 상속받습니다. </div><divclass=scroll>visible: 기본값, 넘치는 콘텐츠는 처리되지 않고 콘텐츠는 요소 콘텐츠 영역 외부에 표시됩니다.<br>hidden: 넘치는 요소 콘텐츠 영역의 콘텐츠를 숨깁니다.<br >스크롤: 오버플로 요소의 콘텐츠 영역에 있는 콘텐츠를 숨기고, 요소의 왼쪽과 아래에 스크롤 막대를 생성합니다. 스크롤 막대를 밀어서 요소의 모든 콘텐츠를 볼 수 있습니다.<br> auto: 콘텐츠 오버플로가 발생하면 요소의 왼쪽에 표시됩니다. 스크롤 막대를 만들고 스크롤 막대를 밀어 요소의 모든 콘텐츠를 볼 수 있습니다.<br>inherit: 오버플로 값을 상속합니다. 상위 요소의 속성입니다. </div><divclass=auto>visible: 기본값, 넘치는 콘텐츠는 처리되지 않고 콘텐츠는 요소 콘텐츠 영역 외부에 표시됩니다.<br>hidden: 넘치는 요소 콘텐츠 영역의 콘텐츠를 숨깁니다.<br >스크롤: 오버플로 요소의 콘텐츠 영역에 있는 콘텐츠를 숨기고, 요소의 왼쪽과 아래에 스크롤 막대를 생성합니다. 스크롤 막대를 밀어서 요소의 모든 콘텐츠를 볼 수 있습니다.<br> auto: 콘텐츠 오버플로가 발생하면 요소의 왼쪽에 표시됩니다. 스크롤 막대를 만들고 스크롤 막대를 밀어 요소의 모든 콘텐츠를 볼 수 있습니다.<br>inherit: 오버플로 값을 상속합니다. 상위 요소의 속성입니다. </div></body></html>실행 결과:
