"오늘은 줄간격 바꾸는 방법을 알아보자."
-tthonam(작성자)-
🔧 목차(Table of contents)
✈️ 들어가며
줄 간격을 바꾸는데 여러 가지 방법이 있는데 블럭 속성인 line-height와 인라인속성인 vertical-align만 다뤄보겠다.
🛫 시작하며
⚒️ 1. line-height
⚙️ line-height 설명
텍스트 행의 높이를 설정함.
텍스트의 위/아래 가운데를 기준으로 위/아래로 길어지거나 짧아진다.
이러한 특징을 이용하면 텍스트의 줄 간격(행간)을 쉽게 조절할 수 있다.
- 텍스트의 행간 높이 설정.
- 블록 컨테이너 요소에 적용될 때는 해당 요소 내부 라인 박스(line box)의 최소 높이를 지정.
- 인라인 콘텐츠가 없을 경우 작동하지 않는다.
- 텍스트에만 적용되는 것이 아니라 인라인 콘텐츠에도 적용된다.
🔑 라인 박스(line box)란
블록 컨테이너 요소 내부에 수평으로 된 가상의 공간을 의미하며 인라인 콘텐츠(예: 텍스트, 이미지, 링크, input 등)가 렌더링되는 공간을 말함.
단,flex+grid에 적용될 때에는 텍스트 콘텐츠만이 해당 요소 내부 라인 박스의 최소 높이를 지정한다.
🔧 line-height 속성의 형식
selector {
line-height: /* value */
}🔨 입력 예시
line-height: normal;
line-height: 숫자;
line-height: 3em;
line-height: 12px;
line-height: 150%;⛏️ 입력 값 설명
number : 해당 element의
fz(폰트 사이즈)를 기준으로 계산.
length :px,em등의 단위를 사용.
percentage :fz(폰트 사이즈)를 기준으로 계산.
keyword"normal": 브라우저에 지정된 값으로 설정.
🪛 number와 percentage의 차이
-
line-height :
number로 지정
➡️ 하위 요소에line-height가 적용될 때 line-height 값 자체가 하위 요소에 상속되어 하위 요소의fz에 따라서줄 높이가 변경된다. -
line-height :
퍼센트로 지정
➡️ 하위 요소에line-height가 적용될 때 상위에서 이미 계산된 줄높이가 상속되어 적용된다.
🔑
{line-height : 퍼센트}로 사용하면 가끔 예상하지 못한 결과가 나오기도 함. 위 허용 값들 중 'number'를 사용하기를 추천함.
⚒️ 2. vertical-align
⚙️ vertical-align 설명
인라인 레벨 요소와 테이블 셀 요소 내부의 수직 정렬을 지정하는 속성입니다.
해당 요소가 부모 요소의 기준선에 상대적으로 어떻게 수직(vertical) 정렬(align)되는지를 설정한다.🗝️ 이 속성은 블록 레벨 요소에 직접적으로 적용되지 않음.
🔑 용어 참고
인라인 레벨(inline-level) 요소
문서 안에서 내용을 새로운 줄로 만들지 않고, 기존 줄 안에 들어가는 요소를 말함. 예를 들어, 문장 속 강조된 글씨나 문장 속에 삽입된 이미지 같은 것들이 있다.
스타일적으로 말하면, 요소의 앞이나 뒤의 요소를 강제로 줄바꿈 시키지 않는 요소들을 말한다.
display의 값을inline,inline-table,inline-block등과 같은 인라인에 관련된 값으로 지정해서 만들 수도 있다.
테이블 셀(table-cell) 요소
<td>와<th>요소를 말한다.
display의 값을table-cell로 지정해서 만들 수도 있다.
블록 레벨(block-level) 요소
flex나grid의 아이템 요소가 아니라면, 시각적으로 별도의 블록을 형성하며 요소의 앞이나 뒤의 요소를 줄바꿈 하는 것입니다. 웹페이지에서 한 줄 밑에 새로운 항목으로 시작하는 요소들이다.
예를 들어,문단,목록,표등이 있다.
display의 값을block,list-item,table,flex,grid등과 같은 블록에 관련된 값으로 지정해서 만들 수도 있다.
🔧 vertical-align 속성의 형식
selector {
vertical-align: /* value */
}🔨 입력 예시
vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: 20%;⛏️ 입력 값 설명
number : 해당 element의
fz(폰트 사이즈)를 기준으로 계산.
length :px,em등의 단위를 사용.
percentage :fz(폰트 사이즈)를 기준으로 계산.
keyword"normal": 브라우저에 지정된 값으로 설정.
🪛 vertical-align 추가 설명
인라인 레벨 요소와 테이블 셀 요소에서 다른 의미를 가짐.
🛠️
인라인 레벨 요소에서의 값(상세 설명)
baseline: 초깃값, 해당 요소의 하단을 부모 요소의baseline을 기준으로 맞춰 정렬.middle: 부모 요소의x-height의 중간점(0.5ex)을 기준으로 수직 가운데 정렬.sub: 부모 요소의 아래 첨자 기준으로 정렬.super: 부모 요소의 위 첨자 기준으로 정렬.text-top: 상단을 부모 요소의 텍스트 상단에 맞춰 정렬.text-bottom: 하단을 부모 요소의 텍스트 하단에 맞춰 정렬.<length>: 부모 요소의 baseline를 기준으로 해당 요소를 이 길이만큼 올리거나(양수 값) 내립니다,0cm값은baseline과 동일함.<percentage>: 부모 요소의 baseline를 기준으로 해당 요소를 이 %만큼 올리거나(양수 값) 내립니다,0%값은baseline과 동일함.top: 상단을 부모 요소의 위쪽 가장자리(부모요소에 배경색을 넣었을 때 보이는 맨 위쪽 가장자리를 의미)에 맞춰 정렬.bottom: 하단을 부모 요소의 아래쪽 가장자리(부모요소에 배경색을 넣었을 때 보이는 맨 아래쪽 가장자리를 의미)에 맞춰 정렬.
🛠️
테이블 셀 요소에서의 값(상세 설명)
baseline,sub,super,text-top,text-bottom,<length>,<percentage>: 셀의 baseline을 baseline으로 정렬된 행(row)의 모든 셀의baseline에 맞춘다.top: 상단을 셀의padding-top아래쪽 가장자리에 맞춘다.middle: 셀의padding box내의 수직 가운데 정렬한다.bottom: 하단을 셀의padding-bottom위쪽 가장자리에 맞춘다.
🗝️ 알고 있어야 하는 것들
<td>,<th>의vertical-align 속성의 초깃값 :inherit(테이블 셀 요소의 초깃값)
<thead>,<tbody>,<tfoot>의vertical-align 속성의 초깃값 :middle
한글 기준 : 글자의 위아래 수직으로 가운데 정렬하지 않는 것처럼 보임.
영문 기준 : 보면 아이콘의 수직 배치가 가운데 정렬하는 것처럼 보임.
🛬 마치며
line-height 속성은 주로 쓰지만 vertical-align 은 잘 사용하지 않았는데 이번에 정리를 하면서 다음에 기회가 되면 써봐야겠다는 생각이 든다.
요새 글 하나씩 적다보면 하나하나 다시 보고 공부하는 기분이 든다.
느낌이 매우 새롭다. 글 정리해주는 분들께 고마운 마음이 든다.
🗝️ 참고 링크(Reference)
