04_CSS_글꼴,문자

오늘은 CSS설정중 글꼴, 문자에 대해 공부하였다.

 

font

font-style : 글자 기울기 지정
font-weight :글자 두께 지정
font - size : 글자 크기 지정
line-height : 줄높이(줄간격) 지정
font-family : 글꼴 지정


font : 기울기 두께 크기 / 줄높이 글꼴;

>> /(슬래시) 가 들어가는 부분이 있다.
이유 ? 
크기와 줄높이 모두 px값으로 설정이 가능하기에 헷갈림을 방지하기 위함

>> font-size와 font-family는 필수로 입력해야 사용이 가능하다.


font-style
nomal : 스타일 없음
italic : 이텔릭체
oblique : 기울어진 글자

font-style

font-weight
normal : 두께(400)
bold : 두껍게 (700)
bolder : 부모요소보다 더 두껍게
lighter : 부모요소보다 더 얇게
숫자 : 100~900까지의 100단위의 숫자 9개로 설정

100-Thin(Hairline)
200-Extra Light(Ultra Light)
300-Light
400-Normal
500-Medium
600-Semi Bold(Demi Bold)
700-Bold
800-Extra Bold(Ultra Bold)
900-Black(heavy)

-bolder
100~300 >> 400
400~500 >> 700
600~900 >> 900

-lighter
100~400 >> 100
600~700 >> 400
800~900 >> 700

font-size
% : 부모 요소의 비율로 지정
단위 : px,em,cm 등 지정
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

>>완벽한 절대적 크기를 모르기에 권장하지는 않는다.


line-height
>> 줄의 높이를 설정한다.
normal : 브라우저의 기본 정의를 사용
숫자 : 요소 자체 글꼴 크기의 배수로 지정
단위 : px,em,cm등 단위로 지정
% : 요소 자체 글꼴 크기의 비율로 지정

font-family


font-family[글꼴후보1,글꼴후보2...], 글꼴계열;

폰트라는 계열은 용량이 굉장히 큰 편이라서 웹에 담아두는것이 아닌, 글꼴이름을 올려둔 후 사용자 브라우저에서 찾는 개념이다. 사용자가 글꼴후보1이 없다면, 글꼴후보 2로 넘어가게 되는 것이다. 아무것도 없다면 마지막 ,(쉼표)이후에 오는 고딕체 계열중에서 아무거나 넣는다는 의미이다.

serif - 바탕체 계열
sans-serif-고딕체 계열
monospace-고정너비 글꼴계열
cursive - 필기체 계열
fantasy - 장식(재미있는 문자 표현을 포함하는)글꼴계열

font-family 예제

문자(TEXT)관련 속성

color : 문자의 색상을 지정

색상이름 : 브라우저에서 제공하는 색상의 이름 (red,blue)
Hex 색상코드 : 16진수 색상[ #000000 ]
RGB : [ rgb(255,255,255) ]
RGBA : [ rgba ( 255 , 0 , 0 , .5) ]  << 마지막은 투명도
HSL : 색상,채도,명도 [ hsl(120,100%,50% ]
HSLA : 색상,채도,명도,투명도 [ hsla(120,100%,50%, .3) ]

>>실제에서 Hex색상코드,RGB,RGBA를 많이 사용하게 된다!

text-align
문자 정렬 방식을 지정
left-왼쪽 정렬
right-오른쪽 정렬
center - 가운데 정렬
justify - 양쪽 맞춤  

오른쪽 끝을보면 2번째 줄이 더 길다

justify로 설정하면 끝줄이 맞춰진 것을 알 수 있다.

text-decoration
문자의 장식(line)을 설정
none : 선 없음
underline : 밑줄 지정
overline : 윗줄 지정
line-through : 중앙선 지정

text-decoration

text-indent
들여쓰기를 지정
>>음수를 사용할 수 있다!! >> 내어쓰기

 

특히, 내어쓰기 기능을 사용하면, 글자가 화면에서 출력되지 않게 하는 스킬로써 사용이 가능하다

Mingyu라는 글자가 보이지 않음!

letter-spacing
자간늘리기

음수 값도 가지는 것이 특징

word-spacing
띄어쓰기 단위를 설정