CSS 가로 정렬? inline-block과 float중 어떤 것을 써야 할까?
grid-item은 block요소로 한줄에 하나씩 배치된다.
이 요소들을 쭉 나열하고자 할 때 쓸 수 있는 게 두 가지가 있다.
1) inline-block
.grid-item에 display:inline-block을 추가하면
inline을 포함하고 있기 때문에 가로 정렬이된다.
inline은 텍스트처럼 쭉 나열되기 때문에!
그치만 위에 사진처럼 여백이 생긴다.
밑에 생기는 여백은 텍스트의 하단 행간에 대한 공간이 생겨버린다.
inline은 다 좋지만 텍스트의 성질을 가지므로 띄어쓰기 공간과 하단 공백이 생긴다.
이걸 해결하기위해서는
1-1) 부모에 font-size:0을 준다. => 띄어쓰기공간을 없애버리기.
하지만 이 방법은 브라우저에 따라서 적용이 안될 수도 있다.
1-2) 자체 div를 이어서 작성한다
이 방법은 같이 협업을 하는 사람이 변경을 해버리면 소용이 없다. 보기에도 깔끔해보이지 않고..!
1-3) 가운데 div에 margin 좌우 값을 음수로 준다.
.grid-item.b { background-color:orangered; margin:0 -4px; }
2) float: left;
아이템에게 float:left를 적용시키면 가로정렬이 되나 부모의 높이가 0이 되기 때문에 흰색 부분이 아예 사라진걸 볼 수 있다. 이 때의 해결방법은?
1) 부모에게 높이를 준다. ex) .grid { height:100px; }
이 방법은 일차원적인 방법이다. 유지보수하기 힘들다. 나중에 아이템이 여러개 더 추가가 되어도 자동적으로 늘려지지 않기 때문에.. 그래서 그럴때 마다 다시 height값을 설정해주어야한다.
2) 부모에게 overflow:hidden 이나 clear속성을 부여해준다.
그렇담 float을 사용하는데 부모의 높이가 0이 되는 이유는 무엇일까?
원래 float속성은 가로정렬을 하기위해서가 아닌 밑에 나온 컨텐츠와 어울러지게 할 수있게 나온 속성이다. 위로 떠 있는 느낌! 위로 떠 있기 때문에 부모의 크기를 아이템들이 잡을 수 없다.
3) css grid
브라우저 호환성때문에 쓰지 않는 경우가 있다. css grid는 더 상세히 다루기!