화면 쪽 개발을 하다 보면 컨텐츠르 가로로 배치해야할 경우가 있다.
정식으로 css 퍼블리싱을 배우지 않은 사람으로써 급 당황스러워 졌다.
흠..
과거에는 table 태그로 했는데... 갑자기 css 를 써서 하려니 대략 난감해 졌는데..
이런 저런 삽질을 하다가 나름 알아낸것을 공유해보면..
일단 컨텐츠를 가로로 나열할 부분의 전체 wrap 역할을 하는 div 를 만들고
<div>
</div>
그 안에 가로로 배열할 컨텐츠 2개가 있다고 가정하면
<div>
<div></div>
</div></div>
</div>
이렇게 되겠다.
안에 있는 div 2개를 가로로 배치해야 하는데.. div는 block element라 한 줄 씩 블럭쌓듯이 다 차지한다.
한줄 전체를 다 차지하는 block element를 가로로 나란히 해야하는데..
그럴려면 일단 사이즈는 줄여야 겠다. 한 300px로 해본다.
그런 다음 float:left로 띄우면 블록엘리먼트인 div가 띄워져서 옆으로 붙는다.
<div>
<div style="float:left;width:300px">
<div>
<div style="float:left;width:300px">
<div>
</div>
float:left 를 첫번째 div만 쓰면 안되고 2번째 div에도 써줘야 한다.
사실 첫번째 div만 쓰면 되겠지.. 하고 해봤으나 되지 않았다.
가로로 배열하고 싶을 때는 모든 div 엘리먼트를 띄워줘야 한다.
예제로 보여주기 위해서 width만 잡았는데 실전에서는 height 도 같이 잡아서 하면 될듯 하다.
그러고 노파심에서 하는 얘기인데 소스를 수정하고 바로 f5를 눌러서 확인해보려고 하면 안될 수 있다. 실제 웹 브라우저에 반영될때까지 시간이 걸린다.
너무 조급해 하지 말고 천천히 마음에 여유를 가지고 개발해야 할듯 하다.
실제 현실은 어렵지만..
