CSS3 - CSS 스타일 - 폰트에 관련된 속성 사용법 (6)

CSS3 - CSS 스타일 - 폰트에 관련된 속성 사용법 (6)

오늘은 CSS3의 여섯번째 내용으로 CSS 스타일 속성 중 폰트에

 관련된 내용에 대해서 가볍게 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

css 스타일 - 폰트란?

 

먼저 css 에서 폰트란 css 텍스트의 폰트의 종류, 색상, 장식 크기 등을 

지정하는 속성으로 아래와 같은 속성들이 있습니다.

속성	내용
font	한 줄에서 모든 폰트의 속성을 설정할 때 이용
font-family	폰트 패밀리 설정 (폰트의 종류)
font-size	폰트 사이즈 크기
font-style	폰트의 스타일 지정
font-weight	폰트의 굵기 지정

<css 폰트 속성 종류>

텍스트의 폰트는 font-family 속성을 이용해서 설정이 되는데

font-family 속성을 지정할 때는 여러 가지의 폰트 이름을 제공하는 것이 좋습니다.

왜냐 브라우저가 HTML 파일을 표시 하고자 할때 컴퓨터에 지정된

폰트가 없는 경우가 있기 때문에 브라우저에 첫번째 지정한 폰트가 없게되면

자동적으로 두번째 폰트를 나열하고 두번째 마저 없다면 그 다음 번째

그 다음도 없다면 마지막 번째 가장 일반적인 폰트로 지정해야 하기 때문입니다. ^^

폰트 속성에는 위와 같은 내용들이 있으며 아래와 같이 사용 합니다.

<font-family 기준 사용법>

1. fotnt-family :  폰트의 종류 속성

2. Times New Roman : 가장 선호하는 폰트

3. times : 기본 폰트

4. serif : 마지막 폰트는 항상 일반 폰트 사용

추가로 여기서 부터는 위 내용 중 중요한 부분에 대해서

설명 하도록 하겠습니다.

 웹 폰트에 관련된 내용 입니다.

웹 폰트란 폰트를 웹 서버에 저장해 두었다가 필요할 떄,

사용자의 웹 브라우저로 직접 전송하는 기법인데 이 기법을 사용하기 위해서는

구글 웹폰트 사이트에 들어가서 원하는 폰트를 찾은 후

아래와 같은 코드를  *, body에 적용하면 됩니다.

<구글 웹 폰트 임의 코드>

 폰트 크기 설정에 관련된 내용 입니다.

먼저 웹 폰트의 크기는 px단위, %단위, em단위, 키워드 단위 

등이 있는데 사용법은 아래와 같습니다.

<폰트 사이즈 지정 방법>

폰트 사이즈 지정 방법은 위와 같은 방법으로 적용 합니다.

1. px : 폰트의 크기도 px단위로 적용이 가능하고 

숫자의 크기 만큼 크기가 커집니다.

2. % : 폰트를 퍼센트로 설정하는데 퍼센트는 기준 폰트의 크기에

비례해서 어느 정도인지를 많이 나타 냅니다.

3. em : em 크기 단위는 배수를 의미하데 em도 %와 같이

상대적인 크기를 나타 냅니다.

4. 키워드 : 키워드 설정은 우리가 입는 옷 사이즈와 비슷하게

위 이미지 처럼 small, x-small, xx-small, medium, large, x-large, xx-large 

로 적용이 됩니다.  ^^

 폰트 굵기에 관련된 내용 입니다.

css에서 폰트 굵기란 font-weight 속성을 사용하며 

아래와 같이 사용 할 수 있습니다.

위와 같이 bold, bolder, inherit, lighter, normal 등 키워드로

폰트의 두께를 지정할 수 있고 숫자로는 최소 100에서 

100단위로 최대 900까지 지정 할 수 있습니다.

 폰트 스타일에 관련된 내용 입니다.

css에서 폰트 스타일이란 fotn-style 속성을 사용하며 

아래와 같이 사용 할 수 있습니다.

위와 같이 폰트 스타일 이탤릭 텍스트로 설정할 것인지를 결정하는 건데

이 지정 방법은 위의 normal, inherit, italic, oblique 이 있습니다.

여기까지 css스타일 - 폰트에 관련된 속성 사용법에 대해서 

간략하게 알아 보았습니다.

위 내용 같은 경우는 직접 타이핑 해보면서 하시는게 쉽기

때문에 별도 출력된 모습은 넣지 않았습니다.

이상 CSS3 - CSS 스타일 - 폰트에 관련된 속성 사용법 (6)에 

관련된 포스팅을 마치도록 하겠습니다.