line-height 는 글줄 사이의 수직여백을 조정하여 글의 가독성을 높이기 위해 사용된다.
얼핏보면 매우 간단한거 같지만 그 개념을 정확히 모를땐 내 맘대로 조정이 안되는 까다로운 놈이다.

 

 

이제 차근차근 알아보자.

 

Line_height를 지정하는 방법.

1. 퍼센트값으로 지정.
   ex) p {line-height:120%; }

2. 길이 단위 값(px,em 등)을 사용해서 지정.
   ex) p {line-height:20px; }

3. 숫자 값을 사용해서 지정.
   ex) p {line-height:1.3; }

 

 

 

라인하이트나 글자크기, 글자색상과 같은 속성은 자식에게 상속되는 성질을 가지고 있는데
라인하이트의 경우는 지정방법에 따라 상속방식이 좀 다르다.


부모인 body안에 <h1><p>라는 자식요속가 있다고 보자.

아래와같이 body의 font-size를 18픽셀로 지정하고 h1은 30픽셀, p는 11픽셀로 별도로 지정했다.

body {font-size:18px; }
h1 {font-size:30px; }
p {font-size:11px; }

 


첫번째, body에 line-height:120%;을 넣으면

body의 폰트크기값(18px)의 영향으로 18x120%=21.6 의 결과값을 만들어내며 이는 자손에게 상속된다.
body에서 계산된 21.6px의 라인하이트값은 h1에서도 21.6px, p에서도 21.6px로 똑같이 지정되니
상대적으로 폰트사이즈가 큰 h1은 간격이 매우 좁아보일 것이며,

폰트사이즈가 작은 p는 간격이 매우 넓어보일 것이다.

 

실제로 해서 브라우저에 랜더링 해보면 아래와 같이 나오는데
만일, h1처럼 폰트사이즈(30px)가 라인하이트값(21.6px)을 넘어버리면 라인하인트값에 맞춰

글자가 겹치는 현상이 생겨버린다.

 

 


또 여기서 보면 글줄 사이의 공백은 (라인하이트값-폰트사이즈)가 반으로 나눠져서

글자 위아래로 채워진다는걸 알 수있다.

 

 

 

두번째, body에 line-height:20px;을 넣으면
첫번째 경우와 마찬가지로 라인하이트값 20px은 자손에게 상속되어 h1과 p에 똑같이 지정된다.
그럼 첫번째 경우와 별반 달라지지 않는다.

 

 

 


그렇다면 세번째 방법인 body에 숫자값을 넣어 line-height:1.3;으로 지정하면 어떨까?
이 경우는 body에서 계산된 결과값 18x1.3=23.4(px)이 상속되는것이 아니라
1.3 만 상속되어 폰트크기에 따라 각기 다른 line-height값을 만들어낸다.

h1=30 x1.3= 39(px) <- h1의 라인하이트값 
p=11 x1.3= 14.3(px) <- p의 라인하이트값 

실제로 해보면 아래와 같다.

 

 

 

 

 

 

그렇기 때문에 폰트크기에 따라 유동적으로 움직이는 숫자값을 사용하는 것이

가장 적절한 방법이라 할 수 있다.


그렇지만 이 역시 모든 상황에 보기좋은 여백을 딱 맞게 만들어내긴 어려우므로
일단 전체적으로 line-height값을 지정해놓고 필요한것만 나중에 따로 한번 더 속성을 주면 된다.

 

 

 

 

 


이렇게 전체적으로 영향을 미치는 line-height값을 처음에 지정해놓고 중간에 바꾸면 큰일나므로

주의할 것!

 

 


 

 

 

 

덧붙이자면

인터넷 익스플로러나 파이어폭스 같은 브라우저들은 line-height 속성을 따로 주지 않을 시 1.0~1.2의 값을
초기 기본값으로 사용한다.


앞에서 포스팅했던 리셋css에서 사용된 에릭마이어란 사람이 만든 기본리셋을 살펴보면

line-height를 '1'로 기본값으로 주고 시작하는데

 

 

 


외국에서 일반적으로 사용하는 기본값인 1은 영어에선 가독성이 크게 떨어지지 않지만

