Home Ads

[CSS] float / inline-block



block 속성을 일렬로 정렬하기 위해 쓰는 float / inline-block



float는 부모를 끊어줘야 하는 번거로움이 있지만 깔끔하게 떨어져서 좋다. 

그런데 부모 끊어줄 때 overflow:hidden은 지양하는게 좋다... 퍼센트로 작업할 때 컨텐츠가 감싸는 박스의 높이를 
넘치면 잘려 보이기 때문이다. 





inline-block은 부모를 따로 끊어줘야 할 필요도 없고 inline 속성도 가지고 있기 때문에 text-align:center도 먹혀서 가운데 정렬하기에 좋다. 

하지만 block들 사이가 벌어져서 불편할 때가 있었는데, 그건 부모속성에 font-size:0을 주면 해결된다. inline-block은 HTML에서 줄바꿈시 공백이 생기기 때문이다.

그런데 예전에 모바일 작업할 때 inline-block이 안먹는 기기가 있었다.. 갤럭시8이었나?? 기억은 잘 안나지만 그 때 float를 써서 해결했다.
[CSS] float / inline-block [CSS] float / inline-block Reviewed by 코알라 on 9월 20, 2018 Rating: 5

댓글 없음:

페이지

Powered by Blogger.