[html/css] line-height 속성 배우기

[html/css] line-height 속성 배우기(줄간격)

font 속성을 배우면서 같이 다루었어야 하는데 이제야 정리를 합니다.

line-height는 줄간격을 지정하는 속성입니다.

▶ 속성값

normal 기본값으로 보통 1.0 ~1.2 입니다.

숫자 현재 글꼴에서 몇 배 크기로 할지 지정

현재 글꼴이 14px 이라면, line-height: 1.5로 할 경우, 줄간격이 21px 높이로 지정됨

길이 px, pt, cm, em등의 고정된 폭

% 현재 글꼴크기의 백분율로 높이를 지정

상속 여부 : 상속 됨.

*음수 값은 지정되지 않음

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

▶ 사용 예

숫자로 지정 할 때 : div{ font-size: 1em; line-height: 1.2;}

길이로 지정 할 때: div { font-size: 1em; line-height: 1.2em;}

백분율로 지정 할 때: div { font-size: 1em; line-height: 120%;}

font 속성으로 한꺼번에 지정할 때는 아래처럼 슬래시(/)를 그은 후 써 줍니다.

글꼴을 지정하는 font 속성 배우기

div { font: 1em/1.2 NanumGothic,"나눔고딕",sans-serif }

html/css를 작성해서 실행해 보겠습니다~line-height.htm

html/css

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid green;
margin: 10px;
}
#one
{
fon-size: 1em;
}
#two
{
font-size: 1em; line-height: 1.5;
}

#three
{
font-size: 1em; line-height: 200%;
}

</style>
</head>

</body>
</html>

실행화면

첫번째는 line-height를 지정하지 않았고

두번째는 font-size: 1em; line-height: 1.5를 지정했습니다.

세번째는 font-size: 1em; line-height: 200%를 지정해서, 첫번째보다 두배 줄간격이 생겼습니다.

line-height 속성은 수직으로 가운데 정렬할 때, vertical-aling 속성과 함께 자주 사용되는데요

다음 시간에 알아보겠습니다~

브라우저 기본값의 초기화 리셋(reset.css)의 개념

글자 간격 지정 속성 letter-spacing

text-transform 속성 (대문자 전환)

text-decoration 속성(none, underline, overline, line-through)

'css' 카테고리의 다른 글

[html/css]background 속성(배경 전체 지정) (1)	2014.05.30
[html/css]background-size 속성(배경이미지 크기 조절) (2)	2014.05.29
[html/css]background-position 속성(배경이미지 위치 지정) (5)	2014.05.26
[html/css]background-attachment 속성(배경이미지 고정) (4)	2014.05.23
[html/css] background-repeat 속성(배경 이미지 패턴) (3)	2014.05.22