[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 속성으로 한꺼번에 지정할 때는 아래처럼 슬래시(/)를 그은 후 써 줍니다.
div { font: 1em/1.2 NanumGothic,"나눔고딕",sans-serif }
html/css를 작성해서 실행해 보겠습니다~line-height.htm
html/css |
<!DOCTYPE html> #three </style>
<body>
<div id="three">
</body> |
실행화면 |
첫번째는 line-height를 지정하지 않았고
두번째는 font-size: 1em; line-height: 1.5를 지정했습니다.
세번째는 font-size: 1em; line-height: 200%를 지정해서, 첫번째보다 두배 줄간격이 생겼습니다.
line-height 속성은 수직으로 가운데 정렬할 때, vertical-aling 속성과 함께 자주 사용되는데요
다음 시간에 알아보겠습니다~
브라우저 기본값의 초기화 리셋(reset.css)의 개념
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 |
댓글