line-height
속성의 이해
line-height
속성은
텍스트 행의 높이를 설정합니다. 텍스트의 위/아래 가운데를 기준으로 위/아래로 길어지거나 짧아집니다.
이러한 특징을 이용하면 텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다.
line-height
속성의 이러한 특징으로 인해서 텍스트의 행간 높이 설정과 내부 라인 박스(line box)의 최소 높이를 지정하는 두 가지 효과가 있습니다.
텍스트의 행간 높이를 설정
텍스트의 행간 높이를 설정합니다.
텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다.
line-height 속성은 텍스트 행의 높이를 설정합니다. 이러한 특징을 이용하면 텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다.
라인 박스의 최소 높이를 지정
이 속성이 블록 컨테이너 요소에 적용될 때는 해당 요소 내부 라인 박스(line box)의 최소 높이를 지정합니다.
라인 박스(line box)란
블록 컨테이너 요소 내부에 수평으로 된 가상의 공간을 의미하며 인라인 콘텐츠(예: 텍스트, 이미지, 링크, input 등)가 렌더링되는 공간을 말합니다.
단, flex
나 grid
박스 컨테이너에 적용될 때에는 텍스트 콘텐츠만이 해당 요소 내부 라인 박스의 최소 높이를 지정합니다.
<div style="background-color: yellowgreen;">
<input type="text">
</div>
line-height
속성의 형식은 다음과 같습니다.
형식 구문
selector {
line-height: /* value */
}
형식 정의
초깃값 | normal |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
퍼센트(% ) 단위 값 |
요소 자체의 폰트 크기를 참조합니다. |
애니메이션 | 길이 단위가 있는 값에만 적용됩니다. |
구문
line-height
속성 값 예시
/* 키워드 값 */
line-height: normal;
/* 숫자 값 */
line-height: 1.5; /* 현재 font-size의 1.5배의 크기 */
/* % 단위 값 */
line-height: 150%; /* 현재 font-size의 150%의 크기 */
/* 길이 단위 값 */
line-height: 28px;
line-height: 2.5em;
/* font 단축 표현 속성 */
font: 25px/1.5 arial, sans-serif; /* line-height는 1.5 */
/* 글로벌 값 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;
주의할 점
- 숫자 값이나 퍼센트(
%
) 단위 값의 기준은 현재 요소의font-size
입니다. - 애니메이션은 길이 단위가 있는 값에만 적용됩니다.
line-height
속성의 작동 방식
단순하게 line-height
속성의 작동 방식을 텍스트의 줄 간격, 즉 행간을 조절한다고만 이해하는 것은 잘못된 것입니다.
line-height
속성은 블록 요소 내의 라인 박스 높이를 설정하는 것입니다.
이 속성의 이름이 'line height'라는 것에 주목하세요. 앞서 설명했듯이 라인 박스는 블록 컨테이너 요소 내부의 수평으로 된 가상의 공간으로 텍스트나 이미지, input 등 인라인 콘텐츠(콘텐츠의 앞이나 뒤를 강제로 줄바꿈하는 성격이 없는 콘텐츠)가 렌더링되는 공간을 의미합니다.
따라서, line-height
속성은 텍스트의 줄 간격, 즉 행간을 조절하는 것 이외에도 인라인 콘텐츠의 최소 높이도 조절할 수 있습니다. 또한, line-height
속성은 높이 조절을 할 때 인라인 콘텐츠의 위/아래 가운데를 기준으로 위/아래로 길어지거나 짧아집니다.
다음의 세 가지 예시들을 통해 차근차근 살펴보겠습니다.
line-height
속성은 높이 조절을 할 때 인라인 콘텐츠의 위/아래 가운데를 기준으로 합니다.
<style>
p {
background-color: yellowgreen;
}
</style>
<p style="line-height: 500%">
이 텍스트는 line-height가 500%입니다.
</p>
<p style="line-height: 100px">
이 텍스트는 line-height가 100px입니다.
</p>
<p style="line-height: 5px">
이 텍스트는 line-height가 5px입니다.
</p>
이 텍스트는 line-height가 500%입니다.
이 텍스트는 line-height가 100px입니다.
이 텍스트는 line-height가 5px입니다.
위 예시들을 보면 알 수 있듯이 line-height
속성은 높이 조절을 할 때 인라인 콘텐츠의 위/아래 가운데를 기준으로 합니다.
line-height
속성은 텍스트 세로 기준으로 가운데 정렬하는데 유용합니다.
line-height
속성은 인라인 콘텐츠가 없을 경우 작동하지 않습니다.
<style>
p {
background-color: yellowgreen;
border: 2px solid red;
}
</style>
<p style="line-height: 500px">
<!-- 인라인 콘텐츠가 없을 경우 작동하지 않습니다. -->
</p>
위 예시를 보면 line-height
속성은 인라인 콘텐츠가 없을 경우 작동하지 않습니다. 이것은 당연한 것입니다. line-height
속성은 해당 요소의 높이를 지정하는 것이 아니라 블록 요소 내 라인 박스 높이를 설정하는 것이기 때문입니다. 라인 박스는 인라인 콘텐츠가 없을 경우 생성되지 않습니다.
line-height
속성은 텍스트에만 적용되는 것이 아니라 인라인 콘텐츠에도 적용됩니다.
<style>
p {
background-color: yellowgreen;
}
</style>
<p style="line-height: 100px">
<input type="text" placeholder="인라인 콘텐츠">
</p>
위 예시를 보면 알 수 있듯이 line-height
속성은 텍스트에만 적용되는 것이 아니라 인라인 콘텐츠에도 적용됩니다.
line-height
속성은 텍스트 행의 높이를 설정하지만 이는 line-height
속성이 라인 박스의 최소 높이를 설정하는 것의 효과이기 때문입니다.
하지만, flex
나 grid
박스에서는 별개로 작동합니다.
<style>
p {
display: flex;
background-color: yellowgreen;
}
</style>
<p style="line-height: 100px">
<input type="text" placeholder="인라인 콘텐츠">
</p>
<p style="line-height: 100px">
텍스트
</p>
텍스트
위 코드 예시를 보면 flex
박스 내에서 인라인 콘텐츠는 작동하지 않습니다. 하지만 텍스트 콘텐츠에서는 작동합니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
line-height
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
line-height
|
CSS Inline Layout Module Level 3 #line-height-property |