CSS를 통해 Font를 조절하기

CSS를 통해 Font를 조절하기

웹 페이지의 정보를 뿌려주는 글자의 유형을 지정하는 방식은 일반적인 HTML의 font 태그로만은 상당한 제약이 따릅니다. 이를 CSS의 기능을 사용하면 쉽게 해결할 수 있습니다.

CSS의 Font 속성들

1. 글꼴 조절 - font-family
   글꼴을 지정하는 속성으로써 "font-family:글꼴 이름"과 같이 사용하게 됩니다.
   
   예 : .font_test {font-family:돋움}
   
   
   
2. 글꼴 크기 조절 - font-size
   글꼴의 크기를 조절할 수 있습니다. 화면 가득한 글씨까지도 만들 수 습니다.
   
   예 : .font_test {font-size:30}
   
   
   
3. 글꼴 굵기 조절 - font-weight
   글꼴 굵기를 조절하려면 일반적으로 <b>태그를 사용하면 되지만 CSS를 사용함에 있어서는 반드시 font-weight를 사용해야만 합니다.
   
   예 : .font_test {font-wieght:bold}
   
   
   
4. 글꼴 스타일 조절 - font-style
   글꼴이 일반(Normal)인지 약간 기울어진(Italic)인지를 구분하는 것입니다.
   
   예 : .font_test {font-style:italic}
   
   
   
5. 대-소문자 변환 - text-transform
   이 스타일시트가 적용되면 해당 부분의 글을 전부 대문자(uppercase) 혹은 전부 소문자(lowercase)로 바꿀 수 있으며 띄어쓰기 후 맨 첫 글자를 대문자(capitalize)로 바꿀 수 있습니다.
   
   .font_test1 {text-transform:uppercase}
   .font_test2 {text-transform:lowercase}
   .font_test3 {text-transform:capitalize}
   
   
   
6. 줄긋기 기능 - text-decoration
   글자의 밑(underline) 혹은 위(overline), 가운데(line-through)에 줄을 그을 수 있습니다.
   가운데 줄이 가는 것은 가격을 할인해서 판매한다고 할 때 많이 사용됩니다.
   
   .font_test1 {text-decoration:underline}
   .font_test2 {text-decoration:overline}
   .font_test3 {text-decoration:line-through}
   
   
   
7. 글자 색깔 - color
   원하는 색깔로 글자 색을 바꿀 수 있습니다.
   
   .font_test {color:pink}

 

　

이제 위에서 설명된 속성들을 조합하여 사용해보도록 하겠습니다.

• 돋움, 23포인트 크기, 파란색의 스타일시트
  
  .linkprice {font-family:돋움;font-size:23;color:blue}
  
  HTML로 표시하면
  
  링크프라이스 입니다.
  
  
  
• 궁서체, 굵게, 30포인트 크기, 갈색, 밑줄
  
  .linkprice {font-family:궁서체;font-weight:bold;font-size:30;color:brown;text-decoration:underline}
  
  HTML로 표시하면
  
  링크프라이스 입니다.
  
  

다음은 CSS의 다른 기능 중의 하나인 위치 표현에 대하여 알아보겠습니다.

 

 

 

http://www.linkprice.com/home5/linkprice0404_view.htm?id=14