코딩일기

텍스트 줄간격 설정하기 - line-height(행간)

jhy_2023 2024. 2. 5. 12:49
728x90
반응형

텍스트가 여러 줄일 경우, 텍스트의 상하 간격이 너무 붙어 있으면 글을 읽기가 어려울 수 있기 때문에,
위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있습니다.
이러한 여유 공간을 leading이라고 합니다.
line-height의 크기는 font-size와 leading을 포함합니다.
font-size 속성은 글자 자체의 크기를 말합니다.
line-height가 font-size보다 작으면 텍스트가 겹쳐 보이기 때문에 가독성이 떨어지므로  line-height는 font-size보다 크게 지정하는 편이 좋습니다.


line-height은 주로 CSS에서 사용되며, 다음과 같은 방법으로 설정됩니다


선택자 {
    line-height: 값;
}



normal : : 기본값(보통 1.2)

고정된 값: px,em등의 고정된 값을 사용하여 줄 높이를 설정할 수 있습니다. 예를 들어, line-height: 20px;는 한 줄의 높이를 20px로 설정합니다.

상대적인 값: 숫자 값을 사용하여 줄 높이를 설정할 수 있습니다. 이 값은 현재 폰트 크기의 배수로 해석됩니다. 예를 들어, line-height: 1.5;는 현재 폰트 크기의 1.5배의 높이로 설정합니다.


백분율: 백분율 값을 사용하여 줄 높이를 설정할 수도 있습니다. 이것은 부모 요소의 폰트 크기를 기준으로 한 백분율입니다.


line-height는 텍스트의 가독성과 레이아웃을 개선하는 데 중요한 역할을 합니다. 
적절한 line-height 를 설정하면 텍스트가 보다 읽기 쉽고 균일한 간격을 갖게 됩니다. 
또한, line-height를 통해 텍스트 요소 사이의 간격을 조절하거나 다중 줄 텍스트의 레이아웃을 향상시킬 수 있습니다.

728x90
반응형