관리 메뉴

CASSIE'S BLOG

line-height (텍스트 요소 내에서 행 사이의 수직 간격을 조절하는 데 사용) 본문

PROGRAMMING/React

line-height (텍스트 요소 내에서 행 사이의 수직 간격을 조절하는 데 사용)

ITSCASSIE1107 2023. 10. 9. 17:49

line-height의 값은 다양한 형식을 가질 수 있으며, 일반적으로 다음과 같은 방식으로 사용됩니다:

  • 절대 값: 픽셀(px) 또는 포인트(pt)와 같은 고정된 길이 단위를 사용하여 줄 간격을 지정할 수 있습니다. 예를 들어, line-height: 20px;은 각 줄 간격을 20px로 설정합니다.
  • 상대 값: 1.5와 같이 숫자를 사용하여 줄 간격을 설정할 수 있습니다. 이 경우, 현재 폰트 크기의 1.5배로 줄 간격이 설정됩니다. 즉, 현재 폰트 크기의 150%로 줄 간격이 조정됩니다.

line-height: 1.5;는 현재 폰트 크기의 1.5배로 줄 간격을 설정하는 예입니다. 이렇게 설정하면 텍스트가 보다 가독성 있고 텍스트 줄이 서로 겹치지 않도록 보다 자연스러운 간격을 갖게 됩니다. 특히 글꼴 크기와 줄 간격이 잘 조정된 텍스트는 웹 페이지의 가독성을 향상시키는 데 도움이 됩니다.

반응형