웹사이트 관련 팁들을 모아놓은 곳입니다. 좋은팁 공유 합시다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 186

28

조회 수 : 2258 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
Font 속성
 

글자 모양과 크기에 관계된 여러 가지 속성을 지정할 수 있다.

기호 설명

A | B : A 또는 B 중의 하나이다.
A || B : A 또는 B 중의 하나, 또는 둘 다이다.
[  ] : 일반적인 괄호의 의미이다.
A{1,2} : A가 최소한 1번에서 최대한 2번까지 들어갈 수 있다.
<A> : A의 값을 쓴다.
A* : A가 0번 이상 여러번 나올 수 있다.
A? : A가 들어갈 수도 있고, 안 들어갈 수도 있다.
font-family : [[ <글꼴이름> | <기본글꼴이름> ],]* [<글꼴이름> | <기본글꼴이름>]

모든 element에 적용할 수 있고, 유전된다.

초기값은 브라우저마다 다르다.

두 개 이상의 글꼴 이름을 쓸 때는 쉼표(,)로 구분하고, 글꼴 이름이 두 단어 이상이면 큰 따옴표(" ")로 묶는다. 브라우저는 앞에 있는 글꼴부터 보여주려고 노력한다.

제일 마지막에 쓰는 글꼴은 기본 글꼴을 써 준다. 영문 기본 글꼴은 serif, sans-serif, cursive, fantasy, monospace 등 5개를 말한다.

<HTML>
<HEAD>
<STYLE type="text/css">
H1 { font-family : Flubber, "Times New Roman", serif } 
</STYLE>
<BODY>
<H1>Flubber라는 글꼴이 없으면 Times New Roman으로 나온다.</H1>
<BODY>
</HTML> 이렇게 나와요
※ 한글 글꼴은 아직 지원되지 않는다.

font-style : normal | italic | oblique

글자의 모양이다.

모든 element에 적용할 수 있고, 유전된다.

초기값은 normal이다.

Italic과 oblique은 모두 기울임꼴이다.

<HTML>
<HEAD>
<STYLE type="text/css">
SPAN {font-style : italic}
</STYLE>
<BODY>
여기는 보통 글자입니다.<BR>
<SPAN>여기는 기울임꼴이구요.</SPAN>
여기는 또 보통입니다.
<BODY>
</HTML> 이렇게 나와요

font-variant : normal | small-caps

모든 element에 적용할 수 있고, 유전된다.

초기값은 normal이다.

Small-caps는 크기가 작은 대문자로 나온다.

<HTML>
<HEAD>
<STYLE type="text/css">
SPAN {font-variant : small-caps}
</STYLE>
<BODY>
I can't help falling in <SPAN>love</SPAN> with you.
<BODY>
</HTML> 이렇게 나와요
※ 원래 small-caps는 정상적인 대문자보다 조금 작게 나와야 하는데, 예를 보면 알 수 있듯이 거의 비슷하다.

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

글자의 굵기를 조정한다.

모든 element에 적용할 수 있고, 유전된다.

초기값은 normal이다. Normal은 400과 같고, bold는 700과 같다.

<HTML>
<HEAD>
<STYLE type="text/css">
SPAN {font-weight : 800}
</STYLE>
<BODY>
I can't help falling in <SPAN>love</SPAN> with you.
<BODY>
</HTML> 이렇게 나와요
※ 실제로 어떤 굵기로 화면에 출력되느냐는 글꼴에 따라 다르다. 어떤 글꼴은 normal과 bold로만 표현될 수도 있고, 어떤 글꼴은 8단계로 나타날 수도 있다.

font-size : <절대값> | <상대값> | <길이> | <퍼센트>

글자의 크기를 정한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

초기값은 medium이다.

  • 절대값 : xx-small | x-small | small | medium | large | x-large | xx-large
  • 상대값 : larger | smaller
퍼센트 값을 썼을 때는 부모 element의 글자 크기를 기준으로 한다.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { font-size : 10pt}
BLOCKQUOTE { font-size : xx-large }
</STYLE>
<BODY>
여기는 10포인트 글자이다.
<BLOCKQUOTE>
여기는 xx-large만큼 커진다.
</BLOCKQUOTE>
<BODY>
</HTML> 이렇게 나와요
font : [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

모든 element에 적용할 수 있고, 유전된다.

대표속성에는 초기값이 없다.

<HTML>
<HEAD>
<STYLE type="text/css">
P { font: bold italic large }
</STYLE>
<BODY>
<P>bold, italic, large</P>
<BODY>
</HTML> 이렇게 나와요

출처: 술도넷
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/webtip/13913/763/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

환상 (101011)

2009.09.17 21:30:05

감사합니다!!!!
List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
186 best of best head 파일과 foot 파일 만드는 방법 [6] title: [ani]깜빡이는 표정빽짱구 2004-03-10 68 4124
185 best of best 홈페이지에 FTP 폼 넣기 [5] title: [ani]깜빡이는 표정빽짱구 2005-03-15 52 6238
184 best of best 서서히 변하는 롤오버 효과 [3] title: [ani]깜빡이는 표정빽짱구 2004-08-19 52 3847
183 best of best 제 community 메뉴에 쓰인 해드파일과 풋파일 [3] title: [ani]깜빡이는 표정빽짱구 2004-06-08 52 4197
182 best of best 프레임 보이고 숨기기 title: [ani]깜빡이는 표정빽짱구 2004-08-18 47 3617
181 best of best 프린트 버튼 출력하기 [1] title: [ani]깜빡이는 표정빽짱구 2004-08-19 40 3502
180 best of best HTML 테그표입니다. [2] title: [ani]깜빡이는 표정빽짱구 2004-02-17 38 3068
179 best of best 제로보드폴더 복구와 관련한.. [1] title: [ani]깜빡이는 표정빽짱구 2005-03-17 34 9485
178 best of best 제홈에 사용중인 스크롤바 색상 [1] title: [ani]깜빡이는 표정빽짱구 2004-10-13 34 3195
177 best of best 플래쉬 테두리생기는문제 코딩법 [2] title: [ani]깜빡이는 표정빽짱구 2006-04-25 33 9171
176 best of best 하이퍼링크란? (절대경로와 상대경로) title: [ani]깜빡이는 표정빽짱구 2004-10-17 33 7120
175 best of best FTP없이 자신의 계정없이 내용확인하기 [5] title: [ani]깜빡이는 표정빽짱구 2004-02-07 33 3395
174 best of best 서버이전 할경우 이미지네임관련 [4] title: [ani]깜빡이는 표정빽짱구 2005-03-19 32 6612
173 best of best 이미지 못가져가게 막기 [2] title: [ani]깜빡이는 표정빽짱구 2004-08-19 31 2928
172 best of best input 태그 (검색창안에 이미지넣기) [3] title: [ani]깜빡이는 표정빽짱구 2005-03-15 30 8682
171 best of best 플래쉬 swf 파일 투명하게하기 title: [ani]깜빡이는 표정빽짱구 2005-03-08 30 5120
170 best of best 자동광고글 차단하기 [1] title: [ani]깜빡이는 표정빽짱구 2004-08-21 30 3410
169 best of best select 폼 예쁘게 꾸며보기 [3] title: [ani]깜빡이는 표정빽짱구 2005-03-15 29 7141
168 best of best 그라데이션 셀렉박스만들기 [1] title: [ani]깜빡이는 표정빽짱구 2005-01-20 29 4761
167 best of best 태그목록 [2] title: [ani]깜빡이는 표정빽짱구 2004-02-17 29 2569