css line-height 속성
이번 글에서는 줄 높이를 정하는 속성인 line-height를 알아보도록 하겠습니다.
line-height는 제 포스팅에서도 생각보다 꽤 썼었는데요, 언뜻 보면 간단해 보이면서도 꽤 많은
세부 속성값들을 갖고 있는데 이 속성들에 대해 알아보는 시간을 갖겠습니다.
1. normal
(웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.)
2. length
(길이로 줄 높이를 정합니다.)
3. number
(글자 크기의 몇 배인지로 줄 높이를 정합니다.)
4. percentage
(글자 크기의 몇 %로 줄 높이를 정합니다.)
5. initial
(기본값으로 설정합니다.)
6. inherit
(부모 요소의 속성값을 상속받습니다.)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
h1 {
font-size: 40px;
}
p {
font-size: 30px;
}
.normal {
line-height: normal;
}
.length {
line-height: 25px;
}
.num {
line-height: 2.5;
}
.per {
line-height: 30%;
}
</style>
</head>
<body>
<h1>normal</h1>
<p class="normal">HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</p>
<h1>length</h1>
<p class="len">HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</p>
<h1>number</h1>
<p class="num">HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</p>
<h1>percentage</h1>
<p class="per">HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</p>
</body>
</html>
normal과 px값으로 줄간격을 주는 것은 대강 알 것으로 생각하여 아래의 number과 percentage 부분에 대해 설명하겠습니다.
먼저 number 부분을 보면 line-height값으로 2.5를 줬습니다.
여기서 2.5는 유동적인 숫자로 이 코드를 예시로 들어 보면, p 태그의 글씨 크기가 30px이니 p 태그의
줄높이는 30 x 2.5 = 75px 이 됩니다.
그래서 number 부분의 텍스트 사이 글간격이 다른 텍스트보다 떨어져 있는 이유가 글씨 크기의 2.5배
크기만큼 줄간격이 벌어졌기 때문입니다.
여기서 하나 알 수 있는 점은 line-height 속성값으로 px을 주게 되면 좋지 않은 상황이 꽤 벌어질 수 있기
때문에 px값으로 주는 것은 권고되지 않습니다.
예를 들어 그 태그의 텍스트 사이즈가 변경되었다고 하면 line-height 값은 px값이기 때문에 고정적이어서
우리가 원했던 페이지의 모습이 제대로 나오지 않을 가능성이 크기 때문입니다.
(그래서 보통 %나 위의 2.5배와 같은 상대값으로 지정해 주는 게 좋습니다.)
그리고 percentage 부분 텍스트는 글간격이 오히려 줄어들어서 텍스트들끼리 겹치는 모습이 보이는데
기본 글간격이 100%이고, 예제 코드에서는 값을 30%를 줬기 때문에 글간격이 기본보다 줄어든 모습을
보이게 된 것입니다.
.per {
line-height: initial;
}
위에서 initial은 기본값으로 주는 것이라 했었죠?
percentage에 initial 값을 주니 기본값으로 글간격이 돌아간 것을 확인할 수 있습니다.
마지막으로 inherit(부모 상속) 요소에 대해 알아보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
body {
font-size: 25px;
}
.one {
line-height: 150%;
}
.two {
line-height: 1.5;
}
</style>
</head>
<body>
<div class="one">
<h1>HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</h1>
<p class="num">HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</p>
</div>
<div class="two">
<h1>HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</h1>
<p class="per">HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!</p>
</div>
</body>
</html>
이 코드는 line-height 부모 상속 관련 코드입니다.
위의 텍스트를 보면 150%를 값으로 줬고, 밑의 텍스트는 1.5배로 줬습니다.
부모 상속으로 값이 결정되는 과정이,
150%는 부모의 글씨 크기로 줄간격이 계산되면 그 계산된 줄간격이 자식에게 그대로 전해져서 부모와
자식의 줄간격이 똑같게 됩니다.
그런데 1.5배와 같이 배수로 주면 부모와 자식의 글씨 크기가 다를 때 각각의 글씨 크기에 배수를 곱해서
줄간격이 전해지기 때문에 부모와 자식의 줄간격값이 달라지게 됩니다.
따라서 부모와 자식 요소 간 글씨 크기의 차이가 크다면 글씨 크기에 맞게 줄간격 값이 전해지는 숫자
(배수)로 줄간격값을 주는 것이 좋습니다.
오늘은 line-height 속성에 대해 알아보는 시간을 가졌습니다.
어떻게 보면 줄간격값을 주는 것이 간단해 보일 수 있지만, 생각외로 복잡하기 때문에 상황에 맞게
잘 디자인을 하시길 바라며 마무리 짓겠습니다.