Web(15) 글꼴 관련 스타일

Web

ddanss 2018. 9. 25. 14:06

728x90

글꼴 관련 스타일

1. font-family 속성 : 글꼴 지정하기

ex. body { font-family:“맑은 고딕”, 돋움, 굴림 }

글꼴이 설치되어 있지 않은 경우를 대비해 여러개를 써둠. 하나만 써도 무관.

윈도우 영문 기본 글꼴 : sans-serif체, serif체 등

윈도우 한글 기본 글꼴 : 굴림, 궁서, 돋움, 바탕(체) 등

font-family속성은 상속되기 때문에 <body>태그 스타일에서 한 번 정의하면 문서 전체에 적용된다. 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴을 정의 하면 됨.

2. @font-face 속성 – 웹 폰트 사용하기

웹 폰트 : 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식.

기본형 : @font-face { font-family:글꼴이름, src:url(글꼴파일 경로) format(파일 유형); }

eot파일에서는 포맷을 따로 쓰지 않는다.

3. font-size속성 : 글자 크기 조정하기

속성값 (2) 상대크기 : 부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시한다. larger | smaller 가능.

속성값 (3) 크기 : 브라우저와 상관 없이 직접 지정.

속성값 (4) 백분율 : 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시.

단위 (1) : em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절

단위 (2) : ex : x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기르리 조절

단위 (3) : px : 픽셀. 모니터에 따라 상대적으로 크기가 변함

단위 (4) : pt : 포인트. 일반 문서에서 많이 사용하는 단위.

1em = 16px

4. font-weight 속성 : 글자 굵기 지정

속성 값 (1) normal : 일반적인 기본 형태

속성 값 (2) bold | lighter | bolder : 굵게 | 원래 굵기보다 더 가늘게 | 우너래 굵기보다 더 굵게 나타낸다.

속성 값 (3) 100~900 : 400은 normal, 700은 bold에 해당하며 숫자 값을 조절해 좀 더 세밀히 글꼴 두께를 조절할 수 있다.

5. font-variant 속성 : 작은 대문자로 표시하기

대문자를 소문자 크기에 맞추어 작게 표시한 것.

속성 값 (1) normal : 일반적인 형태

속성 값 (2) small-caps : 작은 대문자로 표시.

font-variant-caps : 글자의 대문자 형태를 지정.

6. font-style 속성 : 글자 스타일 지정하기

기본형 : font-style : normal | italic | oblique

속성값 (1) normal : 기본형

속성값 (2) italic : 이탤릭체 (기울어진 글꼴이 처음부터 디자인 됨)

속성값 (3) oblique : 이탤릭체 (원래 글꼴을 단지 기울인 것 뿐)

ex. { font-style:italic }

7. font 속성 : 글꼴 속성을 한꺼번에 묶어 표현하기

ex . { font : italic 12px/24px(size/height) 돋움; }

8. 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표현해주는 기능

ex. : 캡션에 어울리는 글꼴 스타일

ex. : 아이콘에 어울리는 글꼴 스타일

ex. : 드롭다운 메뉴에 어울리는 글꼴 스타일

ex. : 대화상자에 어울리는 글꼴 스타일

ex. : 작은 캡션에 어울리는 글꼴 스타일

ex. : 상태 표시줄에 어울리는 글꼴 스타일