CSS의 line-height 속성은 HTML 요소의 줄 높이(행간)를 결정합니다. 주로 텍스트 줄 사이의 간격을 설정하는 데 사용되며, 키워드, 백분율 또는 숫자 값을 이용해 지정할 수 있습니다.
line-height 속성을 활용하면 웹 페이지에서 인라인 요소 사이의 간격을 자유롭게 정의할 수 있습니다. 많은 개발자가 이 속성을 사용해 웹 페이지 내 텍스트 줄 간격을 넓히거나 좁힙니다.
이 글에서는 CSS line-height 속성의 사용 방법을 실제 예제와 함께 살펴봅니다. 끝까지 읽고 나면 코드에서 line-height 속성을 능숙하게 활용할 수 있게 될 것입니다.
CSS line-height란?
CSS line-height 속성은 라인 박스(line box)의 높이를 설정합니다. 라인 박스는 CSS 박스를 구성하는 각 줄을 의미하며, 이 속성은 주로 텍스트 줄 사이의 거리를 조정하는 데 활용됩니다.
줄 높이를 조절하면 웹 페이지에서 텍스트(또는 다른 요소) 줄 사이의 간격을 간접적으로 조정할 수 있습니다. 마이크로소프트 워드에서 문서를 1.15배 또는 2배 행간으로 설정하는 것과 비슷한 개념입니다.
line-height 속성의 기본 문법은 다음과 같습니다.
line-height: lineHeight;
여기서 "lineHeight"는 요소의 줄 높이를 설정하는 길이 값을 의미합니다.
line-height 속성에 사용할 수 있는 값은 크게 세 가지입니다. 바로 길이(length), 숫자(number), 백분율(percentage)입니다.
| 값 유형 | 설명 | 예시 값 | 결과 |
|---|---|---|---|
| 길이(Length) | 특정 측정 단위(em, px, cm 등)로 줄 높이를 지정합니다. | 10px, 15px, 20px | 10px로 지정하면 줄 높이는 10px가 됩니다. |
| 숫자(Number) | 글꼴 크기의 배수만큼 줄 높이를 설정합니다. | 1, 1.8, 2 | 글꼴 크기가 10px라면 줄 높이는 각각 10px, 18px, 20px가 됩니다. |
| 백분율(Percentage) | 요소 글꼴 크기를 기준으로 백분율로 줄 높이를 설정합니다. | 30%, 50%, 110% | 글꼴 크기가 10px라면 줄 높이는 각각 3px, 5px, 11px가 됩니다. |
또는 "normal" 키워드를 지정할 수도 있습니다. 이 키워드는 브라우저 기본값을 사용하도록 하며, 일반적으로 약 1.2 정도의 값을 가집니다(브라우저에 따라 다를 수 있음).
line-height 속성을 박스에 적용하면 해당 박스 안의 모든 텍스트가 지정된 줄 높이를 따르게 됩니다.
접근성 관련 참고 사항
줄 간격 변경은 line-height 속성의 가장 흔한 용도 중 하나입니다. 항상 줄 사이에 충분한 공간이 확보되어야 하기 때문입니다. 줄 간격이 좁으면 텍스트를 읽기 어려워질 수 있습니다.
읽기 어려운 텍스트는 시각 장애가 있는 사용자에게 특히 심각한 영향을 미칩니다. 따라서 웹사이트를 제작할 때는 언제나 접근성을 고려해야 합니다.
CSS에서 숫자 값으로 줄 높이를 설정할 때는 1.5 미만의 값을 사용하지 않는 것이 좋습니다. 1.5보다 낮은 값은 시각 장애가 있는 독자가 웹사이트를 이용하기 더 어렵게 만들 수 있습니다.
CSS line-height 예제
예를 들어, 지역 요리 동아리 웹사이트의 '소개(About Us)' 페이지를 디자인한다고 가정해 보겠습니다. 이 페이지에는 제목과 함께 동아리를 설명하는 단락이 포함되어 있습니다.
텍스트가 적절한 간격으로 배치되기를 원하므로, 페이지 내 단락의 줄 높이를 1.6rem으로 설정하기로 했습니다. 다음 코드를 사용하면 됩니다.
<html>
<h2>About Us</h2>
<p>Fantastic Chefs는 2007년에 설립된 시애틀 지역 요리 동아리입니다. 우리 동아리는 매주 모임을 갖고 레시피를 공유하고, 요리 기술을 논의하며, 함께 음식을 만듭니다. 매주 토요일 오후에는 회원들이 시애틀에 있는 우리의 주방에 모입니다.</p>
<style>
p {
font-size: 16px;
line-height: 1.6rem;
}
HTML 파일에서는 <h2> 태그로 'About Us' 제목을 정의하고, 그 아래 Fantastic Chefs에 대한 설명을 <p> 태그로 감싸 작성했습니다.
CSS에서는 하나의 규칙(rule)을 정의했으며, 이 규칙은 두 가지 CSS 속성을 사용합니다. 즉, 모든 <p> 태그에 대해 줄 높이를 1.6rem으로, 글꼴 크기를 16px로 설정한 것입니다.
여기서 line-height 속성에 사용한 'rem' 단위는 루트(root) 요소의 글꼴 크기를 기준으로 줄 높이를 상대적으로 지정합니다. 'rem'은 'root element'의 약자입니다. 따라서 글꼴 크기가 16px이므로 이 단락의 줄 높이는 25.6px(16px × 1.6)이 됩니다.
위 단락의 텍스트는 적절한 간격으로 배치되어 서로 겹치지 않습니다.
또한 위 예제에서 <div> 요소에 line-height를 적용할 수도 있습니다. 이 경우 <div> 태그 안의 모든 텍스트에 지정한 줄 높이가 적용되며, 제목과 <p> 태그 모두 영향을 받게 됩니다.
마무리
CSS line-height 속성은 라인 박스의 높이를 설정합니다. 일반적으로 단락이나 제목의 텍스트 줄 간격을 조정하는 데 사용되며, normal 키워드, 백분율, 길이 값 또는 숫자 값으로 지정할 수 있습니다.
이 글에서는 CSS line-height 속성의 기본 개념과 코드에서의 활용 방법을 알아보았습니다. 이제 전문가처럼 line-height 속성을 사용할 준비가 되셨습니다!
웹 개발자를 꿈꾸고 계신가요? 검증된 학습 로드맵과 추천 강좌가 담긴 CSS 학습 가이드를 확인해 보세요.