line-height 파헤치기

썸네일

 

🚀 line-height

---

line-height는 글자의 높이를 지정하는 속성이다. line-height의 단위로는 normal, number, px, em, % 등이 있는데 number를 사용하는 것이 좋다. 좋은 이유?  한 번 araboja

참고로 initial value는 normal임!! font마다 갖고 있는 글자의 기본 높이를 의미!

 

1. line-height를 px값으로 줬을 경우

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

2. line-height를 em값으로 줬을 경우

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

더 큰 font를 자식 요소에서 사용했을 경우에 UI가 깨지는 문제가 발생한다.

 

3. line-height를 number값으로 줬을 경우

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

line-height: 1을 사용했을 때 생기는 일은 폰트의 위아래로 존재하는 leading 영역을 없애준다.

 

📌 리딩 영역이란?

leading 영역을 없애줌으로써 비로소 font-size에 맞는 line-height를 갖게 되는 것이다.

 

그럼 normal일 경우에는 leading 사이즈가 포함된 line-height를 갖게 된다!!

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

이렇게 잘 알지 못한 line-height 특성을 하나하나 빠개다 보니 아.. 내가 여태껏 line-height를 px단위로 썼던 건 미친 행위였구나.. 반성하게 됐다. 참 ㅎㅎ 알면 알수록 재밌다 CSS!!!