HTML/CSS - Baseline/Vertical-align

글을 쓸때 기본적으로 글자들은 크기가 달라도 보이지 않는 어떠한 선에 맞춰져 있습니다.

 

JSFiddle

결과와 같이 Hello와 World 사이즈가 다르지만 동일한 선에 맞춰져 있는 것을 확인할 수 있습니다.

이 선이 Baseline입니다! 아래 예시로 좀더 살펴보겠습니다.

 

JSFiddle

뒤에 inline-block 속성을 갖는 <div>는 inline 속성(div 태그의 기본값인 block이었다면, Korea와 같은 줄에 있을수 없다)이지만 자신만의 영역을 가지고 있습니다(block 속성).

여기서 baseline은 어디가 될까요? 바로 korea와 japan이 baseline이 됩니다. inline-block의 경우에는 div의 마지막 줄의 baseline이 전체의 baseline이 됩니다!

 

예외 경우를 살펴보겠습니다. 만약 inline-block의 내용이 없는 경우 baseline은 box의 밑으로 설정이 되고, box의 크기가 작다면 box가 아닌 inline-block 요소의 마지막 줄이 baseline이 됩니다!

 

JSFiddle

여기서 box를 기준으로 baseline을 설정하게 하는 방법이 있는데요, 바로 overflow를 사용하는 것입니다.

overflow 기본 값이 visible인데요, 이것을 hidden으로 바꿔주면 japan이 가려지면서 box의 끝이 baseline에 맞춰집니다!

 

JSFiddle

한발 더 나가보면 baseline의 위치는 고정되어있지 않고 변합니다.

 

여기서 vertical-align이라는 속성을 정리하려합니다. 영단어 그대로 수직으로 정렬을 시키는 것인데요,

아래 코드를 살펴보면 korea에 vertical-align 을 top 값을 적용하였는데 japan과 usa가 위로 따라온것을 확인할 수 있습니다. 이유는 korea를 제외한 요소들 중 가장 높은 곳(japan)을 기준으로 korea가 정렬되기 때문입니다!

korea가 japan의 크기에 맞게 vertical-align을 하려면 korea와 japan의 top이 맞춰져야하는데요, korea를 내려서 japan의 top과 맞추게 되면 부모태그(<div>)의 높이에 영향을 주기때문에 baseline이 부모태그의 height에 영향을 안주면서 상황에 맞게 움직이게 됩니다.

즉 baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치하게 됩니다!