• 회원가입
  • 로그인
  • 구글아이디로 로그인

[text] CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 = 글씨 수직중앙정렬 = 라인하이트속성, 상속O)

목차
  1. line-height 예제 - 가능값 종류
  2. line-height 정의
  3. line-height 구문
  4. line-height 예제 - 라인 중단 정렬

 

line-height 예제 - 가능값 종류

 

<style>
 * {padding:0 20px;}
div {line-height: 30px; color:black; border:1px solid dimgray; }
 
.normal {line-height: normal; color:red; border:1px solid dimgray; }
.number {line-height: 2; color:blue; border:1px solid dimgray; }
.length {line-height: 70px; color:green; border:1px solid dimgray; }
.pro {line-height: 300%; color:magenta; border:1px solid dimgray; }
.inherit {line-height: inherit; color:black; border:1px solid dimgray; }
</style> 
 
<div>부모 요소 홈짱닷컴 (homzzang.com)
  <p class="normal">normal : 홈짱닷컴 (homzzang.com)</p>
  <p class="number">2 : 홈짱닷컴 (homzzang.com)</p>
  <p class="length">70px : 홈짱닷컴 (homzzang.com)</p>
  <p class="pro">300% : 홈짱닷컴 (homzzang.com)</p>
  <p class="inherit">inherit : 홈짱닷컴 (homzzang.com)</p>

 

line-height 정의

 

텍스트 라인높이 (= 텍스트줄높이) 지정.

 


 

1.

기본값 : normal

상속여부 : O

애니효과 : O

CSS버전 : CSS1

JS구문 : object.style.lineHeight="30px"

 

2.

음수는 비허용.


3.
인라인 요소 수직중앙정렬에 유용.

4.

height 값 없이 line-height값만 지정한 경우,

IE11 및 하위브라우저에서 제대로 작동 안 함.

5.

모든 브라우저 지원.

 

 

line-height 구문

 

selector {line-height: 속성값;}

 


[속성값 종류]

 

normal
기본 간격 (기본값)
 
숫자 
숫자 X  폰트 크기  =  줄 간격
 
px, pt, cm 등의 길이 단위
숫자 클수록 간격 넓어짐 (음수 불가능)
 
% 단위 
폰트 크기의 % (백분율)

initial
이 속성의 기본값으로 설정.

inherit
부모 요소의 속성값을 상속

 


line-height 예제 - 라인 중단 정렬

 

style>
div {margin:0 auto; width:400px; height: 100px  !important; line-height:100px  !important; font-size:20px; font-weight:bold; text-align:center; border:1px solid red; }
</style>

<div>홈짱닷컴 (www.homzzang.com)</div>

결과보기 

height 값과 동일하게  line-height 값 준 후, 다른 곳 영향 안 받게 !important 붙여주면 끝 !!
단, 
되도록이면 CSS 흐름에 맞에 CSS 정의해 !important 사용 안 하는 게 최선. 
 

line-height 예제 - 이미지와 텍스트 높이 수직 균등 정렬

 

<style>

#hz {overflow:auto;}

#hz img {float:left;}

#hz a {float:left; height:50px; line-height:50px;}

</style>


<div id="hz">

    <img src="https://i.imgur.com/PQNhCln.gif"><a href="#">홈짱닷컴 Homzzang.com</a>

</div>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
text CSS - text-transform 속성 - 텍스트 대소문자변환 (= text-transform속성 = 텍…
text CSS - word-spacing 속성 ★ - 텍스트 단어간 간격 (= 단어간격 = word-spacing…
text CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티…
text CSS - white-space 속성 ★ - 공백처리/줄바꿈 지정 (= white-space속성 / 화이트스…
text CSS - unicode-bidi 속성 - 텍스트글자방향 (= unicode-bidi속성 = 유니코드비디속성…
text CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = …
text CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…
text CSS - text-justify 속성 - 텍스트 좌우균분정렬 세부설정 (= text-justify속성 = …
text CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = …
text CSS - word-break 속성 ★ - 한중일 외의 언어 (단어기준/글자기준) 줄바꿈규칙 지정 (= 줄…
text CSS - word-wrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = w…
text CSS - text-fill-color 속성 (비표준) - 텍스트글자색 (= 글자전경색 =text-fill-…
text CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration…
1/2
목록
찾아주셔서 감사합니다. Since 2012