진보호스팅 블로그

7. 글꼴(Font)과 관련된 속성들

7.1. Font 속성 글자 모양과 크기에 관계된 여러 가지 속성을 지정할 수 있다. 주로 사용되는 속성들에 대한 정리를 다음의 표를 이용하여 해보았다.

속성 속성값 설명 font-family [[글꼴이름 | 기본글꼴이름] 글꼴을 정하는 속성이다. 두 개 이상의 글꼴 이름을 쓸 때는 쉼표(,)로 구분하고, 글꼴 이름이 두 단어 이상이면 큰따옴표(" ")로 묶는다. 브라우저는 앞에 있는 글꼴을 먼저 찾고 사용자의 시스템에 설치되어 있지 않은 글꼴인 경우에는 기본 글꼴을 보여준다. 제일 마지막에 쓰는 글꼴은 기본 글꼴을 써 주도록 하는 것이 현명할 것이다. 영문 기본 글꼴은 serif, sans-serif, cursive, fantasy, monospace 등 5개를 말한다. font-style normal | italic | oblique 글자의 모양이다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. Italic과 oblique는 모두 기울임꼴이다. font-variant normal | small-caps 초기값은 normal이다. Small-caps는 크기가 작은 대문자로 나온다. font-weight normal | bold | bolder | lighter | 100∼900 글자의 굵기를 조정한다. 초기값은 normal이다. Normal은 400과 같고, bold는 700과 같다. 실제로 어떤 굵기로 화면에 출력되느냐는 글꼴에 따라 다르다. 어떤 글꼴은 normal과 bold로만 표현될 수도 있고, 어떤 글꼴은 8단계로 나타날 수도 있다. font-size 절대값 | 상대값 | 길이 | 퍼센트 글자의 크기를 정한다. 초기값은 medium이다. 절대값 : xx-small | x-small | small | medium | large | x-large | xx-large 상대값 : larger | smaller 퍼센트 값을 썼을 때는 부모 요소의 글자 크기를 기준으로 한다. font [['font-style'||'font-variant'||'font-weight'||'font-size'||'line-height'||'font-family'] 글꼴, 글자굵기, 글자크기 등을 한꺼번에 지정해 줄 수 있으며 표속성이나 초기값은 없다. text-decoration none|[ underline||overline||line-through||blink] 글자에 밑줄이나 윗줄을 그을 수 있으며 초기값은 none이다. color 색이름 | RGB값 글자색을 나타낸다. 초기값은 브라우저마다 다르다. text-transform capitalize | uppercase | lowercase | none 영문자열의 대소문자를 변경하는데 사용한다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 none이다.

여기서 살펴본 여러 속성들을 브라우저에서 테스트해보도록 하자.

	This is a simple text for test! This is another text for test!! 진보네트워크 교육센터 링크는 아니지만 밑줄을 쳐보죠. line-through capitalize & weight effect