8-5-3. CSS 속성 : 폰트-줄간격(line-height) {line-height: normal / px / em / % / 1, 2 ...;}

8-5-3. CSS 속성 : 폰트-줄간격(line-height)

 

 가. line-height 속성

 

  - 텍스트 라인의 높이를 의미하는 줄간격(행간)을 제어하는 속성

  - 정확히 말하자면, line-height 속성을 통해 제어되는 부분은 'line-box'임

  - 'line-box'는 '타이포그래피 구조의 em영역(font-size) 및 그 영역의 상하단의 여백'까지의 범위를 말함 

  - '상단 텍스트의 descender 이하의 여백' 및 '하단 텍스트의 ascender 이상의 여백'을 'leading'이라함

  - 상속되는 속성

  - 기본값 : normal

 

 

 나. line-height 속성값의 종류

  

  ▣ normal

    - 브라우저의 기본 속성에 따라 자동 적용

    - 보통 1.2 정도로 할당되어 있음

 

  ▣ 고정단위의 속성값 : px, em ...

 

  ▣ 자연수(number)의 속성값 : 1, 2, 3 ...

    - font-size 속성값을 기준으로, 선언한 자연수 만큼의 배수로 값 산출

 

  ▣ 백분율(percent)의 속성값 : %

    - font-size 속성값을 기준으로, 선언한 백분율 만큼의 값 산출

 

[상속에서 '자연수(number) 속성값'과 '백분율(percent) 속성값'의 차이점] 1) 부모요소는 line-height 속성을 선언하였으나, 자식요소는 line-height 속성을 선언하지 않았을 경우,     부모요소의 line-height 속성값은 자식요소로 상속됨 2) 이때, 상속에 있어 부모요소의 line-height 속성값이 자연수(number)인지, 백분율(percent)인지에     따라 자식요소의 line-height 값은 달라짐 3-1) 부모요소의 line-height 속성값이 자연수(number)인 경우        : 그 부모요소의 line-height 자연수 값이 그대로 상속되어 자식요소의 font-size 값을 기준으로 상속          받은 자연수 만큼을 곱한 값이 자식요소 line-height 값 3-2) 부모요소의 line-height 속성값이 백분율(percent)인 경우        : 그 부모요소에 있는 font-size 값에 그 line-height 백분율 값을 곱하여 산출된 값 자체가 상속됨으          로써, 그 산출된 값이 자식요소 line-height 값 ※ 그래서 실무는 line-height 속성값은 백분율(percent) 보다, 자연수(number) 로 사용하는 것이 좋음

 

[코드예시]  1 body{font-size: 20px; line-height: 2;}         2      p{font-size: 10px;}                  → line-height20px = 부모line-height2 * 자식font-size10px  3 body{font-size: 20px; line-height: 200%;}  4     p{font-size: 10px;}                   → line-height40px = 부모font-size20px * 부모line-height200%