[css] 인라인블럭으로 레이아웃 잡을 때 주의할 점

 

 

보통 요소들을 수평정렬할 때 세가지 방법을 사용한다.

 

1. flex

제일 쉽고 간편하다.

하지만 일부 브라우저에서 제한적으로만 사용가능하다.

곧 IE가 사라진다면 최적의 방법.

 

2. float

예전에 많이 구현하던 방법으로, 요소 자체를 띄워버린다.

float을 사용하면 clearfix 등으로 한번 보완을 해줘야하는 단점이 있고,

부작용이 꽤 있어 요즘은 선호하지 않는 방식.

 

3. inline-block

네비게이션을 만들 때 자주 쓰는 사용된다.

요소를 inline화시켜 수평정렬한다.

 

 

오늘은 인라인블럭으로 레이아웃 잡을 때의 주의점에 대해 포스팅해보려고 한다.

많은 분들이 사용하는 방법이지만, 주의해야할 점을 인지하지 못하는 경우가 많다.

예제를 보며 확인해보자.

(아래의 코드펜은 바로 수정이 가능하니 페이지를 벗어나지 않고 함께 실습해봐도 좋다!)

 

See the Pen inline-block layout by Gia (@gia-world) on CodePen.

 

주의점 1. font-size

보통 인라인블럭으로 레이아웃을 잡는 경우, 브라우저에서 자동으로 요소 사이의 여백이 생긴다.

예제에서 파란색 박스 사이의 공간이 보이는 것을 확인할 수 있다.

이는 부모요소에 폰트 사이즈가 잡혀 있어 발생하는 이슈로,

정렬 대상의 상위 요소, 위의 예제에선 ul에 font-size:0 을 주면 여백이 사라진다.

단 대상인 li에도 그 내용이 상속되므로, font-size:16px 등으로 재지정해주어야 한다.

 

 

주의점 2. line-height

예제의 파란색 박스가 하늘색 박스의 수직 가운데로 오게 하려면 어떻게 하면 좋을까?

일반적으로 line-height를 떠올릴 것이다.

현재 하늘색 박스인 ul의 높이는 100px로, ul에 line-height:100px을 줘보자.

글씨만 가운데로 내려올 것이다.

그럼 파란색 박스를 내리려면?

파란색 박스 li에 vertical-align:middle 을 준다.

li 내부의 텍스트는 현재 ul의 line-height:100px을 상속하고 있으므로

줄넘침이 발생하지 않도록 line-height:16px 등으로 재지정해준다.

 

 

 

위의 내용들을 기억하여 인라인 블럭으로도 자유자재로 레이아웃을 잡아보자!