폰트 및 텍스트 관련 프로퍼티는 폰트의 크기, 지정, 스타일, 텍스트 정렬 등을 정의한다.
텍스트의 크기를 정렬한다. 앞에서 배운 여러 크기단위를 사용하기도 하고, large같은 키워드 값도 사용할 수 있다.
default size는 16px다.
폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있어야 적용할 수 있다.
폰트가 컴퓨터에 설치되어 있지 않는 경우를 대비하여 폰트는 여러개를 동시에 지정해둘 수 있다. 첫번째로 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우 다음에 지정된 폰트를 확인해보는 식이다.
⇒ 따라서, 마지막에 지정하는 폰트는 대부분의 OS에 기본적으로 설치되어 있는 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적이다.
<!DOCTYPE html>
<html>
<head>
<style>
.serif {
font-family: "Times New Roman", Times, serif;
}
.sans-serif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<h1>font-family</h1>
<p class="serif">Times New Roman font.</p>
<p class="sans-serif">Arial font.</p>
<p class="monospace">Courier New font.</p>
</body>
</html>
font-style ⇒ 이탤릭체의 지정에 사용된다. (얼마나 기울이는지를 설정 가능)font-weight ⇒ 폰트 굵기를 지정할 수 있다. lighter, bold, 900 등의 값을 가질 수 있다.font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)
그냥 한번에 이렇게 할 수 있다~
(이때 font-size와 line-height은 한번에 같이 16px/3 이런식으로 써줄 수 있다.)
텍스트의 높이를 지정하는 프로퍼티이다. (텍스트 크기를 바꾸는게 아니고, 패딩이나 마진 느낌으로 빈공간의 크기를 정하는거다. 문서작성할때 줄간격이라고 보면 된다)
단위는 %나 그냥 단위없이 opacity처럼 1.2같은 숫자가 오기도 한다.
텍스트 수직 정렬에도 응용하여 사용할 수 있다.
⇒ 무슨 말이냐 하면, 예를들어 div안에 a태그 안에 텍스트가 있다고 할때, div태그의 높이를 70px로 정하고, a태그의 line-height을 똑같이 70px로 정해주면, a태그 안의 텍스트가 수직 방향으로 가운데에 위치하는 효과를 얻게 된다는 것. 예제 참고.