Archived(Programming)/Css

Chap 3. Font(서체)

bale.yoon 2019. 1. 22. 23:10

* Font-size


px, em, rem

px 는 고정, em/rem 은 상대적

브라우저 설정에 따라서 달라짐


사용자가 브라우저의 글꼴 크기를 키웠을 때 같이 커짐

즉, rem 을 쓰는 것이 적절(사용자의 권리 존중)


* Color 


color name, hex, rgb 


* Text-align


참고용) Lorem Ipsum 텍스트 활용

center, left, right 외에도 justify 를 쓰면 간격 조정


* Font-family, Font-weight, Line-height


font-family로 글꼴 설정

여러 개를 설정하면

font-family: arial, herif, ... 등을 써주면 차례로 우선순위로


Serif(sans 부정) 을 통해 글꼴 장식 있는지 없는지 지정 가능

monospace 고정폭(글자마다 폭)

ex) font-family : arial, verdana, monospace;


font-weight 는 글 두께

line-height 는 자간(줄 간격)


font의 속성을 한번에 쓰려면

font : font-weight font-size/line-hegiht, font-family, serif


1
2
3
element{
    font : bold 2rem/2, "nanum", serif;
}
cs


복잡하지만 한번에 사용 가능


* 웹 폰트


1) 구글폰트

2) web-font-generate(OTF 파일을 웹폰트로 만들수 있음)