# inline-block

레이아웃을 구성할 때 float 외에 많이 쓰는 것중 하나인 inline-block



display : block (한행을 전부 차지)

display : inline-block (내 크기만큼 차지)

가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다.

display : inline-block을 사용해봅시다.

&#x20;

```html
<div class="container">
    <div class="header"></div>
    <div class="left"></div><div class="right"></div> 
    //이런식으로 공백을 없애줘야 한다.
    
    <div class="footer"></div>
</div>
 혹은 
<div class="container">
    <div>
       <div class="left"></div><!--
    --><div class="right"></div>
    </div>
</div>
```

{% code title="main.css" %}
```css
.left{
    width: 30%;
    height: 400px;
    background: cadetblue;
    display: inline-block;
}
.right{
    width: 70%;
    height: 400px;
    background: coral;
    display: inline-block;

}

```
{% endcode %}

위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다.&#x20;

display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다.

inline- block은 "내 폭과 높이만큼 자리차지하게 해주세요\~" 라는 뜻입니다.

간편하지만 <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에

가로로 정렬하려면 태그 사이의 공백도 제거해줘야합니다.

이런게 귀찮습니다 float 쓰셈&#x20;



주석은 실행되지 않는 코드입니다.&#x20;

HTML 코드는 \<!-- --> 이게 주석처리하는 코드이며

이 사이에 코드를 집어넣으면 실행되지 않습니다.

하지만 그래도 더러워보입니다.&#x20;

&#x20;





다른 방식&#x20;

1. left와 right 사이의 주석처리 혹은 공백제거&#x20;
2. 부모 div에 font-size : 0&#x20;

```html
<div class="container" style="font-size: 0px">
    <div class="header"></div>
    <div class="left" style="font-size: 20px; vertical-align: top;">asd</div><div class="right"></div>
    <div class="footer"></div>
</div>
```

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

이러면 해결인데 HTML이 깨끗해질지 모르겠지만 CSS가 더러워질 수 있겠군요.

둘 중에 덜 더러워보이는 방법을 하나만 사용하시면 되겠습니다.&#x20;



🎈. baseline이 옆에 존재하면 display : inline-block 요소들이 baseline 위에 오려고 함  > vertical-align: top속성 으로 해결



✨ 과제. 네이버 블로그 글목록 만들어보기  (blog1.html 파일)생성

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FdJLkIYgl5V6KezBN98LI%2FScreenshot_88.png?alt=media&#x26;token=f63e29fd-285b-4d1d-9211-df97dab35179" alt=""><figcaption></figcaption></figure>

