line-height은 두 줄 이상일 경우에 생기는 줄 간격을 조절 하는 속성
|
속성 |
설명 |
|
크기 |
단위를 지정하여 줄 간격 크기를 지정 |
|
배수 |
글자 크기를 기준으로 배수만큼 곱해서 지정 |
티스토리 뷰
1. 개념
line-height - 줄 간격 조절
2. 태그
line-height
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
div
{
margin-top
:
20px
;
}
</style>
</head>
<body>
1
<div style
='
font-size
:
15px
;
line-height
:
15px
'
>
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
2
<div style
='
font-size
:
15px
;
line-height
:
2.0
'
>
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
3
<div style
='
font-size
:
20px
;
line-height
:
2.0
'
>
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
</body>
</html>
|
결과 화면
코드 설명
1
font-size
:
15px
;
line-height
:
15px
;
line-height를 크기 단위로 숫자를 입력하게 되면 폰트의 크기와 상관 없이 줄 간격은 지정한 크기 만큼 조절이 됩니다.
2
font-size
:
15px
;
line-height
:
2.0
;
지정 단위를 크기가 아닌 배수로 지정할 때는 폰트 사이즈의 배수만큼 줄간격이 벌어지게 됩니다.
지금 보시는 것처럼 2.0으로 지정하게 되면 15*2.0 =30px 만큼 간격이 벌어지게 됩니다.
지금 보시는 것처럼 2.0으로 지정하게 되면 15*2.0 =30px 만큼 간격이 벌어지게 됩니다.
3
font-size
:
20px
;
line-height
:
2.0
;
여기서는 글자 사이즈가 20px로 20*2.0= 40px만큼 줄 간격이 조절 됩니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] list-style-type - 목록 불릿과 번호 스타일 지정 (0) | 2021.04.09 |
|---|---|
| [css3] text-overflow - 넘치는 텍스트 표기 (0) | 2021.04.08 |
| [css3] text-indent - 텍스트 들여쓰기 (0) | 2021.04.06 |
| [css3] text-align - 텍스트 정렬 (0) | 2021.04.05 |
| [css3] letter-spacing,word-spacing - 텍스트 간격 조절 (0) | 2021.04.02 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday