CSS line-height 속성은 다양한 HTML 요소의 줄 높이를 결정합니다. 일반적으로 텍스트 줄 사이의 거리를 설정하는 데 사용됩니다. 줄 높이는 키워드, 백분율 또는 숫자 값을 사용하여 설정할 수 있습니다.
CSS line-height 속성을 사용하면 개발자가 웹 페이지에서 두 인라인 요소 사이의 공간을 정의할 수 있습니다. 개발자는 종종 CSS line-height 속성을 사용하여 웹페이지의 텍스트 줄 사이의 거리를 늘리거나 줄입니다.
이 자습서에서는 CSS line-height 속성을 사용하는 방법에 대해 설명합니다. 시작하는 데 도움이 되는 예를 참조하겠습니다. 이 튜토리얼을 읽으면 코드에서 line-height 속성을 사용하는 데 마스터가 될 것입니다.
CSS 줄 높이
CSS line-height 속성은 라인 상자의 높이를 설정합니다. 라인 박스는 CSS에서 박스를 구성하는 라인입니다. 이 방법은 텍스트 줄 사이의 거리를 설정하는 데 자주 사용됩니다.
줄 높이를 조정하면 웹 페이지에서 텍스트 줄(또는 다른 요소) 사이의 간격을 간접적으로 조정할 수 있습니다. 이는 Microsoft Word의 텍스트 서식을 두 배 또는 1.15 간격으로 지정하는 것과 비슷합니다.
CSS line-height 속성의 구문은 다음과 같습니다.
line-height: lineHeight;
"lineHeight"는 요소의 줄 높이를 설정하는 길이 값을 나타냅니다.
line-height 속성과 함께 사용할 수 있는 세 가지 유형의 값은 길이, 숫자 및 백분율입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
| 값 | 설명 | 예시 값 | 결과 예시 값 |
| 길이 | 특정 측정 단위(예:em, px, cm)를 사용하여 줄 높이를 설정합니다. | 10px, 15px, 20px | 10px를 지정하면 줄 높이는 10px가 됩니다. |
| 숫자 | 글꼴 크기의 배수와 같도록 줄 높이를 설정합니다. | 1, 1.8, 2 | 글꼴 크기가 10px인 경우 줄 높이는 각각 10px, 18px 및 20px입니다. |
| 백분율 | 줄 높이를 요소의 글꼴 크기에 대한 백분율로 설정합니다. | 30%, 50%, 110% | 글꼴 크기가 10px인 경우 줄 높이는 각각 3px, 5px 및 11px입니다. |
또는 "normal" 키워드를 지정할 수 있습니다. 이 키워드는 브라우저 기본값의 사용을 지정합니다. 이 값은 일반적으로 뷰어가 사용하는 브라우저에 따라 약 1.2입니다.
line-height 속성을 상자에 적용하면 해당 상자 안의 모든 텍스트는 지정한 줄 높이를 사용합니다.
접근성에 대한 참고 사항
줄 간격 변경은 줄 높이 속성의 일반적인 사용입니다. 이는 항상 줄 사이에 적절한 공간이 있는지 확인하기를 원하기 때문입니다. 줄 사이에 공간이 충분하지 않으면 텍스트를 읽기 어려울 수 있습니다.
읽기 어려운 텍스트는 시각 장애가 있는 사람들에게 특히 심각한 영향을 미칩니다. 웹사이트를 구축할 때는 접근성을 항상 고려해야 합니다.
CSS에서 요소의 줄 높이를 설정하기 위해 숫자를 사용할 때 1.5보다 작은 값을 사용해서는 안 됩니다. 줄 높이 값이 1.5보다 낮으면 시각 장애가 있는 독자가 웹사이트를 사용하기가 더 어려워질 수 있기 때문입니다.
줄 높이 CSS 예
지역 요리 클럽 웹사이트의 "회사 소개" 페이지를 디자인한다고 가정해 보겠습니다. 페이지에는 클럽에 대한 설명을 간략하게 설명하는 텍스트 단락이 뒤따르는 제목이 포함되어 있습니다.
우리는 텍스트의 간격을 적절하게 유지하기를 원합니다. 그래서 우리는 웹 페이지의 텍스트 단락의 줄 높이를 1.6rem으로 설정하기로 결정했습니다. 다음 코드를 사용하여 수행할 수 있습니다.
<html>
<h2>About Us</h2>
<p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p>
<style>
p {
font-size: 16px;
line-height: 1.6rem;
}
코드는 다음을 반환합니다. 
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
HTML 파일에서
태그를 사용하여 "About Us" 헤더를 정의했습니다. 그런 다음 Fantastic Chefs에 대한 설명을 작성하고 해당 설명을 HTML
태그로 묶었습니다.
CSS 파일에서 하나의 규칙을 정의했습니다. 우리 규칙은 두 개의 CSS 속성을 사용합니다. 모든
HTML 태그
에 대해 줄 높이를 1.6rem으로, 글꼴 크기를 16px로 설정했습니다.line-height 속성과 함께 사용한 "rem" 측정 단위는 루트 요소의 글꼴 크기를 기준으로 줄 높이를 설정합니다. "rem"은 "루트 요소"를 나타냅니다. 따라서 글꼴 크기가 16픽셀이었기 때문에 이 텍스트 단락의 줄 높이는 25.6픽셀(16픽셀 * 1.6)이었습니다.
위 단락의 텍스트는 적절하게 간격을 두고 겹치지 않습니다.
위의 예에서
태그가 모두 영향을 받는다는 것을 의미합니다.
결론
CSS line-height 속성은 라인 상자의 높이를 설정합니다. 일반적으로 이 속성은 단락이나 제목에서 텍스트 줄 사이의 간격을 설정하는 데 사용됩니다. line-height는 normal 키워드, 백분율, 길이 또는 숫자 값을 사용하여 설정할 수 있습니다.
이 자습서에서는 CSS line-height 속성의 기본 사항과 이를 코드에서 사용하는 방법에 대해 설명했습니다. 이제 전문가처럼 CSS line-height 속성을 사용하는 데 필요한 지식을 얻었습니다!
웹 개발자가 되려고 하시나요? 최고의 학습 리소스 및 과정에 대한 전문가 팁과 지침은 CSS 학습 방법 가이드를 확인하세요.