float
-
display와 float의 차이Web/CSS 2020. 1. 12. 12:04
Navigation bar에서 설명했듯 display: inline-block; 과 float: left;는 비슷한 효과를 보여준다. 이번 편에서는 그 차이에 대해서 정확하게 알아보도록 하자. 아래 코드와 그 결과를 보도록 하자. See the Pen PoweLvv by Catnap421 (@catnap421) on CodePen. float의 경우, p태그의 내용이 박스 옆에 오고, display의 경우, 아래에 오는 걸 확인할 수 있다. 즉 하단에 다른 태그를 입력하면 그 결과를 쉽게 확인할 수 있다. float의 경우, 해당 요소의 크기만큼 할당해서 바짝 붙이기 때문에 box 요소가 float 되고 난 후, 남은 공간에 p요소가 오게 된다. 그러나 display의 경우, display: inline..
-
floatWeb/CSS 2020. 1. 11. 15:52
CSS에서 float는 레이아웃을 만들 때, 블록 요소들을 가로 정렬을 시킬 때 자주 사용한다. float의 간단한 사용법과 예시는 여기서 다루지 않고, 이 글에서는 float를 사용할 때 생길 수 있는 문제와 이를 해결할 수 있는 기법들에 대해 소개하고자 한다. float 프로퍼티가 선언된 자식 요소로 인한 부모 요소의 부적절한 높이 See the Pen bGNMoRv by Catnap421 (@catnap421) on CodePen. 자식 요소에 float 프로퍼티를 주게 되면 위 코드와 같이 부모 요소의 높이가 제대로 설정되지 않는다. float 요소는 일반적인 흐름상에 있는 게 아니기 때문에 float 요소의 높이를 알 수 없고, 부모 요소는 이로 인해 제대로 높이가 표현되지 않는다. 1. ove..