텍스트로 글을 작성할때 워드나 한글문서에서는 엔터로 줄간격을 조절하죠~
하지만 웹에서는 별도의 태그를 입력을 해줘야 합니다
만약 줄간격을 조절하지 않으면 답답하게 느껴지기 때문입니다
이번에는 줄일 바뀔때 간격을 조절하는 태그 line-height에 대해서 알아보겠습니다
입력방식은 총 3가지방법이 있는데요
line-height:숫자;
line-height:숫자%;
line-height:숫자px;
<html>
<head>
<style type="text/css">
font { line-height:숫자 }
</style>
<head>
<body>
<table border=1 width=200 >
<tr>
<td><font>안녕하세요 css부분에서 줄간경에 대해 알아보도록 하겠습니다</font></td>
</tr>
</table>
</body>
</html>
입력에 따라서 차이가 나기 때문에 하나씩 살펴보기로 하겠습니다
1. line-height:숫자
만약 line-height:2 라고 입력을 하면 "글씨크기의 2배만큼 띄워라"라는 뜻인데요
작성된 첫줄에서 부터 생각을 하셔야 합니다
잘 이해가 안되시죠 ㅋ 저두 처음엔 헷갈렸어요
허접한 솜씨지만 포토샵으로 만든 그림으로 설명해드릴께요
아래 그림에서의 녹색 간격은 모두 글씨크기의 간격으로 동일하답니다 ^^;
숫자는 꼭 2,3과같은 수만 입력안하셔두 되시구요 0.2나 0.02 같은 수도 적용이 되니
정밀한 조정도 가능하답니다
2. line-height:숫자%
line-height:150%이라고 입력을 하면 "글씨크기의 150%만큼 띄워라"라는 뜻입니다
이것도 위에와 약간 비슷한데요 다시한번 허접하지만 그림으로다가 ^^
글씨가 겹치지 않게 하기 위해서는 100%이상으로 하셔야 겠죠 ^^
이것도 마찬가지로 여러가지의 경우의 수를 입력이 가능하기 때문에
정밀한 간격 조정도 충분히 가능하답니다~~
3.line-height:숫자px
line-height:20px로 입력을 하면 "윗줄 글씨의 상단부터 20px만큼 띄워라"라는 뜻입니다
위에 %와 시작점이 비슷하답니다
주의하셔야 할건 글씨크기가 20px이면 그 이상으로 px값을 잡아주셔야
글씨가 겹치지 않겠죠 ^^
'CSS' 카테고리의 다른 글
| 폼 form & 레이블 label (0) | 2011.10.17 |
|---|---|
| input type 태그의 종류 (0) | 2011.10.11 |
| display (0) | 2011.07.29 |