컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post C언어 VC++] 특정 경고(워닝)메시지 출력 일시 중지 프라그마; pragma warni...C언어] 분수를 소수로 변환 출력 방법/예제; Fraction To DecimalC언어] 숫자 배열, 최대값 최소값 찾는 함수; Array Max Min ValueJava/자바] 2차원 문자열 배열 선언, new 연산자로 초기화; 2 Dimensiona...Java/자바] 2차원 배열 선언/초기화/출력 예제; 배열의 배열; Array of Arr...Excel/엑셀] 셀 기본 테두리 없애는 법, 경계선, 격자 그리드 눈금선 제거; Remo...윈도우] BAT 파일 실행 하는 법; MS-DOS 배치 파일 실행법특수문자 그림, 글자로 그림 그리기; ASCII Art 아스키 아트; 이모티콘DOS 배치파일] IF ELSE 문 사용법 예제; 도스 BAT 강좌VMware Workstation 다운로드 페이지; VM웨어 Download 주소

HTML-CSS] CSS 글꼴; 스타일 시트로 폰트(FONT) 지정하는 법

Thursday, November 23, 2006

CSS의 font-family 속성으로 "폰트명"을 지정할 수 있습니다. 한글이나, 또는 공백이 들어간 폰트명은 작은따옴표(')로 둘러싸 주는 것이 좋습니다.


그리고 font 속성으로는 다음과 같이, 각종 글꼴 스타일을 한꺼번에 지정할 수 있습니다. 좀 복잡한데 순서대로 지정해야 합니다.
font-style: normal, italic, oblique (이탤릭체 등 지정)
font-variant: normal, small-caps (작은 대문자 표현)
font-weight: normal, bold, bolder, lighter (굵기 지정)
font-size: 10pt 등등 (크기 지정)
font-family: 폰트명 지정


다음 예제를 보면 쉽게 알 수 있습니다.


CSS 스타일 시트: 폰트 종류, 크기 설정 예제


<html>
<head>
<style type="text/css">

body { font-family:'바탕'; }

.font-test { font:bold 24pt '바탕'; }

</style>
</head>


<body>


둥글고 하얀 어떤 <span style="font:24pt '궁서체'">거대한</span> 무엇이 자꾸만 떠올랐는데 마치 이 세상의 것이 아닌 것처럼 여겨졌다.

The quick <span style="font-family:'Comic Sans MS'">brown fox</span> jumps over the lazy dog.

Jackdaws <span class="font-test">love</span> my big sphinx of quartz.

<div class="font-test">Jackdaws love my big sphinx of quartz.</div>


</body>
</html>


예제의 HTML 출력 결과:
둥글고 하얀 어떤 거대한 무엇이 자꾸만 떠올랐는데 마치 이 세상의 것이 아닌 것처럼 여겨졌다.

The quick brown fox jumps over the lazy dog.

Jackdaws love my big sphinx of quartz.

Jackdaws love my big sphinx of quartz.




body { font-family:'바탕'; }
이것은 body 태그 전체에, 즉 페이지 전체를 '바탕'이라는 한글 명조체 글꼴로 지정하라는 뜻


.font-test { font:bold 24pt '바탕'; }
이번에는 클래스를 만들었습니다. 폰트를 굵게(bold), 폰트 크기는 24포인트, 폰트명은 '바탕'을 지정했습니다. 참고로, '바탕'은 '바탕체'와 달리, 간격이 일정하지 않습니다. 그래서 본문용으로는 좋지만, 프로그래밍 소스처럼 간격이 일정해야 하는 곳에는 적당하지 않습니다.
특정 글꼴을 지정해야 할 곳에
<span class="font-test">...
이렇게 사용하면 됩니다. (클래스명 앞에 붙은 마침표를 떼고)



클래스에 대해


자신이 즐겨 쓰는 폰트 스타일을 클래스로 만들어 두고 사용하면 편리합니다.

예를 들어

.us-italic { font-family:'Georgia', serif; font-style:italic }
이것은 영문 이탤릭체 클래스이고

.us-bold { font-family:Arial, sans-serif; font-weight:bold }
영문 볼드체(굵게 나오는 글씨)

.k-italic { font-style:italic; font-family:'Malgun Gothic'; }
이것은 한글 클리어타입 폰트인 '맑은 고딕'의 이탤릭체를 미리 정의해 놓은 것입니다.

꼭 이렇게 할 필요는 없고, 자신의 취향에 맞게 지정하면 됩니다.




글꼴 크기에 대해


본문용 글꼴 크기는 10pt 가 보통입니다. 9pt 이하는 고해상도 모니터에서는 잘 보이지 않습니다.

좀더 큰 본문용은 12pt 이고, 제목은 24pt 정도로 했을 때 보기 좋게 출력됩니다.
MS워드 등의 워드프로세서에서 다양한 폰트 크기와 스타일 등을 미리 테스트해 보는 것이 좋습니다.



▶▶ HTML-CSS] 글자 색깔 지정하기, 글자색 변경 - Color 컬러 지정

☞ HTML/CSS/자바스크립트(JavaScript)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top