[CSS]텍스트 관련 속성들: 글꼴 제어, 문자 제어

글꼴을 제어하는 속성들 - 크기, 두께, 기울기, 높이, 글꼴

 

• 글자의 크기 font-size

 font-size 속성은 글자의 크기를 지정하는 속성입니다. 

 

 따로 지정하지 않았을 때의 기본 글자 크기는 16px 입니다.

 

속성 값	설명
16 px	기본 값
단위	px, em, rem, ...
%	부모 요소의 글자 크기를 기준으로 백분율

 

 

• 글자의 두께(가중치) font-weight

 font-weight 속성은 글자의 두께를 지정하는 속성입니다. 

 

 기본 두께는 400입니다. 

 

속성 값	설명
normal	400, 기본 값
bold	700, 두껍게
bolder	부모 요소보다 더 두껍게
lighter	부모 요소보다 더 얇게
100 ~ 900	숫자 값

 

 

• 글자의 기울기 font-style

 font-style 속성은 글자의 기울기를 지정하는 속성입니다. 

 

속성 값	설명
normal	기본값, 기울기 없음
italic	이텔릭체
oblique	기울어진 글자

 

 

• 한 줄의 높이 line-height

 line-height 속성은 한 줄의 높이를 지정하는 속성으로, 행간과 유사합니다. 

 

 텍스트를 요소 내에서 수직축 방향으로 가운데 정렬할 때 사용할 수 있습니다. 

 

속성 값	설명
normal	기본 값, 브라우저의 기본 정의를 사용
숫자	요소의 글꼴 크기의 비율로 지정 (권장!)
단위	px, em, rem, ...
%	요소의 글꼴 크기의 비율로 지정

 

 

 

 

 

• 글꼴 지정 font-family

 font-family 속성은 글꼴을 지정하는 속성입니다. 

 

기본형

font-family: 글꼴1, "글꼴2", ... , 글꼴계열(필수작성) ;

 

 글꼴계열은 필수로 작성해야 합니다!

 

 글꼴1, 글꼴2, ... 는 후보 글꼴이고 앞에서부터 차례대로 먼저 시도합니다. 이때 이 글꼴을 사용 가능하면 사용하고, 후보 글꼴들을 모두 사용할 수 없을 땐 글꼴계열 중에서 아무거나 가져와 적용됩니다. 

 

 

 

 

 

문자를 제어하는 속성들 - 색상, 선, 정렬, 들여쓰기

 

• 글자의 색상 color

 color 속성은 글자의 색상을 지정하는 속성입니다. 

 

 기본값은 검정색이고, 색상이름, 16진법 표기법, rgb, rgba, hsl, hsla 등으로 색상을 표기할 수 있습니다. 

 

 

• 글자에 선 추가 text-decoration

 text-decoration은 텍스트에 선을 추가하는 속성입니다. 

 

속성 값	설명
none	기본값, 선 없음
underline	밑줄
overline	윗줄
line-through	중앙선

 

 

• 글자 정렬 방식 text-align

 text-align 속성은 텍스트의 정렬 방식을 지정하는 속성입니다. 

 

속성 값	설명
left	기본값, 왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 정렬

 

 

 

• 글자 들여쓰기 text-indent

 text-indent 속성은 텍스트의 들여쓰기를 지정하는 속성입니다. 

 

 양수는 들여쓰기를, 음수는 내어쓰기를 합니다.

 

속성 값	설명
0	기본값, 들여쓰기 없음
단위	px, em, rem, ....
%	부모 요소의 들여쓰기 백분율