마짐겹침현상을 공부하던 중 overflow:hidden으로 해결이 된다는 것을 발견!
예전에 border-radius문제를 해결 할 때도 같은 방법으로 해결했는데 과연 이 만병통치약 overflow:hidden의 정체는 무엇일까...
📝 mdn
The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
아하!
그러니까 요소의 컨텐츠가 너무 커서 그 블럭을 넘길 때 어떻게 할 것인지 정해주는 프로퍼티!
기본적인 종류는
- overflow: visible; 👇
- overflow: hidden; 👇
- overflow: scroll; 👇
- overflow: auto; 👇
그 외에도
/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;
/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: unset;이렇게 있답니다!
보면서 생기는 의문이 있죠. auto는 무엇일까?
auto
Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbars if content overflows.
즉 콘텐츠가 블록 안에 들어간다면 visible로 넘는다면 Desktop Browser에서는 scroll적용이 된다!
일정한 콘텐츠 크기를 제공해야 하는데 넘어가면 스크롤이 필요한 상황
예를 들면 방명록? 뭐 이런 곳에 해도 괜찮겠다!
보여주고 싶은 화면이 정해져 있고
그 안에 콘텐츠의 길이가 불확실할 때? 포스트잍 방명록 같은 곳!
마진병합현상의 더 자세한 설명
link https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin
