HTML/CSS] baseline이란?

 

vetical-align 속성을 사용하려면 baseline을 알아야하는데요. baseline은 기준선이라는 의미로 정렬을 할 때, 중요한 기준이 됩니다.쉬운 내용이지만 헷갈릴 수 있으니 한번 알아두면 좋습니다. 

baseline

 

 

아래 그림처럼 글자의 마지막을 주욱~ 그엇을 때 이어지는 선이 baseline입니다. 알파벳이 조금 삐져나오긴 하지만 저 빨간 선을 기준으로 글자가 쓰여졌다는 걸 알 수 있습니다.

그런데 조금 헷갈릴 때가 있습니다. overflow를 써서 예시를 들어보겠습니다. 

 

1. overflow : scroll
이런 경우에는 요소의 margin 끝이 기준이 됩니다. 

 

2. overflow : visible
글자가 보이는 경우에만 글자의 끝이 baseline으로 설정됩니다.

 

3. overflow : hidden
글자가 보이지 않고 끝이 요소 박스로 끝나면 요소의 margin 끝이 baseline이 됩니다