mwultong Blog ... 프로그래밍 / 계산기

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

 
Wednesday, August 01, 2007

HTML 웹페이지 기본 텍스트 글꼴 지정 방법; Basic Font


HTML 웹문서에서, "기본 글꼴"을 지정하는 방법입니다. 다음과 같이 <style type="text/css">... 태그 안에서 body 태그의 스타일을 정의해 주면 간단합니다. body 태그는 본문 자체를 나타내는 태그이기에, body 태그에 폰트 스타일을 지정하면 기본 텍스트 글꼴을 지정/변경할 수 있습니다. font-size 로는 "기본 글꼴 크기"를 지정할 수 있습니다. 다음 예제와 같습니다.

예제 웹페이지 파일명: example.html
<html>
<head>
<title>여기에 페이지 제목 기입</title>
<style type="text/css">

body {
  font-family:'궁서체';
  font-size:10pt;
}

</style>
</head>


<body>

이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />

</body>
</html>


원래 인터넷 브라우저의 기본 글꼴은 "궁서체"가 아니라 "굴림"이나 "굴림체"인데, 여기서는 예를 들기 위해 궁서체로 지정했습니다. 다른 폰트명으로 변경하여 사용하시면 됩니다.




tag: html
HTML | CSS | 자바스크립트 JavaScript

3 Comments:
At April 20, 2010 at 1:04 AM, Blogger Sonkie said...

쇼핑몰 디자인을 하고 있는데 지정된 폰트가 마음에 안 들어서 상업적으로 사용할 수 있는 폰트를 다운받았는데 이걸 어디 저장하고 ....위에서 설명하신대로 지정하면 그 폰트를 사용할 수 있을까요? 알려주심 정말 감사하겠습니다.

 
At April 20, 2010 at 9:17 AM, Blogger mwultong said...

다운받으신 폰트 파일을 자신의 컴퓨터에서 개인적으로 사용하시려면, 윈도우 XP의 경우
C:\WINDOWS\Fonts
라는 폴더에 복사해 넣어시면 됩니다.

그러나 웹페이지 디자인에서는 그 다운받으신 폰트 파일을 사용하시기 힘듭니다, 왜냐하면 방문객의 컴퓨터에는 그 폰트 파일이 없을 가능성이 높고 그러면 폰트를 지정해도 방문객의 눈에는 그냥 보통의 기본폰트(굴림체 등등)로 보입니다.

다만 "웹폰트(Web Font)"라는 특수한 폰트 기술을 사용하시면, 자신이 좋아하는 특정 글꼴을 모든 방문객에게 보여드릴 수 있지만, 유료이고, 가독성이 많이 떨어지게 됩니다.

혹시 웹폰트(Web Font)에 관심이 있으시다면, 저는 추천하지 않습니다, 웹폰트는 첫눈에는 예쁘지만, 글자를 몹시 읽기 힘들게 만들기 때문입니다.

 
At April 21, 2010 at 2:18 AM, Blogger Sonkie said...

아하...그렇군요. 자세한 설명 정말 감사합니다.

 

<< Home RSS 2.0 feed

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