HTML/CSS에 대해 복습했다.
알고 있던 내용들이었지만, 헷갈리는 CSS property에 대해서 복습하는 계기가 되었다.
float이라는 속성은 주어진 요소뿐만 아니라 주변의 요소들의 배치에도 영향을 주어서 사용하기 까다로운 속성 중에 하나다. float 속성을 레이아웃이나 요소의 배치에 사용하게 될 때 함께 사용되어야 하는 작업이 float의 영향에서 해제시키는 방법이 있다.
하지만 이 방법에도 치명적인 단점이 있다. 만약 이 부모 요소 안에 부모의 영역을 벗어나는 팝업과 같은 자식 콘텐츠가 있다고 가정한다면 그 팝업의 내용이 보이지 않는 현상이 일어난다.
overflow의 유일하고 가장 큰 단점 중에 하나.
그래서 이 방법을 사용하여 float을 해제할 때는 이처럼 안에 내용 중에 부모의 내용을 넘쳐나서 노출되는 콘텐츠는 없는지 확인이 될 때 사용하여야 한다.
[https://www.boostcourse.org/web344/lecture/47666?isDesc=false] 참조
[https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/] 참조
여러가지 방법이 있다.
Element가 배치되는 방법(CSS layout)-1
링크텍스트
Element가 배치되는 방법(CSS layout)-2
링크텍스트