안규 공부방

Javascript & JQuery & CSS > font - font-family,font-size,font-style,text-decoration

등록일 : 2017-07-14 17:48 조회수 : 93,714

CSS(Cascading Style Sheet) 폰트 표현 방법에 대해서 알아보겠습니다.

1. 폰트체 조절 - [ font-family ] 
 - 폰트체를 지정하는 속성으로 "font-family:글꼴이름" 와 같은 방법으로 표현

2. 폰트크기 조절 - [ font-size ] 
 - {font-size:50} 와 같은 방법으로 표현

3. 폰트굵기 조절 - [ font-weight ] 
 - HTML에서의 <b>속성과 같다. 글자의 크기를 굵게 표현.
 font-weight:bold;

4. 폰트스타일 조절 - [ font-style ]
 - 폰트의 스타일을 설정하는 부분으로 표준(normal), 이탤릭(italic)으로 사용하며 스타일이 italic로 적용된
   예제를 보시면 HTML태그의 <i>속성과 같음.
 - 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 ] 
 - 텍스트에 줄을 긋는 기능으로 HTML에서의 <u>,<s>태그등과 비슷합니다.
  underline : 밑줄긋기
  overline : 윗줄긋기
  line-through : 가운데 줄긋기

  예제)
   .font_test1 {text-decoration:underline}
   .font_test2 {text-decoration:overline}
   .font_test3 {text-decoration:line-through}


7. 색상 - [ color ]
 - Color속성에 대해서는 굳이 설명을 드리지 않아도 아시겠죠^^ 더 중요한 것은 Color의 값을 어떻게, 또는
 보기좋은 색상을 넣을지가 더 관심사 인것 같습니다.

 .font_test {color:red}
 
※ 혹시 도움이 되셨다면 댓글에 한마디 남겨주세요!
작성자   비밀번호
자동글 방지     (자동글 방지 기능입니다.)
내용   댓글달기 
이메일 문의 : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.