CSS | 4. 폰트 텍스트 관련

폰트 관련

font-family

• family-name : 사용할 폰트의 이름
• generic-family : family-name으로 지정된 글꼴이 없을 경우 대체 폰트

font-size

글꼴의 크기를 지정

• keyword : medium 기본값
• absolute size
• relative size
• length : px, em 등 고정수치
• initial :
• inherit :

font-weight

글꼴의 스타일

• normal : 
• italic : 이태릭체
• oblique : 이태릭체보다 더 기울어진 각도
• lighter :
• number :

font-style

글글꼴의 형태를 변형하는 속성

• normal : 
• small-caps : 소문자를 작은 대문자로 변형

font-variant

글꼴의 굵기

• normal : 기본값 400
• bold : 굵게 700
• bolder :
• lighter :
• number :

webfont

• 시스템폰트 : 선언한 글꼴이 사용자 시스템에 설치되어 있는 경우
• 이미지폰트 : 글꼴 대신 이미지를 이용하여 표현
• 웹폰트 : 웹에 있는 글꼴을 사용자의 컴퓨터에 다운로드하여 적용

@font-face{
    font-family:webNanumGothic;
    src:url();
    font-weight:bold;
    font-style:italic;
}

텍스트 관련

text-align

텍스트를 수평 정렬

• left : 
• right : 
• center :
• justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬

vertical-align

텍스트를 수직 정렬

• keyword : 
• length : 
• percent : 

text-indent

들여쓰기

• length : 
• initial : 
• inherit : 

text-decoration

텍스트 장식

• text-decoration-line
• underline : 밑줄
• overline : 윗줄
• line-through : 중간줄 
• text-decoration-color 
• text-decoration-style 

typography

• baseline : 소문자 x를 기준으로 하단의 라인
• descender : 소문자 x를 기준으로 baseline 아래로 넘어가는 영역을 의미 (g, j, p, q, y)
• ascender : 소문자 x를 기준으로 상단 라인 위어 넘어가는 영역을 의미합니다. (b, d, h, l)

line-height

행간. 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어

• normal : 브라우저에 따라 다르지만 보통 1.2
• number : font-size를 기준으로 설정한 숫자만큼 배율
• length : px, em 등 고정수치
• initial : 
• inherit : 

word-wrap

콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현

word-break

길이가 긴 단어를 나누어 표현해야할 때 단어가 나뉘는 기준을 설정

break-all

keep-all

관련포스트

• CSS | 개념
• CSS | 구문과 적용 방법
• CSS | 박스모델