본문 바로가기
css

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

by 지구별에 2014. 5. 27.

 

 

[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>
<div id="one">1em: 산토끼 토끼야 오디를 가느냐<br/>
1em: 산토끼 토끼야 오디를 가느냐<br/>
1em: 산토끼 토끼야 오디를 가느냐<br/>
1em: 산토끼 토끼야 오디를 가느냐<br/>
1em: 산토끼 토끼야 오디를 가느냐</div>


<div id="two">
1em/1.5: 산토끼 토끼야 오디를 가느냐<br/>
1em/1.5: 산토끼 토끼야 오디를 가느냐<br/>
1em/1.5: 산토끼 토끼야 오디를 가느냐<br/>
1em/1.5: 산토끼 토끼야 오디를 가느냐</div>

 

<div id="three">
1em/200%: 산토끼 토끼야 오디를 가느냐<br/>
1em/200%:: 산토끼 토끼야 오디를 가느냐<br/>
1em/200%:: 산토끼 토끼야 오디를 가느냐<br/>
1em/200%:: 산토끼 토끼야 오디를 가느냐</div>

 

</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)

 

반응형

댓글