css - display : inline-block 사용하는 방법 정리하기

 

이번글에서는 css - display : inline-block을 사용해보겠습니다.

 

이전에 블로그 글에서 가로로 정렬할 때 float : left 를 사용했습니다.

그러나 이것만 쓸 수 있는 것은 아닙니다.

지금 만들 것은 아래와 같은 레이아웃을 만들어 보도록 하겠습니다.

 

 

단순한 블로그의 레이아웃

 

 

display : inline-block 을 content와 menu에 넣어주면 됩니다.

display : inline-block을 사용

<div class="container">       <div class="header"></div>       <div class="content"></div>       <div class="menu"></div>       <div class="footer"></div> </div> .container {   width: 800px; } .header {   width: 100%;   height: 50px;   background-color: rgb(100, 237, 123); } .content {   width: 80%;   height: 400px;   background-color: coral;   display: inline-block; } .menu {   width: 20%;   height: 400px;   background-color: cornflowerblue;   display: inline-block; } .footer {   width: 100%;   height: 70px;   background-color: darkblue; }

 

display : inline-block 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다.

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

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

 

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

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

float 가 사용하기 더 편하다고 생각됩니다. 여러분들도 float를 사용하시기 바랍니다. 

 

사이에 스페이스바 공백을 제거하는 방법은 font-size를 0으로 하는 것입니다.

<div class="container" style="font-size: 0px">       <div class="header"></div>       <div class="content"></div>       <div class="menu"></div>       <div class="footer"></div> </div>

 

 

이렇게 설정을 해주면 레이아웃이 잘 만들어 지게 됩니다.