09. css 글자, 폰트 관련 스타일

🔅 글자 관련 스타일

☑️ color

글자 색을 지정하는 속성
선택자 { color: 색상명(영문) }

• 16진수 숫자 RGB(#fff, #ffffff)
• rgb(255,255,255) | rgba(255,255,255,0.5)
• hsl(360,100,100) | hsla(360,100,100,1)
  * a는 투명도(0: 투명, 1: 불투명)
  * hsl(색조, 채도, 밝기)

☑️ text-decoration

텍스트에 줄을 긋는 속성

• underline : 밑줄
• overline : 중간줄
• line-through : 윗줄
• none : 줄 없애기 --> 하이퍼링크 줄 없앨 때!!!

☑️ text-align

글자(+inline)를 정렬하는 속성(왼쪽, 오른쪽, 가운데, 양쪽)

• left : 왼쪽 정렬 (기본값)
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : container 크기에 맞춰 줄 정렬 -> flexbox의 space-between과 같음!

☑️ line-height

줄 간격(장평)을 지정하는 속성
-> 줄 사이 간격을 지정한 만큼 벌리는게 아니라 한 줄의 높이를 지정하는 속성!!
-> 줄의 높이가 글자의 크기보다 큰 경우 글자는 해당 줄 세로 가운데에 배치된다

☑️ letter-spacing

글자 사이 간격(자간)을 지정하는 속성
--> 버튼 안 글씨도 가능

☑️ text-shadow

텍스트에 그림자 효과를 추가하는 속성

🔅 글꼴(폰트) 관련 스타일

☑️ font-size

글꼴의 크기를 지정하는 속성

• px : 픽셀(화면 해상도)
• pt : 포인트(1pt = 0.72인치)
• % : 상위 요소 크기에 대한 백분율
• em : 1em == 100%

☑️ font-weight

글꼴의 굵기(두께)를 지정하는 속성

• 숫자 : (얇음) 100 ~ 900 (두꺼움) -> 100단위
• normal : 폰트에 지정된 기본 두께(400)
• bold : 굵게(700)
• bolder : 상속받은 두께보다 더 굵게
• lighter : 상속받은 두께보다 더 얇게

☑️ font-style

• italic | oblique : 기울임

☑️ font-family

글꼴을 지정하는 속성

웹 폰트 제공 사이트
1. 구글 웹폰트 사이트 링크텍스트
2. 눈누 상업용 무료 한글 폰트 사이트 링크텍스트

<웹 폰트 사용>
1. link 태그를 이용한 방법 -> html 파일

 <link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap"
    	rel="stylesheet" />

2. @import는 css 파일 제일 상단

@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap");

3. @font-face 이용

@font-face {
  font-family: "양진체";
  src: url("https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}