CSS line-height

line-height 단위 

normal이 기본단위이며 폰트 family에 따라 기본 line-height 값이 달라진다. 부모요소로부터 상속이 가능한 속성이다.

폰트를 '디자인 하신분들이 어떻게 디자인했냐'에 따라서 달라진다.

 

"font-size만큼 크기를 잡아도 왜 height의 값이 더 클까?"

line-height = font-size + 상/하 halfleading이기 때문이다.

font-size만큼 크기를 잡기 위해서는 line-height : 1로 설정해주면 된다. leading영역들이 없어지고 폰트사이즈만큼만 line-height를 가져가게 된다. 그래도 약간의 위 아래 공간이 남는데 폰트를 가져와서 따로 디자인을 설정하지 않는 이상 거의 불가능하다.

하지만 negative margin으로 해결은 가능하다.

 

line-height를 활용한 가운데 정렬

가운데 정렬을 위해 line-height를 높이와 맞춰주는 경우가 있는데 텍스트가 한줄이라면 문제가 발생하지 않지만 두줄이상이 된다면 텍스트간의 간격이 너무 넓어지기 때문에 문제가 발생한다는 것에 유의하면서 설정하도록 하자

 

 

반응형웹을 구현하기 위해서는 px과 같은 절대단위보단 상대단위를 이용해야 된다.

em 단위란?

현재 요소의 font-size에 대해서 비례한다. 그래서 폰트사이즈를 정하는 경우에 자주 사용한다.

현재 만약 해당요소에 font-size가 적용되어 있지 않다면 부모로부터 font-size를 물려받는다.

 

rem단위란?

em과 다르게 root최상단요소인 html의 font-size에 비례하는 단위를 의미한다.

 

letter-spacing이란?

글자 가로사이의 간격을 조절하는 속성