~페이지에 텍스트를 정렬하는 기술~
font-family : 텍스트 서체
font-weight : 텍스트 두께 (bold굵게, normal보통)
숫자로도 값 줄 수 있음(모든 글꼴에 적용x)
(400은 기본 700은 굵게 300은 얇게)
font-style : 텍스트 기울기 (italic기울게, normal기본)
word-spacing : 단어 사이 간격 (0.25em이 기본간격)
ex) word-spacing: 0.3em;
이면 총 간격은 0.55em!!
letter-spacing : 문자 사이 간격
text-transform : 모두 대문자 또는 소문자로 변환
uppercase대, lowercase소
text-align : 텍스트 수평적 정렬
left왼, right오, center중앙
line-height : 텍스트 줄 사이 수직 간격
단위없는 숫자(1.2),
단위로 지정된 숫자(12px)
*Serif*
가장자리에 디테일이 있는 글꼴
*Sans-Serif*
가장자리가 직선적이고 평평한 글꼴
?사용자 컴퓨터에 특정 글꼴이 설치되어 있지 않을 때?
-fallback font 대체 글꼴-
ex) font-family: "Garamond", "Times", serif;
(Garamond 글꼴 적용하고 이게 없으면 Times 글꼴로
둘 다 사용 못하면 사전 설치된 serif 글꼴로
Times, serif가 Garamond 다음에 대체 글꼴로 지정)
!설치되지 않은 글꼴을 링크검색하여 연결해서 쓰기!
<head>와 <link> 사용
ex) <head>
<link
href="~내가 원하는 글꼴이 있는 링크 주소~"
rel="stylesheet">
</head>
!link 말고 비 사용자 글꼴을 링크하는 다른 방법!
-> @font-face 사용
ex) @font-face {
font-family: ~~;
font-style: ~~;
font-weight: ~~;
src: url(https://~~);
} - url대신에 파일 경로 사용할 수도 있다
개발자 지망생 서하입니당