타이포그래피 프로퍼티

웹접근성과 웹표준 2013. 8. 10. 09:00

타이포그래피 프로퍼티

1. font-family

- 사용할 글씨체 목록을 콤마로 구분하여 선언

- 사용자의 브라우저가 목록 앞의 글꼴이 존재하지 않으면 그 다음 글꼴을 확인하여 적용

- body 요소에 적용 시 그 안의 모든 요소에 상속되어 적용

- 빈칸이 포함된 글꼴은 따옴표로 묶어 사용

body

{ font-family : "맑은 고딕", 굴림, sans-serif ; }

2. 일반적인 font family의 특징

1) Serif

- 문자의 세로획의 끝부분에 장식

- 인쇄에 적합

- Times New Roman체, Georgia체

2) Sans-serif

- 장식적인 요소를 제거

- 웹에 적합

- Helvetica체, Arial체

3) Monospace

- 구두점을 포함한 모든 문자의 폭이 동일

- Courier체, Monaco체

4) Cursive

- 손글씨를 따라 만든 장식성이 뛰어난 글꼴

- Brush Script MT체, Apple Chancery체

5) Fantasy

- 장식적인 요소가 매우 강한 글꼴

- Impact체, Copperplate체가

3. font-size

- 텍스트를 브라우저 기본 크기가 아닌 특정 크기로 화면에 표시

- hn 태그들의 크기는 일반 텍스트 크기에 상대적

- 브라우저에서 조절 가능하므로 추천 크기 정도로 인식

단위	특징
상대적 크기 지정	em, 퍼센트, xx-small, x-small, small, medium, large, x-large, xx-large, ex
절대적 크기 지정	px, mm, cm, inch, point, pica

body { font-size :13px;}

4. line-height

- 텍스트의 기준선과 앞 줄의 기준선 사이 높이

- 단위가 없으면 텍스트 크기의 배수로 지정

5. font 관련 프로퍼티

1) font-weight

- 텍스트의 두께를 조절

- 값으로 bold, bolder, lighter, 100~900 사용 가능

2) font-style

- 텍스트의 스타일을 지정

- 값으로 italic, oblique, normal 사용 가능

6. text 관련 프로퍼티

1) text-decoration

- 텍스트에 밑줄을 긋거나 편집 마크업에 사용

- blink, line-through, , e t oug , none, overline, underline

2) text-align

- 박스 안에서 텍스트의 정렬을 지정

- center, justify, left, right

3) text-indent

- 첫 줄을 얼마나 들여 쓸 지 결정

- px와 백분율 사용

7. font-face

- 클라이언트 브라우저에 없는 폰트도 웹에서 지원 가능

- IE에서 비표준 태그를 이용하여 Font지원을 해 옴 (ex.싸이월드)

- 2가지 폰트를 동시에 선언하여 사용 (IE 브라우저 : eot 포맷만 지원)

@font-face

{

font-family: myFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot');

}

- font-face를 쉽게 사용하기 위해 구글 웹폰트 사이트 활용

http://www.google.com/webfonts/earlyaccess

font-face를 통해 폰트를 불러오기 쉽게 구글에서 제공해주는 페이지.

해당 태그만 넣으면 사이트 제작시 해당 폰트 사용 가능.

예제1) 폰트 페이스 테스트

(위는 기본 폰트, 아래는 네이버 나눔고딕 폰트를 적용한 예)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HEAD>

<TITLE> New Document </TITLE>

@font-face { font-family:"myfont";src:url("font/nanum.ttf");}

p{font-family:myfont;}

</style>

</HEAD>

<BODY>

폰트페이스 테스트용 파일

<p>폰트페이스 테스트용 파일</p>

</BODY>

</HTML>

예제2) 타이포그래피 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>typography</title>

ul, ol, li, div, body, html, h1, h2, h3, h4, h5, h6, p, span {

padding: 0;

margin: 0;

}

body, h1, h2, h3, h4, h5, h6 {

font-size: 13px;

color: #444;

}

body {

font-family: "Lucida Sans Unicode", Dotum, Helvetica, Arial, Verdana, sans-serif;

text-align: center;

}

#wrap {

width: 600px;

margin: 0px auto;

text-align: left;

}

#header {

margin-bottom: 30px;

}

#header a{

margin-left: 10px;

}

#footer {

margin-top: 30px;text-align:center;color:#ccc;

}

#nav {text-align:right;}

#nav a{color:#ccc;}

#nav a:hover{text-decoration:none;color:orange;}

@font-face{font-family:"daumr";src:url("Daum_Regular.ttf");}

@font-face{font-family:"daums";src:url("Daum_SemiBold.ttf");}

@font-face{font-family:"yanone";src:url("Yanone.woff");}

h1 {font-family:yanone;color:orange;text-align:center;}

h2 {font-family:dauml;}

h3 {font-family:daumrr;}

p{font-weight:1.5em;margin:10px 0;}

</style>

</head>

<body>

<a href="#" title="회사 소개로">ABOUT US</a>

<a href="#" title="제품 소개로">PRODUCT</a>

<a href="#" title="솔루션으로" >SOLUTION</a>

</div>

<p>웹 관련 기술지원 : HTML, CSS, JAVASCRIPT, 서버사이트 스크립트 외</p>

<p>삼성, 현대, 대우, 한국기술협회, 정보화진흥원</p>

</div>

서울시 강남구 삼성동 영미빌딩(02)000-0000 팩스(02)000-1111<br/>

</address>

</div>

</body>

</html>

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

APMSETUP7: 내 컴퓨터를 웹서버로 만들기 (0)	2013.08.11
모바일 뷰포트(viewport) (0)	2013.08.11
float와 position: static, relative, absolute, z-index 비교 (0)	2013.07.27
문서 레이아웃: float, position: static, relative, absolute, z-index (0)	2013.07.25
다양한 선택자: CSS 리셋,Display:inline-block, :before, :after 등 (0)	2013.07.24