줄 높이 바꾸는 방법 - line-height

line-height는 줄 높이를 정하는 속성입니다. 문법 normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.
1 min read

line-height

문단의 첫 줄을 넘어 두 줄 이상되면 '줄 간격'이 생깁니다. 그런데 줄 간격은 너무 좁으면 글의 내용이 눈에 들어오지 않습니다. 이때 line-height 속성을 이용하면 원하는 만큼 줄 높이를 조절할 수 있습니다.

 

기본형

line-height : normal | length | number | percentage
  • normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.
  • length: 길이로 줄 높이를 정합니다.
  • number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.
  • percentage : 글자 크기의 몇 %로 줄 높이로 정합니다.

 

예제

줄 높이가 글자 크기보다 크면 글자 위와 아래에 여백이 생깁니다. 줄 높이가 글자 크기보다 작으면 글자가 겹치게 됩니다.

 

기타 CSS 참조

You may like these posts

  • transform-origin transform-origin은 회전 중심점(원점·기준점)을 지정합니다. transform, transition 속성과 함께 사용되는 속성입니다.   기본형 transform-origin: x-position | y-position | z-position …
  • perspective-origin perspective-origin 속성으로 요소와의 원근감(거리감) 기준점을 설정합니다. perspective 속성과 함께 사용합니다.   기본형 prespective-origin : x-position | y-position x…
  • transform / skew transform의 skew로 요소를 비틀기 또는 기울이기를 할 수 있습니다. 평면(2D)에서의 이동입니다.   기본형 transform : skew ( value ); value에 값을 입력합니다. 단위는 deg, rad, grad 등을 사용…
  • align-items align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 기본값은 stretch로, 컨테이너의 높이에 맞게 늘립니다.   기본형 align-items : stretch | flex-start | flex-end | center | baselin…
  • transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 평면(2D)에서의 회전입니다.   기본형 transform : rotate ( angle ); angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, tur…
  • transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면(2D)에서의 확대 또는 축소입니다.   기본형 transform : scale ( value ); value에 값을 입력합니다. 1은 원래의 크기이고 0.5, 1.5…

Post a Comment