CSS - 속성(글꼴, 문자)

font

; 글자 관련 속성들을 지정.

font-style : 글자 기울기 지정.

font-weight : 글자 두께 지정.

font-size : 글자 크기 지정. mediun(16px)

line-height : 줄 높이(줄 간격) 기정. normal(Reset.css 적용시 1)

font-family : 글꼴(서체) 지정. 운영체제(브라우저)에 따라 달라짐.

 

font: 기울기 두께 크기 / 줄높이 글꼴;
 
.box {
    font: italic bold 20px / 1.5 "Arial", sans-serif
}
 
.box {
    font: 30px / 1.5; /* Error */
    font: bold; /* Error */
    font: bold sans-serif; /* Error */
    font: 30px / 1.5 sans-serif;
    font: bold 30px sans-serif;
    font: italic 30px / 1.5 "Arial", sans-serif;
}
 
**단축 속성을 사용하려면 font-size 와 font-family 를 필수로 입력해야 한다.

font-style

; 글자 스타일(기울기)을 지정.

normal : 스타일 없음.

italic : 이텔릭체.(활자)

oblique : 기울어진 글자.

font-weight

; 글자 두께(가중치)을 지정.

normal : 기본 글자 두께.

bold : 글자 두껍게.

border : 부모(상위) 요소보다 더 두껍게.(bold보다 두껍다는 개념이 아님)

lighterl : 부모(사위)요소보다 더 얇게.

숫자 : 100부터 900까지의 100단위의 숫자 9개, noraml과 bold 이외의 두께를 제공하는 글꼴(서체)을 위한 설정.

 

font-size

; 글자의 크기를 지정.

단위 : px, em, cm 등 단위로 지정.(기본값 16px)

% : 부모(상위) 요소의 비율로 지정. em으로 대처해서 사용 추천.

 

line-height

; 줄의 높이를 지정.

normal : 브라우저의 기본 정의를 사용.(1~1.4)

숫자 : 요소 자체 글꼴 크기의 배수로 지정.

단위 : px, em, cm 등 단위로 지정.

% : 요소 자체 글꼴 크기의 비율로 지정.

*높이는 font-size의 top, bottom 을 포함한다. 

font-family

; 글꼴(서체) 지정.

글꼴 이름 : 글꼴(서체의 후보)를 지정.

글꼴 계열 : serif, sans-serif, monospace, cursive, fantasy.

-

color

; 문자의 색상을 지정. *rgb(0, 0, 0)

색상 이름 : 브라우저에서 제공하는 색상의 이름. red, blue

**Hex 색상코드 : 16진수 색상.(Hexadecimal Colors) #000000

RGB : 빛의 삼원색. rgb(255, 255, 255)

**RGBA : 빛의 삼원색, 투명도. rgba(255, 0, 0, .5)

HSL : 색상, 채도, 명도. hsl(120, 100%, 50%)

HSLA : 색상, 채도, 명도, 투명도. hsla(120, 100%, 50%, .3)

 

text-align

; 문자 정렬 방식을 지정. 

left : 왼쪽 정렬.

right : 오른쪽 정렬.

center : 가운데 정렬.

justify : 양쪽 맞춤. 2줄 이상일때.

text-decoration

; 문자 장식(line)을 설정. 

none : 선 없음.

underline : 밑줄을 지정.

overline : 윗줄을 지정.

line-through : 중앙 선(가로지르는)을 지정.

text-indent

; (첫번째 줄의) 들여쓰기를 지정.

*음수도 사용 가능.(내어쓰기) 존재는 하지만 화면 밖으로 내보내기 가능. 

letter-spacing

; 문자의 자간(글자 사이 간격)을 지정.

normal : 단어 사이의 일반 간격.

단위 : px, em, cm 등 단위로 지정.

word-spacing

; 단어 사이(띄어쓰기)의 간격을 지정.

normal : 단어 사이의 일반 간격.

단위 : px, em, cm 등 단위로 지정.