HTML & CSS 기초 - 레이아웃 만들기 2 "Inline block"

가로로 정렬할 떄 쓰이는 것이 float 속성만 있는 것은 아니다.
오늘 소개할 것은 inline-block 속성이다.

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

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

inline-block 속성은 "나의 폭과 높이만큼 공간을 차지한다" 라는 속성이다.
다시 말하면 내가 설정한 크기만큼 공간을 차지한다는 뜻인데.
얼핏 보기에는 이상적이여 보이지만 태그 사이에 공백 또한 화면에 나타내어 코드를 한줄로 길게 써야 하기에 보기 안 좋다.
이러한 이유 때문에 inline-block 보다는 보통 float 속성을 쓴다고 한다.

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

HTML에서 주석처리하는 코드는<!-- -->이다.
CSS에서는 /**/와 //이 있다.

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

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

font-size 속성은 inherit 되기 때문에 안에 있는 <div>와 그 사이에 있는 공백도 font-size가 0px이 된다.