display
-
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..