레이아웃 만들기 2: 귀찮은 inline-block

display: inline-block 사용법

가로로 정렬을 할 때는 float: left만 사용할 수 있는 건 아니다. display: inline-block을 사용해보자.

<div>
  <div class="left-box"></div><div class="right-box"></div>
</div>

.left-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}
.right-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}

위의 코드는 박스를 만들어 왼쪽으로 정렬하는 코드. display 속성만 inline-block으로 조정하면 가로로 배치가 가능하다. 간편하지만 태그 사이에 공백이 존재하면 안되고 무척이나 귀찮다. float이나 쓰자.

1. 공백 제거 편법 - 주석기호 사용하기

<div>
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

주석은 실행되지 않는 코드를 말한다. 하지만 코드가 무척이나 더러워 보인다.

2. 공백 제거 편법 - 부모의 폰트사이즈를 0으로 만들기

<div style="font-size : 0px;">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

font-size 속성은 inherit 되기 때문에 div 태그와 그 사이에 있는 공백도 font-size가 0이 된다. 해결은 될지 몰라도 이 방법도 무척이나 더러워 보인다.