[HTML , CSS] line-height 속성과 vertical-align 속성의 관계

안녕하세요! 오늘은 line-height 속성과 vertical-align 속성의 관계에 대해서 알아보겠습니다.

먼저 line-height 속성과 vertical-align 속성은 함께 자주 쓰이고 있기 때문인데요!

 

두가지 속성 중에서 line-height 속성에 대해서 먼저 알아보겠습니다.

 

⊙ line-height

: 말 그대로 라인의 높이를 뜻하는데요 이해하기 쉽게 저희가 전에 블럭요소와 인라인 요소에 

대해서 배웠죠 즉 문자열의 가독성을 좋게 하기 위한 문자의 인라인요소들의 라인박스라고

보시면 됩니다.

 

기본적으로 문자를 입력하게 되면 가독성을 위해서 자동적으로 행끼리 서로 달라붙지 않고 살짝 띄워있습니다.

 

 

 

* 아래처럼 글자가 붙어 있다면 가독성이 매우 떨어지겠죠?

 

 

즉 행간의 높이를 조절할 때 line-height를 사용하게 되죠.

하지만 이 line-height에 절대값 px를 주게 되면 폰트사이즈가 변경되었을 때 line-height의 값은 변하지않게 되므로

텍스트크기는 커졌지만 그것을 감싸고 있는 line-height의 값이 더 작아지는 아이러니한 상황이 발생하게 됩니다.

이것을 조정하기 위해서는 절대값이 아닌 상대값을 주는 것이 더 편리합니다.

 

line-height를 1로 설정한다는것은 폰트사이즈만큼 높이를 갖겠다는 뜻이 됩니다.

예를들어, font-size가 18xp라면 line-height도 18px만큼 높이가 된다는 것 입니다.

이러면 글자가 어떻게 보일까요?

 

 

위에서 보았듯이 글자행끼리의 여백이 사라지기때문에 매우 지저분해보입니다.

 

 

 

따라서 이 상태로 여러 줄로 글을 쓰게 되면 글의 가독성이 매우 떨어질 것 입니다.

그럼 line-height를 1.5로 높여보겠습니다.

 

 

 

 

그럼 위의 행간이 더 넓어진 것을 볼 수 있습니다. 훨씬 가독성이 높아지게 되어 읽는데 무리가 없게 됩니다.

여기까지 line-height에 대해서 이해가 되었다면 vertical-align에 대해서 알아보겠습니다.

 

⊙ vertical-align 

 

vertical-align이란? 

모든 인라인요소의 수직 정렬을 위해 사용됩니다.

하지만 블록요소의 수직 정렬에는 영향을 미치지 않습니다.

 

ul 에 line-height를 주기위해서 li  요소에 inline-block요소로 만들어줍니다.

 

 

li 요소 4개가 나란히 나열되어 있는데 li요소 중에 동그라미 이미지는 위로 올라간 것을 볼 수 있습니다.

수직가운데 정렬이 되는 것을 위해서 vertical-align 을 사용해서 배치해보겠습니다.

 

제일 먼저 인라인 요소로 만들었다면 ul에 line-height 값을 1로 지정해줍니다.

 

 

 

 

이제는 모든 준비가 되었기 때문에 vertical-height : middle 적용시켜줍니다.

 

 

 

 

vertical-align을 인라인요소에 적용시켜주니 수직가운데 정렬이 된 것을 볼 수 있습니다.

 

 

 

정리

 

1. vertical-align을 적용해주고 싶은 라인박스(ul)를 기준으로 li를 inline-block요소로 만들어주기

2. 라인박스(ul)에 line-height를 적용해줍니다.

3. 인라인요소에 vertical-align을 적용시켜주면 수직가운데 정렬이 된 것을 볼 수 있습니다.

 

여기까지 line-height 속성과 vertical-align 속성의 관계에 대해서 알아보았습니다.