line-height Property

Home > Document > CSS > Font > line-height

line-height Property

line-height Property는 행 간격을 다루는 Property입니다. Text가 많은 문서의 경우 행간이 너무 좁으면 답답해 보일 뿐더러 눈이 피로해 집니다. line-height의 경우 기본값은 12pt를 기준으로 했을 때 전체 14pt의 간격이 생기는데 위로 1pt, 아래로 1pt의 여백이 생기게 되어 행간에 2pt의 여백이 보이게 되는거죠. 이 페이지에서는 line-height와 상대 치수에 대해 알아 보겠습니다.

[표 보는 방법]

line-height Property
Value	normal \| <number> \| <length> \| <percentage> \| Inherit
Initial	normal
Applies to	all elements
Inherited	yes
Percentages	refer to the font size of the element itself
Media	Visual
HTML Syntax	{ line-height: sHeight }
Scripting	object.style.lineHeight [ = sHeight ]

Value

number, length, percentage 가 있는데 아래와 같이 1.2, 1.2em, 120% 는 모두 같은 값 입니다. 아래 예의 경우 10pt 크기의 글자를 기준으로 했으므로 line-height는 12pt가 되시겠습니다. 이 3 가지 값의 기준은 모두 글씨 자신의 크기입니다. 특히 em 의 경우 지정한 글꼴 크기가 없으면 기본값을 사용합니다.

입력

DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */

CSS Scripting

onMouseOver="this.style.lineHeight='1.2em';"

Click here Click here Click here Click here Click here Click here Click here Click here Click here
Click here Click here Click here Click here Click here Click here Click here Click here Click here
Click here Click here Click here Click here Click here Click here Click here Click here Click here
Click here Click here Click here Click here Click here Click here Click here Click here Click here

Source code

<HTML>
    <HEAD>
        <TITLE>UNTITLED</TITLE>
        <STYLE type="text/css">
        <!-- 
        .narrow {line-height:1.2em}
        .wide {line-height: 2em} 
        -->
        </STYLE>
    </HEAD>
    <BODY>
        <DIV class="narrow" onmousedown="this.className='wide';"
        onmouseup="this.className='narrow';">
        Click here Click here .....중략
        </DIV>
    </BODY>
</HTML>

Top

Back

New

검색