CSS (3) FONT와 TEXT의 기본적인 속성

1_FONT 속성

 (1) 서체(font-family)

See the Pen aeVoYV by ++EXP (@pp_exp) on CodePen.

 

FONT 속성은 서체와 관련된 속성으로, 종류, 스타일, 작성 형태, 크기, 굵기 등을 지정할 수 있다. 

국가별로 분류되는 방식과 시스템 내에서 읽히는 방식의 문제 때문에 다수의 폰트를 지정한다. 

(만약 앞서 폰트가 없다면, 뒤의 폰트로 읽는다.)

 

한글 폰트는 한글-영문의 순서로 입력하며, 한글 혹은 공백이 포함된 경우, 따옴표로 묶어준다. 

영문 폰트는 폰트 종류를 입력하고 공백이 포함된 경우 쌍따옴표로 묶어준다. 

 

또한 영문 폰트는 여기에 서체의 종류(generic-family)를 지정할 수 있고, 종류는 다음과 같다.

 

font-family 사전 설정 값	설명
serif	삐침 있는 서체 종류
san-serif	삐침 없이 굵기가 일정한 서체 종류
monospace	글자 폭과 간격이 일정한 서체
cursive	필기체
fantasy	화려한 장식서체

 

---

 

(2) 스타일

See the Pen bXYbxN by ++EXP (@pp_exp) on CodePen.

 

 

font-style 사전 설정 값	설명
normal	스타일 적용 없음
italic	이텔릭체
oblique	기울이기

 

---

 

 (3) 첫머리 글자 대소문자 변경(한글 미적용)

See the Pen NQwKOq by ++EXP (@pp_exp) on CodePen.

 

font-variant의 사전 설정 값	설명
normal	기본형
small-caps	소문자를 작은 대문자로 바꾸기

 

---

 

 (4) 굵기(font-weight)

See the Pen zgPYRm by ++EXP (@pp_exp) on CodePen.

 

font-weight 사전 설정 값과 숫자	설명
normal	기본
light	가늘게
bold	굵게
bolder	가장 굵게
100~900	숫자 표기로 굵기 표시

 

---

 

 (5) 크기

See the Pen WVXNgZ by ++EXP (@pp_exp) on CodePen.

 

크기 단위	설명
백분율(%)	기본 크기를 백분율로 설정한 크기
배수(em)	해당 글꼴(font)의 기본 크기를 1em로 설정한 크기
픽셀(px)	스크린의 픽셀(pixel)을 기준으로 하는 크기로 설정
포인트(pt)	스크린의 포인트(point)을 기준으로 하는 크기로 설정

 

---

 

2_TEXT 속성

텍스트 속성은 각 텍스트(문자)를 조정한다. 자간, 줄 간격, 정렬, 방향, 들여쓰기 등을 조정할 수 있다. 

 

(1) 간격 조정

See the Pen qeVEdE by ++EXP (@pp_exp) on CodePen.

 

 

속성명	설명
letter-spacing	글자 간 간격 속성 : 크기 단위 값 표시
word-spacing	단어 간 간격 속성 : 크기 단위 값 표시
line-height	글줄 간 간격 속성 : 크기 단위로 값 표시
text-indent	들여쓰기 속성 : 크기 단위로 값 표시

 

---

 

(2) 텍스트 정렬과 방향

See the Pen VorYpm by ++EXP (@pp_exp) on CodePen.

속성명	값과 설명
text-align	텍스트 가로 방향 정렬 : 왼쪽(left),  ,
	텍스트 가로 방향 정렬 : 가운데(center)
	텍스트 가로 방향 정렬 : 오른쪽(right)
	텍스트 가로 방향 정렬 : 양쪽 맞추기(justify)
direction	텍스트 작성 방향 : ltr(left to right) : 왼쪽에서 오른쪽으로
	텍스트 작성 방향 : rtl(right to left) : 오른쪽에서 왼쪽으로

 

---

 

(3) 텍스트 꾸밈 효과

See the Pen LwOEjZ by ++EXP (@pp_exp) on CodePen.

 

text-decoration의 사전설정 값	설명
none	없음
initial	기본값
line-throught	관통선(글자를 관통하는 선)
underline	밑줄(글자 밑의 줄)
overline	윗줄(글자 위의 줄)
inherit	부모 요소의 속성값 상속

 

---

 

(4) 텍스트 그림자 효과

See the Pen JgOorG by ++EXP (@pp_exp) on CodePen.

 

text-shadow 사전 설정 값	설명
none	없음
initial	기본값
inherit	상속값
작성 {text-shadow: offset-x offset-y blur-radius color ;}	예시) 선택자{        20px   20px       5px        blue}

 

---

 

(5) 영문 텍스트 대소문자 변환

 

See the Pen jgaEaQ by ++EXP (@pp_exp) on CodePen.

 

text-transform 속성 사전 설정 값	설명
uppercase	대문자로 변환.
lowercase	소문자로 변환
capitalize	단어의 첫 머리만 대문자로 변환