CSS에서 텍스트 줄의 높이를 조절하려면 line-height 속성을 사용합니다. 이 속성은 문단 내에서 각 줄이 차지하는 세로 공간을 결정하며, 가독성과 레이아웃 디자인에 중요한 역할을 합니다.
line-height 속성의 값은 다음과 같은 형태로 지정할 수 있습니다.
- 숫자(number): 글꼴 크기에 대한 배율로 지정합니다. 예:
line-height: 1.5; - 길이(length): px, em 등 고정 단위로 지정합니다. 예:
line-height: 30px; - 백분율(percentage): 글꼴 크기 기준 백분율로 지정합니다. 예:
line-height: 150%;
예제 코드
아래 예제는 너비 300픽셀, 높이 100픽셀인 문단에 line-height 속성을 적용한 모습입니다.
<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>
위 코드를 실행하면 초록색 테두리가 있는 문단 안에서 텍스트 줄 사이의 간격이 30픽셀로 벌어져 있는 것을 확인할 수 있습니다.
참고 사항
일반적으로 본문 텍스트에는 숫자 값(예: 1.4~1.6)을 사용하는 것이 권장됩니다. 숫자 값은 자식 요소에서도 부모의 글꼴 크기에 비례하여 계산되므로 반응형 웹 디자인에서 더 유연하게 동작하기 때문입니다.