티스토리 뷰

DEVELOPE/CSS

CSS 폰트(Font) 글꼴속성

소찾나 2017. 10. 26. 20:43
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

CSS 폰트(Font) 글꼴속성

CSS 폰트(Font) 글꼴속성

CSS 폰트(Font) 글꼴속성



CSS 중 폰트과 관련된 속성들을 알아보고 사용법을 숙지하도록 해보자.


1 font-family


font-family 는 글꼴 종류를 설정하기 위해서 사용됩니다.


사용예) font-family: 굴림체;


font-family: 굴림체, 돋움체; 등으로 콤마(,)를 이용하여 글꼴을 연속적으로 설정할 수 있습니다. 왼쪽 글꼴 기준으로 설정되며, 왼쪽 글꼴


이 없으면 그 다음 글꼴이 적용됩니다.


2 color 속성


color 속성은 모든 테그에 사용할 수 있는 속성으로 문자 색을 설정합니다. color 속성은 색상 상수나 색상값을 이용하여 설정할 수 


있습니다.


사용예) color: #00FF88;  , color: blue



3 font-size 속성


글꼴 관련 속성으로 글꼴의 크기를 설정하기 위해서 사용된다


smaller, larger, xx-small, x-small, small, medium, large, x-large, xx-large 등의 상수로 크기를 조정할 수 있다


위 상수들로 표현된 글자의 크기를 아래에서 확인할 수 있습니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
  <html>
  <head>
   <meta charset="utf-8">
   <title>font-size 테스트</title>
  <style type="text/css">
  .smaller { font-size:smaller; }
  .larger { font-size:larger; }
  .xx-small { font-size:xx-small; }
  .x-small { font-size:x-small; }
  .small { font-size:small; }
  .medium { font-size:medium; }
  .large { font-size:large; }
  .x-large { font-size:x-large; }
  .xx-large { font-size:xx-large; }
                                                                                                
 
  </style>
  </head>
  <body>
  <p class="smaller" align="center">CSS는 쉬워요!</p>
  <p class="larger" align="center">CSS는 쉬워요!</p>
  <p class="xx-small" align="center">CSS는 쉬워요!</p>
  <p class="x-small" align="center">CSS는 쉬워요!</p>
  <p class="small" align="center">CSS는 쉬워요!</p>
  <p class="medium" align="center">CSS는 쉬워요!</p>
  <p class="large" align="center">CSS는 쉬워요!</p>
  <p class="x-large" align="center">CSS는 쉬워요!</p>
  <p class="xx-large" align="center">CSS는 쉬워요!</p>
  </body>
</html>
cs



CSS 폰트(Font) 글꼴속성





font-size 속성을 '실수값+단위' 의 형식으로 설정할 수 있습니다.


 기준

 기준

 약어

 사용예

 절대적

 points(1포인트=1/72인치)

 pt

 font-size:10pt;

 

 inch(1인치=2.54cm)

 in

 font-size:2in;

 

 cm(1cm=10mm)

 cm

 font-size:10cm;

 

 mm(1mm=1/10cm)

 mm

 font-size:20mm;

 

 picas(1피이키=12포인트)

 pc

 font-size:24pc;

 상대적

 pixels

 px

 font-size:24px;

 

 ems(영문글꼴 높이를1)

 em

 font-size:13em;

 

 exs(소문자 x높이를1)

 ex

 font-size:15ex 

 

 %

 %

 font-size:70%


% 는 상위글꼴 크기를 기준으로 이용하는 글꼴의 크기를 설정한다.



4 font-weight 속성


 상수

설명 

 100~900

 100~900 으로 글꼴의 굵기를 설정 할 수 있다.

 normal

 표준글꼴의 설정으로 400 으로 설정한 것과 동일

 bold

 굵은글꼴의 설정으로 700 으로 설정한 것과 동일

 lighter

 100~900 사이의 굵기 범위에서 한단계 가는 글꼴로 설정

 bolder

 100~900 사이의 굵기 범위에서 한단계 굵은 글꼴로 설정


5 font 속성


font 속성은 글꼴에 관련된 여러 개의 속성을 한번에 설정하기 위해서 사용됩니다.


 속성종류

 생략유무

 설명

 font-family

 불가능

  글꼴 종류를 설정

 font-size

 불가능

  글꼴의 크기를 설정

 font-style

 가능

  글꼴 스타일을 설정

 font-variant

 가능

  작은 대문자로 만들지를 설정

 font-weight

 가능

  글꼴의 굵기를 설정

 font-height

 가능

  줄 간격을 설정



이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^


'DEVELOPE > CSS' 카테고리의 다른 글

CSS 외부파일 불러오기  (0) 2017.10.27
CSS DIV 속성 position  (0) 2017.10.27
CSS hover 사용법  (0) 2017.10.26
CSS margin / padding  (0) 2017.10.25
모바일웹 이미지맵 CSS 설정  (0) 2017.01.31
공유하기 링크
댓글