CSS의 line-height 속성은 텍스트 한 줄의 높이, 즉 줄 간격(행높이)을 설정하는 데 사용됩니다. 이 속성은 문단 내에서 텍스트가 세로로 얼마나 떨어져 배치될지를 결정하며, 가독성을 높이는 데 중요한 역할을 합니다.
line-height 속성에 사용할 수 있는 값
line-height 속성의 값은 다음 세 가지 형태로 지정할 수 있습니다.
- 숫자(number): 글꼴 크기에 대한 배율로 지정합니다. 예를 들어 값이 2이면 글자 크기의 두 배가 줄 높이가 됩니다.
- 길이(length): px, em, rem 등 고정 단위로 지정합니다. 예를 들어
line-height: 30px;처럼 사용합니다. - 백분율(percentage): 글꼴 크기를 기준으로 백분율(%)로 지정합니다.
예제
아래 예제는 너비 300픽셀, 높이 100픽셀인 문단 요소에 line-height를 30픽셀로 적용한 코드입니다.
<html> <head> </head> <body> <p style = "width:300px; height:100px; border:2px solid green; padding:5px; margin:10px; line-height:30px;"> 이 문단은 너비 300픽셀, 높이 100픽셀이며, 여기서 줄 높이(line-height)는 30픽셀로 설정되어 있습니다. </p> </body> </html>
참고 사항
일반적으로 본문 텍스트에는 숫자 값을 사용하는 것이 권장됩니다. 숫자 값은 자식 요소에서 글꼴 크기가 달라지더라도 그 크기에 비례하여 줄 간격이 자동으로 계산되기 때문입니다. 보통 가독성이 좋은 줄 간격은 글꼴 크기의 1.4배에서 1.6배 사이로 설정합니다.