linuxism :: CSS - 글자 레이아웃 속성

CSS - 글자 레이아웃 속성

Development/CSS 2012. 5. 12. 11:41

텍스트로 글을 작성할때 워드나 한글문서에서는 엔터로 줄간격을 조절하죠~
하지만 웹에서는 별도의 태그를 입력을 해줘야 합니다
만약 줄간격을 조절하지 않으면 답답하게 느껴지기 때문입니다

이번에는 줄일 바뀔때 간격을 조절하는 태그 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값을 잡아주셔야
글씨가 겹치지 않겠죠 ^^

출처 - http://pjcome.tistory.com/95

===================================================================================

앗녕하세욥

샤랄라뽀입니다

- 주의해주세욤 -

1. 제 나름대로 공부하면서 정리하는곳 이에요.

2. 정확하지 않다고 저에게 책임을 묻지 말아주쎄요.

3. 도움이 조금이라도 되셨다면 댓글과 공감을 꾸-욱 !

4. 제가 틀린 부분이 있다면 틀린부분을 콕 집어서 저에게도 도움을 주세효.

글자 레이아웃 속성

1. 글자정렬

text-align 속성을 사용하면 왼쪽, 오른쪽, 가운데, 양쪽 정렬을 지정할 수 있습니다.

ex) 예를 들면

출력 결과는 ▼ 쉽게 글자정렬이 가능합니다.

왼쪽

오른쪽

가운데

- 글자정렬 중 양쪽 정렬 속성 justify 속성은 불안정하기 때문에 거의 사용하지 않습니다 -

2. 라인 높이

line-height 속성을 사용하면 글자열 라인의 높이를 지정할 수 있습니다.

수치값은px, em 또는 % 으로 사용하고 단위없는 수치값은 픽셀값의 배수로 사용됩니다.

ex) 예를들면

<div style=" height:60px; line-height:30px">픽셀로 지정<br />height:60px; line-height:30px</div>
<div style="height:60px; line-height:2.2em">em으로 지정<br />height:60px; line-height:2.2em</div>
<div style="height:60px; line-height:250%">퍼센트로 지정<br />height:60px; line-height:250%</div>

픽셀로 지정

height:60px; line-height:30px

em으로 지정

height:60px; line-height:2.2em

퍼센트로 지정

height:60px; line-height:250%

px은 font-size가 12px이면 그 이상으로 써야합니다.

em은 배수단위 라고 생각하시면 됩니다. 2.2em은 2.2배

%도 100% 이상으로 해주셔야 합니다.

작업을 할때 line-height의 값을 통일시켜 주기위해 em과 %로 해야하지만

자동으로 조절되지 않는 문제가 있어서 가능하면 하지 말아야 하는

px로 하는게 편하기 때문에 px로 작업을 많이 합니다. ㅠ _ ㅠ 이러면 안되효 ㅎ

3. 글자 간격

letter-spacing 속성을 사용하여 글자와 글자 사이의간격 또는 단어와 단어 사이의 간격을 조절합니다.

수치값이 0보다 크면 간격을 늘이고, 0보다 작으면 간격을 줄입니다.

ex) 예를들면

<div style="letter-spacing:0">수치값이 0일때 </div>
<div style="letter-spacing:.2em">수치값이 0보다 크면 글자 간격이 늘어납니다.</div>
<div style="letter-spacing:-.2em">수치값이 0보다 작으면 글자 간격이 줄어듭니다.</div>

수치값이 0일때

수치값이 0보다 크면 글자 간격이 늘어납니다.

수치값이 0보다 작으면 글자 간격이 줄어듭니다.

차이점이 보이시나욤?ㅋ

차이점을 확실하게 보여드리기 위해 .2em씩 적용해봤어요