한글은 그렇지 못하다.
이는 같은 픽셀의 폰트사이즈라도 글자종류나 글씨체에 따라 공간을 차지하는 내용영역이 다르기 때문.

 

 

이 때문에 한글을 사용할 경우 기본셋팅을 보통 본문 12픽셀 폰트기준으로 1.3~1.5로 놓고 시작한다고

보면 된다^^

 

 

 

 

 
 
 
 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 쪼랩

    좋은 자료 감사합니다.. 이제 강좌는 거의 다 본것 같은데요.. 궁금한게 있어서요.. 모바일홈페이지를 만들려고 하는데요.. 포토샵 사이즈를 어떻게 해야하는지 좀 알려주실 수 없을까요? 모바일홈페이지때문에 이거 공부중이거든요 ^^

    2013.08.13 11:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 모바일 홈페이지를 만드시는 군요.
      제가 모바일 사이트를 만든적이 없어서 큰 도움은 못드리겠지만
      보통 디자이너들이 가로 640px을 기본으로 작업하는걸로 알고 있습니다.
      지인이 전에 320px로 작업했을때 다른 사이즈들은 맞는데 이미지가 약간 깨진다 그러더라구요.

      그러니까 초창기 나왔던 아이폰 320px을 최소 기준으로 해서 2배크기로 작업하는 거구요...
      640px로 작업한 시안으로 필요한 이미지를 자른 후 css를 사용해서 원래크기인 반으로 줄여넣는다고 합니다.

      딱히 답이 정해져 있는건 아니겠지만요.

      2013.08.13 23:14 신고 [ ADDR : EDIT/ DEL ]
  2. 쪼랩

    답변 감사합니다~~ 그런데 지금 테스트해서 올리시는파일은 뭘로 저장해서 올리시는건가요? 웹표준이니까 asp라던가 php파일로 작업해서 올려도 상관없는거겠지요? 문제가 생겼다면 제가 뭔가를 잘못한거겠죠? ㅎㅎㅎ; 강좌가 하나 더 올라왔네요 그것도 마저 보구 갈게요 ~

    2013.08.20 10:02 [ ADDR : EDIT/ DEL : REPLY ]
    • 저는 그냥 에디트플러스에서 html로 저장해서 파이어폭스로 여는건데 ^^:;
      웹표준과 asp, php가 별도로 무슨 상관이 있을런지는 잘 모르겠네요.
      (전혀 상관 없을거 같긴한데...)
      저한테 너무 많은것을 바라시면 아니되옵니다. ㅋㅋ

      그럼 좋은 밤 되세요^^

      2013.08.20 22:36 신고 [ ADDR : EDIT/ DEL ]
  3. 이거때문에 고생하고 있었는데 감사합니다~
    다른 블로그는 적용하는 법만 소개하던데, 이걸보고 응용해보니까 금방 되네요^^
    좋은 하루 되세요!

    2014.02.19 07:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 송지

    가르쳐주신 선생님 만나뵜고 싶네요 ㅜㅜ

    몰라던 부분들 인데 이렇게 간단하게 설명해 주시다니

    요즘에는 html 포스팅은 안하시는거예요?

    2014.05.02 17:12 [ ADDR : EDIT/ DEL : REPLY ]
    • 이건 선생님이 가르쳐주신거에 제가 좀 더 공부해서 썼던건데 정리가 잘 된건가요?ㅎㅎ 전 가끔 제가 나중에 봐도 뭔소리를 써놓은건지 한참 봐야할 경우가 있어서^^;;

      제가 한참 공부할때 저도 잊어버리지 않으려고 포스팅했던거라 아무래도 요새는 포스팅을 안하게 되네요. 게을러져서 큰일이예요 ㅠㅠ

      2014.05.02 18:25 신고 [ ADDR : EDIT/ DEL ]
  5. 구데기

    좋은정보 너무 감사합니당 ㅠ,.ㅜ 수업시간에 진도못따라가서 혼자찾아보는중인데 많은 도움이되요~

    2018.04.27 11:05 [ ADDR : EDIT/ DEL : REPLY ]