[CSS] 글꼴, 텍스트 관련 스타일

글꼴 관련 스타일 속성 (font~)

font-familly

• 글꼴을 지정할 때 사용
• 쉼표를 사용하여 여러 글꼴을 나열할 때 앞의 글꼴이 없다면 뒤의 대체 글꼴 반영할 수 있음

선택자 {
    font-family : 글꼴명, 글꼴명;
}

font-size

• 글꼴 크기를 변경할 때 사용
• px : 픽셀 (고정크기)
• em : 배수 (가변크기)
• % : 비율 (가변크기)

font-weight

• 글꼴의 굵기를 표현할 때 사용

선택자 {
    font-weight:normal/bold/bolder/lighter/100/400/900;
}

font-varient

• 텍스트 문구를 작은 대문자로 변경할 때 사용

선택자 {font-variant:small-caps;}

font-style

• 텍스트 문구를 기울이고자 할 때 사용
• italic : 기울임 글꼴
• oblique : 글자 자체를 기울임

선택자 {
     font-style:normal/italic/oblique;
}

---

외부 웹 폰트 사용하는법

1. http://fonts.google.com
2. 사용하고자 하는 글꼴 클릭 - type tester - select all styles -  <link>에 있는 코드 복사 후 style과 head 사이에 붙여넣기
3. 글꼴에 폰트 스타일을 적용할 때는 <link>에 CSS rules to specify familes 코드 붙여넣기

---

텍스트 관련 스타일

color

• 텍스트의 색상 지정
• 색상명
• #16진수
• rgb(x,x,x) : 0~255
• rgba(x,x,x,x) - 마지막은 투명도, 0으로 갈수록 희미해짐
• hsl(x,x,x)
• hsla(x,x,x,x) - (0~360), 채도, 명도, 투명도

#c {
    color: red;
    color:#24af86;
    color: rgb(42, 199, 133, 0.61); 
    color: rgba(0, 255, 142, 0.5); 
    color: hsla(200, 50%, 50%,0.7);
}

text-decoration

• 텍스트에 줄을 긋거나 없앨 때 사용 (자주 쓰임)
• none은 a태그에 밑줄 없앨 때 거의 필수로 쓰임 (+color는 black)
• line-through : 택스트 영역 중간에 줄 긋기
• underline : 텍스트 영역 아래에 줄 긋기
• overline : 텍스트 영역 위에 줄 긋기

선택자 {
    text-decoration : none/underline/overline/line-through;
}

text-transform

• 영문 텍스트의 대소문자 변환 시 사용
• uppercase : 모든 영문자를 다 대문자로
• lowercase : 모든 영문자를 다 소문자로
• capitalize : 영문자의 첫번째 글자만 대문자로 바꿔줌 (단어마다)

선택자{
    text-transform : uppercase/lowercase/capitalize;
}

text-align

• 텍스트를 정렬할 때 사용, 자주 사용됨
• left : 왼쪽정렬, 기본값
• justify : 양쪽정렬
• right : 오른쪽 정렬
• center : 가운데 정렬

선택자 {
    text-align : left(기본값)/justify/right/center;
}

text-shadow

• 텍스트에 그림자 효과를 줄 때 사용
• 번짐정도와 색상은 생략 가능
• 가로거리와 세로거리가 양수일 경우 오른쪽 아래에 그림자 생성
• 가로거리와 세로거리가 음수일 경우 왼쪽 위에 그림자 생성
• 번짐정도가 0일 경우 그림자의 색이 찐해진다
• 색상은 기본값이 글자색을 따라간다

선택자 {
    text-shadow : 가로거리(x) 세로거리 (y) 번짐정도 색상;
}

line-height

• 텍스트 줄 사이의 거리를 설정할 때 사용

p{
	line-height : 1.5;
}