반응형
FONT / TEXT 스타일
FONT 속성
TEXT 속성
EX)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>CSS</title>
<style type="text/css">
*{font-family:"돋움",dotum,helvetica,sans-serif;}
body{color:#555; line-height:1.5;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,option{font-size:12px;}
h1,h2,h3,h4,h5,h6,strong,th{font-weight:normal;}/*bold | normal | bolder | lighter | 100 | 200 | ... | 900*/
address,em,dfn{font-style:normal;}/*italic | opaque | normal*/
a{text-decoration:none; color:#999;}/*none | underline | overline | line-through*/
a:hover, a:active, a:focus{text-decoration:underline; color:#000;}
/*address em{font-variant:small-caps;}*/
address em{text-transform:uppercase;}/*uppercase | lowercase | capitalize*/
#wrap{width:600px;}
/*.title{font:weight style variant size/line-height family,family,sans-serif}*/
.title{font:2em Dotum,Sans-serif; color:#000;}
.text p{text-indent:1em; text-align:justify;}/*left | center | right | justify*/
.text h2 img{vertical-align:middle;}
.nav{letter-spacing:-0.1em; word-spacing:0.3em; font-weight:bold; color:#ccc;}
.nav a{font-weight:normal; color:#000;}
</style>
</head>
<body>
<div id="wrap">
<h1 class="title">웹 접근성의 정의</h1>
<div class="text">
<h2><img src="images/icon.gif" alt="" /> 웹 접근성이란?</h2>
<p>
장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간 만들기
</p>
<p>
월드 와이드 웹 (World Wide Web)을 창시한 <a href="#">팀 버너스 리(Tim Berners-Lee)</a>는 웹이란<br />
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
</p>
<p>
하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.
</p>
<p>
월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.
</p>
</div><!--//text-->
<hr />
<p class="nav">
<a href="#">회사소개</a> |
<a href="#">광고</a> |
<a href="#">검색등록</a> |
<a href="#">제휴제안</a> |
<a href="#">이용약관</a> |
<a href="#">개인정보취급방침</a>
</p>
<address>
<p>서울시 강서구 공항로 188 한국정보화진흥원 3층 정보접근지원부 ☎ 02-3660-2573 이메일 : dezaki@nia.or.kr</p>
<p><em>Copyright©2009 National Information Society Agency</em></p>
</address>
</div><!--//wrap-->
</body>
</html>
FONT 속성
| Property | Value Ex | CSS |
|---|---|---|
| font | variant weight style size/line-height family | 1 |
| font-family | dotum,helvetica,sans-serif | 1 |
| font-size | 12px | 1 |
| font-style | italic | oblique| normal | 1 |
| font-variant | small-caps | normal | 1 |
| font-weight | bold | normal | bolder | lighter | 1 |
TEXT 속성
| Property | Value Ex | CSS |
|---|---|---|
| color | #ff0000 | 1 |
| direction | ltr | rtl | 2 |
| letter-spacing | - | 1 |
| line-height | - | 1 |
| text-align | left | center | right | justify | 1 |
| text-decoration | underline | overline | line-through | 1 |
| text-indent | - | 1 |
| text-shadow | - | 2 |
| text-transform | uppercase | lowercase | capitalize | 1 |
| unicode-bidi | - | 2 |
| vertical-align | top | middle | bottom | 1 |
| white-space | normal | nowrap | pre | pre-line | pre-wrap | 1 |
| word-spacing | - | 1 |
EX)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>CSS</title>
<style type="text/css">
*{font-family:"돋움",dotum,helvetica,sans-serif;}
body{color:#555; line-height:1.5;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,option{font-size:12px;}
h1,h2,h3,h4,h5,h6,strong,th{font-weight:normal;}/*bold | normal | bolder | lighter | 100 | 200 | ... | 900*/
address,em,dfn{font-style:normal;}/*italic | opaque | normal*/
a{text-decoration:none; color:#999;}/*none | underline | overline | line-through*/
a:hover, a:active, a:focus{text-decoration:underline; color:#000;}
/*address em{font-variant:small-caps;}*/
address em{text-transform:uppercase;}/*uppercase | lowercase | capitalize*/
#wrap{width:600px;}
/*.title{font:weight style variant size/line-height family,family,sans-serif}*/
.title{font:2em Dotum,Sans-serif; color:#000;}
.text p{text-indent:1em; text-align:justify;}/*left | center | right | justify*/
.text h2 img{vertical-align:middle;}
.nav{letter-spacing:-0.1em; word-spacing:0.3em; font-weight:bold; color:#ccc;}
.nav a{font-weight:normal; color:#000;}
</style>
</head>
<body>
<div id="wrap">
<h1 class="title">웹 접근성의 정의</h1>
<div class="text">
<h2><img src="images/icon.gif" alt="" /> 웹 접근성이란?</h2>
<p>
장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간 만들기
</p>
<p>
월드 와이드 웹 (World Wide Web)을 창시한 <a href="#">팀 버너스 리(Tim Berners-Lee)</a>는 웹이란<br />
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
</p>
<p>
하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.
</p>
<p>
월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.
</p>
</div><!--//text-->
<hr />
<p class="nav">
<a href="#">회사소개</a> |
<a href="#">광고</a> |
<a href="#">검색등록</a> |
<a href="#">제휴제안</a> |
<a href="#">이용약관</a> |
<a href="#">개인정보취급방침</a>
</p>
<address>
<p>서울시 강서구 공항로 188 한국정보화진흥원 3층 정보접근지원부 ☎ 02-3660-2573 이메일 : dezaki@nia.or.kr</p>
<p><em>Copyright©2009 National Information Society Agency</em></p>
</address>
</div><!--//wrap-->
</body>
</html>
반응형