IT.인터넷.생활 관련/부트스트랩

overflow-hidden 때문에 고생했다.

백전백승. 2024. 1. 29. 18:56

over-hidden(overflow:hidden) 때문에 몇 시간을 고생했다. 예로 물체가 영역을 벗어나면 벗어난 부분은 보이지 않게 overflow-hidden을 사용했는데 자꾸 보이는 것이다. 그런데 다양한 방법을 사용해도 영역을 div에 클래스를 사용해서 별 방법을 사용해도 특정 영역을 벗어난 부분을 없앨 수 없었다. 

 

 

그래서 CSS를 사용하지 말고 부트스트랩5를 사용하니 부트스트랩 5에 정의된 overflow를 사용하자고 생각했다. 부트스트랩에 보면 CSS와 비슷하게 overflow도 정의된다. 비슷해서 가끔 헷갈린다. 부트스트랩 5에서는 클래스를 overflow-hidden이라면 하면 된다. 그랬더니 감쪽같이 됐다. 참고로 이 블로그는 부트스트랩 버전 3이고 3에서는 overflow는 정의되지 않았다. 아마 2013년 8월로 10년이나 지난 버전인 3을 사용할 사람은 없을 것이다. 

 

CSS에서는 overflow-hidden이 아니라 overflow: hidden이라고 한다. 인라인으로 style="overflow: hidden;"이라고 하고 이것은 부트스트랩 5 문법에서 class="ovewflow-hidden"과 같다. 

 

 

가끔 CSS에서 부트스트랩 문법을 쓸 때도 있고 부트스트랩에서 CSS 문법을 쓸 때가 있다. 다시 좀 전에 했던 방식대로 이미지를 div로 감싸고 div를 벗어난 영역에서 벗어난 이미지는 보이지 않게 했는데 됐다. 이것 때문에 몇 시간을 고생한 것을 생각하면...