시맨틱 웹(Semantic Web)은 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스 리가 1998년 제안했고 현재W3C에 의해 표준화 작업이 진행중이다.

목차

  [숨기기

[편집]시맨틱 웹과 현재 웹의 차이

기존의 HTML로 작성된 문서는 컴퓨터가 의미정보를 해석할 수 있는 메타데이터보다는 사람의 눈으로 보기에 용이한 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 가득 차 있다. 예를 들어 <em>바나나</em>는 <em>노란색</em>이다. 라는 예에서 볼 수 있듯 <em>이라는 태그는 단지 바나나와 노란색이라는 단어를 강조하기 위해 사용된다. 이 HTML을 받아서 처리하는 기계(컴퓨터)는 바나나라는 개념과 노란색이라는 개념이 어떤 관계를 가지는지 해석할 수 없다. 단지 <em> 태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조를 할 뿐이다. 게다가 바나나가 노란색이라는 것을 서술하는 예의 문장은 자연어로 작성되었으며 기계는 단순한 문자열로 해석하여 화면에 표시한다.

시맨틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다. 가장 단순한 형태인 RDF는 <Subject, Predicate, Object>의 트리플 형태로 개념을 표현한다. 위의 예를 트리플로 표현하면 <urn:바나나, urn:색, urn:노랑>과 같이 표현할 수 있다. 이렇게 표현된 트리플을 컴퓨터가 해석하여 urn:바나나 라는 개념은 urn:노랑 이라는 urn:색을 가지고 있다는 개념을 해석하고 처리할 수 있게 된다. 보다 구체적인 예로 네이버가 NHN 소유임을 나타내는 트리플은 <http://naver.com, urn:wikipedia-ko:소유,http://nhncorp.com> 과 같이 된다. 시맨틱 웹은 이러한 트리플 구조에 기반하여 그래프 형태로 의미정보인 온톨로지를 표현한다.

[편집]시맨틱 웹의 개념

웹 기술은 정보표현과 전달에 간편한 방법을 제공하여 인터넷이 실생활까지 확산되는 기폭제 역할을 하였다. 그러나, 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보 접근만을 허용하고 있어, 정보 검색시 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중시키고 있다. 또한, 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 있다. 이러한 문제들의 근본원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다. 이러한 웹 기술은 팀 버너스리가 초창기에 구상하였던 웹과도 거리가 있다.

2001년 팀 버너스리등에 의해 웹 기술의 비젼으로 시맨틱웹이 제시되었다. 시맨틱웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic inteoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 간의 효과적인 협력체계를 구축하기 위한 것이다. 즉, 시맨틱웹은 컴퓨터가 웹 정보자원의 의미를 이해하고, 정보의 검색, 추출, 해석, 가공등 제반 처리를 사용자를 대신하여 지능형 에이전트(intelligent agent)가 수행하는 컴퓨터 중심의 기술이다.

일반적인 시맨틱웹의 개념과 3가지 주요 요소
● 온톨로지(ontology)
온톨로지는 도메인의 공유된 개념화(conceptualization)에 대한 형식적 명세체제로서, 도메인 어휘의 의미 정보를 표현한다. 온톨로지는 일종의 지식 표현(knowledge representation)으로, 컴퓨터는 온톨로지로 표현된 개념을 이해하고 지식처리를 할 수 있다. 추론, 증명등의 처리에 온톨로지의 공리(axiom)와 규칙(rule)이 사용되며, 규칙 표현을 위해서 별도의 규칙 언어가 사용된다.
● 의미적으로 주석화된 웹(semantically annotated Web)
온톨로지로 주석화된 웹 정보 자원은 일종의 지식베이스를 형성한다. 시맨틱웹에서는 온톨로지의 의미적 상호 운용성을 기반으로 인터넷의 분산 정보 자원을 의미적으로 통합한 거대한 지식 베이스를 구축할 수 있다.
● 에이전트(agent)
인간(사용자)를 대신하여 정보 자원을 수집, 검색하고 추론하여, 온톨로지를 이용해서 다른 에이전트와 상호 정보 교환등의 일을 수행하는 지능형 에이전트이다. 지능형 에이전트는 시맨틱웹 기반 응용 서비스의 핵심 요소라 할 수 있다.

[편집]시맨틱 웹 언어

시맨틱 웹에서 Subject, Predicate, Object는 XML의 URI 형태로 표현되며, 이는 웹 환경에 산재한 자원에 대한 온톨로지를 기술하는 데 목적이 있다. 현재 시맨틱 웹 온톨로지를 기술하는 표준 언어로 W3C에서 제안한 RDF, OWL 그리고 ISO에서 제안한 TopicMaps 등이 있으나 국지적으로는 N3, N-Triple 또는 인공지능 분야에서 예전부터 쓰이던 KIF 형태로도 온톨로지가 작성된다.

[편집]시맨틱 웹 기술과 표준

시맨틱 웹은 다음과 같은 기술들로 구성되어 있다.

● Explicit Metadata
메타데이터와 추론에 필요한 규칙 등을 XML(eXtensible Markup Language), RDF(Resource Description framework)와 같은 언어 기술을 통해 표현한다.
● Ontologies
온톨로지(ontology)라는 지식 표현 기술을 이용하여 데이터의 의미와 관계 정보를 체계적으로 표현한다.
● Logical reasoning
추론은 온톨로지와 함께 결합된 관계 정보들로부터 새로운 정보를 도출해 내는 것을 가능하게 한다.

W3C는 시맨틱 웹 액티비티 그룹 산하의 워킹그룹을 통하여 다음과 같은 관련 표준을 개발하였다.

● RDF (Resource Description Framework)
● GRDDL (Gleaning Resource Descriptions from Dialects of Languages)
● RDFa in XHTML
● SPARQL Query Language for RDF:
● OWL (Ontology Web Language)
시맨틱 웹 기술 계층 구조[1]

시맨틱 웹의 기술 계층 구조는 다음과 같다.

● URI (Uniform Resource Identifier)
웹 상의 자원을 식별하기 위한 객체의 명칭, 위치 등의 표현이다.
● IRI (International Resource Identifier with UNICODE)
● XML (eXtensible Markup Language)
메타 정보 표현 언어인 XML, XML 상에서의 동일한 요소나 속성을 구분하기 위해 쓰이는 이름인 Namespace, XML 문서의 마크업 방식에 대한 정의인 XML Schema 등과 같은 다양한 표준을 의미한다.
● RDF (Resource Description Framework)
RDF는 정보 자원이나 자원의 구조를 표현하는 언어이다.
● RDFS
RDF의 Schema 정보로 경량의 온톨로지를 표현한다.
● SPARQL
RDF 질의를 위한 언어이다.
● RIF (Rule Interchange Format)
규칙의 정의와 교환을 위한 계층이다.
● OWL
특정 도메인에 대한 공유되는 일반적인 이해와 개념, 개념과의 관계를 표현하기 위한 언어이다.
● Logic
기존에 정의된 정보들을 바탕으로 새로운 결론을 도출하는 추론 기능 등을 의미한다.
● Proof / Trust
웹의 정보에 대한 신뢰를 말한다.

[편집]시맨틱 웹의 이상(理想)

지금과 같이 사람만이 웹에 산재한 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 의미정보 교환의 수단 이 되는 것이 시맨틱 웹의 목적이다. 시맨틱 웹의 이상향은, 인터넷에 방대한 양의 온톨로지가 산재하고, 이를 자동으로 해석하여 처리할 수 있는 에이전트 소프트웨어에 사람 또는 에이전트가 질의를 하면, 컴퓨터가 자동으로 분산된 온톨로지를 탐색하고 추론하여 원하는 결과를 돌려주는 것이다.

[편집]시맨틱 웹에 대한 오해

  1. 현재 통용되는 웹 2.0이라는 용어는 오라일리 미디어(O'Reilly Media)에 의해 만들어졌으며 XML, AJAX, 시맨틱 웹과 같은 특정 기술을 지칭하는 말이 아닌, 현재 인터넷 업계의 신기술이 지향하는 경향을 일컫는 말이다. 1998년에 팀 버너스 리가 시맨틱 웹을 제안했을 때 "차세대 웹"이라는 표현을 사용하여 많은 사람들이 웹 2.0과 혼동한다.
  2. 시맨틱 웹을 통한 인터넷에 존재하는 모든 지식을 공유한다는 말과 같은 표현은 시맨틱 웹을 지나치게 확대 해석하는 전형적인 예이다. A 온톨로지와 B 온톨로지에 같은 개념에 대해서 서로 상충하는 관계를 가지는 경우는 얼마든지 일어날 수 있다. 시맨틱 웹의 온톨로지는 해당 분야(Domain)에 대해서만 유효하면 된다. 예를 들어 관공서 온톨로지에 개의 사체는 음식물 폐기물로 분류되어 쓰레기 봉투에 넣어야 하는 폐기대상이 될 수 있지만 동물병원 온톨로지에는 동물전용 화장터로 보내서 화장을 해야 하는 대상으로 분류될 수 있다. 따라서 해당 분야에 적합한 온톨로지를 선별하여 활용해야 한다.
  3. “시맨틱 기술은 오직 웹만을 위한 것이다.”라는 생각이다. 이것이 시맨틱 기술에 관한 가장 일반적이고 보편적인 오류일 것이다. 하지만 실제는 그렇지 않다. 시맨틱 기술은 내부 시스템들에서도 활용할 수 있다. 시맨틱 기술은 웹에서의 응용뿐만 아니라 내부 정보의 활용과 웹 기반이 아닌 외부 정보의 활용까지도 가능하다. 즉 시맨틱 기술은 대규모 데이터 통합을 해결하기 위하여 사용될 수 있다.
  4. “시맨틱 기술은 우리가 지금 사용하는 것으로부터 분리될 것이다.”라는 생각이다. 하지만 실제로 시맨틱 웹은 처음부터 새롭고 분리된 웹의 창조를 의도하지 않고 있다. 오히려 우리가 쉽게 볼 수 없는 것들을 찾아서 볼 수 있는 구조를 제공함으로써 오늘날 우리가 사용하는 문서들의 질적 향상을 꾀하는 것이 목적이라고 할 수 있다.
  5. “시맨틱 웹 기술은 실제적으로 구조화된 데이터 접근만을 위한 것이다.”라는 생각이다. 많은 논문들이 현재 데이터베이스에 숨겨진 정보들을 온라인 접속을 통하여 어떻게 접근할 것인가에 초점을 맞추고 있다. 하지만 그것은 반쪽의 진실에 불과하다. 시맨틱 기술은 오히려 통합을 훨씬 더 단순하게 만들 수 있으며 구조화되지 않은 데이터를 위해서도 활용될 수 있다.
  6. “시맨틱 웹은 공유하기를 원하지 않는 정보까지도 모든 사람이 사용할 수 있도록 만들 것이다.”라는 생각이다. 실제로 기업들은 때때로 웹 기술들이 통제의 결함을 지니고 있다는 문제에 직면하게 된다. 하지만 기업들이 웹에서 진정한 이득을 얻으려고 한다면 몇몇 데이터만 통제하면 된다. 불필요한 정보의 통제보다는 통제된 환경을 제한시키는 것이 더 필요할 것이다.
  7. “시맨틱 웹이 새로운 존재를 만들어내기 위해 많은 투자를 요구하게 될 것이다.”라는 생각이다. 하지만 실제로 다른 사람들의 작업을 활용한다면 반드시 그런 것만은 아니다. 예를 들어, musicontology.com 혹은 DBpedia와 같은 것들을 필요에 맞추어서 더 구체적으로 변형하여 활용한다면 좋은 결과를 얻어낼 수 있을 것이다.
  8. “시맨틱 웹 기술은 모두가 이론일 뿐이지, 아무도 실제로 시맨틱 웹을 가지고 무엇을 하고 있지 않다.”는 생각이다. 하지만 그렇지 않다. 이미 야후나 구글에서도 많은 시맨틱 웹 관련 검색 도구들이 개발되어서 사용되고 있으며, 이런 것들이 시맨틱 기술을 위해 새롭고 중요한 전환점이 될 것이다.
    시맨틱 웹 기술은 단지 검색 엔진만을 위한 것은 아니다. 시맨틱 웹 기술은 암 치료의 증진에도 기여할 수 있고, 석유가스 산업에도 응용될 수 있으며, 많은 일반 기업들에서도 활용될 수 있다

이런 오해들을 짚어보면 의미 있는 시맨틱 기술이 회사들과 여러 기관들의 데이터를 관리하고 통합하는 방법”을 보여주고 있다는 사실을 알 수 있다.

그리고 결론적으로, 시맨틱 웹은 HTML로 대표되는 현존 웹을 대체하는 것이 목적이 아니라는 것이다. 기존 웹과 함께 의미정보를 포함하는 메타 데이터를 기술하는 시맨틱 웹이 공존하며 정보에 대한 자동화된 접근성을 높이려는 데 목적이 있다.

[편집]시맨틱 웹의 응용

대중적으로 가장 널리 알려진 시맨틱 웹의 활용 예는 RSS이다. RSS(RDF Site Summary) 첫 버전인 0.9와 1.0은 바로 RDF로 작성되어 있다. 이후 버전에서는 RDF를 사용하지 않으며 이름도 Really Simple Syndication 또는 Rich Site Summary로 혼재되어 사용되고 있다. 현재 시맨틱 웹에 대한 시도는 의미적 메타데이터 체계를 구축하고 이를 활용하고자 하는 다양한 분야에서 활발하게 진행되고 있다.

● 커뮤니티, 블로그
● 데이터 통합
● 포탈 및 검색
● 시맨틱 웹 서비스
● 기업 소프트웨어
● 지식 관리
● 비즈니스 인텔리전스
● 가상 커뮤니티에 대한 연결
● 멀티미디어 데이터 관리
● 콘텐트 어댑테이션 및 명명

[편집]시맨틱 웹의 전망

시맨틱웹은 이제 더 이상 연구를 위한 기술이 아니라, 상용화 단계로 발전하고 있다. eClassOWL, BioPAX와 같은 다양한 온톨로지, AllegroGraph, TopBraid와 같은 상용도구가 개발되었고, 노키아 S60 포털, Haper 온라인 매거진, Yahoo!Food등 수많은 사이트들에서 시맨틱웹 기술이 활용되고 있다. 이미 인터넷 상에는 107 시맨틱웹 문서가 존재하는 것으로 알려지고 있다. Garlik, Radar Networks, Joost, Ontology Works 등 수많은 시맨틱웹 기업이 활발한 제품 개발과 비즈니스 활동을 전개하고 있다.

분산된 정보자원을 의미적 상호 운용성으로 통합하여 거대한 지식 베이스를 구축한 시맨틱웹은, 웹서비스에도 의미적 상호운용성을 실현하여, 궁극적으로 시맨틱 웹 서비스(Semantic Web Service)로 진화하여 갈 것이다. 온톨로지 언어 OWL 개발과 동시에 서비스 온톨로지인 OWL-S가 개발되었고, W3C의 SWSI나 유럽의 WSMO/L/X 연구등에서 알 수 있는 바와 같이, 시맨틱웹은 지식을 넘어서 지식 서비스로 나아가고 있다.

시맨틱 웹의 방향

현재는 서로 독립적이며 자발적으로 발전되어 온 웹2.0과 시맨틱웹은 자신의 영역을 더욱 확대하기 위하여 상존하고 있지만, 궁극적으로는 자연스럽게 통합되어 차세대 웹 기술로 나타날 것이다. 이미, Microformat, RDFa, GRDDL, RSS등에서 상호 협력이 진행되고 있고, 인간중심의 RIA 인터페이스와 컴퓨터 중심의 시맨틱 비즈니스 프로세스를 기반으로 하는 새로운 엔터프라이즈 시스템의 개발이 가속화되고 있다. 웹2.0과 시맨틱웹은 경계가 분명한 경쟁기술이 아니라, 그림2처럼 차세대 웹 기술 발전 추세에서 보는 바와 같이 차세대 웹을 향한 진행 과정의 기술로 가까운 시일 내에 서로를 포옹하게[모호한 표현] 될 것이다.

웹 기술의 발전 방향

[편집]같이 보기

[편집]참고 문헌 및 외부 링크

  1. Tim Berners-Lee, James Hendler, Ora Lassila The Semantic Web, Scientific American, May 2001
  2. Nigel Shadbolt, Wendy Hall, Tim Berners-Lee, The Semantic Web Revisited, IEEE Intelligent Systems, 2007
  3. Semantic Web Best Practices and Deployment Working Group
  4. James Hendler, Ora Lassila, SemWeb@5: Current Status and Future Promise of the Semantic Web, Semantic Technology Conference, March, 2006
  5. Anupriya Ankolekar et al, The TwoCultures: Mashing up Web 2.0 and the Semantic Web, WWW2007, May, 2007
  6. Tim Berners-Lee, Wendy Hall, James Hendler, Nigel Shadbolt, Daniel J. Weitzner, Creating a Science of the Web, Science, August, 2006
  7. Tim Berners-Lee et al, A Framework for Web Science, Foudations and Trends in Web Science, Vol.1, No.1, 2006
  8. 전양승 외, 시맨틱 웹 서비스 기술 연구 동향, 정보과학회지, 2006년 4월
  9. 전종홍 외, 시맨틱웹, TTA Journal, No 107, 2006년, 10월
  10. Loraine Lawson, Loraine Lawson, http://www.itbusinessedge.com/cm/blogs/lawson/myths-about-semantic-technology-part-i/?cs=33168, 2009
  11. knol - 시맨틱웹

[편집]주석

  1.  W3C, 2007





'Web > Common' 카테고리의 다른 글

gimp - 이미지 합성하기  (0) 2012.06.27
자바스크립트에서 BR태그 vs \n vs 엔터문자 / & nbsp vs 공백문자  (0) 2012.05.13
Freemarker 정의 및 설정  (0) 2012.05.12
Adobe Flash  (0) 2012.05.11
색상표  (0) 2012.05.11
Posted by linuxism
,

CSS - 정리

Development/CSS 2012. 5. 13. 03:04


[CSS] [ direction ] 문단에 대한 서식 방향을 설정 합니다.
[CSS] [ margin ] object의 여백을 설정 합니다. top, right, bottom, left 순서로 여백이 적용 되며 모든 …
[CSS] [ padding-bottom ] 스타일이 적용된 곳의 하단 경계선으로 부터 안쪽의 내용의 하단 사이에 공간을 … 
[CSS] [ ruby-align ] 문장에 보이는 주석 형식의 RT를 사용 할때 RT안에 정렬 위치를 설정 합니다.
[CSS] [ border-top-color ] 테두리 상단(top)에 색상을 넣습니다.
[CSS] [ text-indent ] 문단의 첫 줄이 들여쓰기 됩니다. (값은 들여쓰기 되는 길이)
[CSS] [ margin-left ] object 또는 문단 경계로 부터 왼쪽 여백을 설정 합니다.
[CSS] [ padding-right ] 스타일이 적용된 곳의 오른쪽 경계선으로 부터 안쪽의 내용의 오른쪽 사이에 공간…
[CSS] [ background ] 배경에 대한 세부 설정을 한번에 작업 할 수 있습니다.
[CSS] [ background-color ] 문서나 object에 배경색을 적용 합니다.
[CSS] [ layout-grid-mode ] char과 line에 대하여 적용될 객체를 설정 합니다.
[CSS] [ layout-grid-type ] 텍스트 layout에 대하여 grid될 타입을 설정 합니다.
[CSS] [ margin-right ] object 또는 문단 경계로 부터 오른쪽 여백을 설정 합니다.
[CSS] [ padding-top ] 스타일이 적용된 곳의 상단 경계선으로 부터 안쪽의 내용의 상단 사이에 공간을 적…
[CSS] [ border-left-width ] 테두리(left)의 넓이를 적용 합니다.
[CSS] [ background-Image ] object에 배경 이미지를 설정 합니다.
[CSS] [ layout-grid ] layout-grid의 세부 속성들을 한번에 설정 할 수 있으며, 텍스트에 layout을 설정 …
[CSS] [ padding-left ] 스타일이 적용된 곳의 왼쪽 경계선으로 부터 안쪽의 내용의 왼쪽 사이에 공간을 적…
[CSS] [ letter-spacing ] 객체의 텍스트간 간격을 설정 합니다. (보통 글자수에 해당하는 "em" 사용)
[CSS] [ ruby-position ] 문장에 보이는 주석 형식의 RT를 사용 할때 위치를 설정 합니다.
[CSS] [ font ] font에 관한 모든 속성을 한번에 설정 할 수 있습니다. 또한 시스템 관련 글꼴을 적용 할 …
[CSS] [ list-style ] 목록 스타일에 관한 모든 설정을 한번에 할 수 있습니다.
[CSS] [ background-position ] 배경 이미지를 사용 했을때 배경 이미지의 시작점이나 위치를 설정 합니다.
[CSS] [ layout-grid-char ] layout에 대하여 넓이를 설정 합니다.
[CSS] [ list-style-type ] 목록 머리표에 기호, 숫자, 로마숫자, 알파벳을 사용 합니다.
[CSS] [ word-spacing ] 단어간의 간격을 설정 합니다.
[CSS] [ border-top-style ] 테두리 상단(top)에 스타일을 지정 합니다.
[CSS] [ list-style-position ] 목록 내에서 줄바꿈 될경우, 다음 줄의 시작점을 설정 합니다.
[CSS] [ padding ] 스타일이 적용된 안쪽으로 공간을 만듭니다. 안쪽의 다른 객체의 가장 자리로 부터 경계…
[CSS] [ ime-mode ] 입력 할 수 있는 곳에 대해서 IME를 설정 합니다. (IME 우리는 대부분 대한민국 이겠죠…
[CSS] [ vertical-align ] 수직 정렬을 설정 합니다.
[CSS] [ list-style-image ] 목록 머리표에 이미지를 사용 합니다.
[CSS] [ white-space ] 공백을 그대로 처리하거나 줄바꿈에 대한 설정을 합니다. (PRE, NOBR)
[CSS] [ border-right-width ] 테두리(right)의 넓이를 적용 합니다. 
[CSS] [ border-bottom-color ] 테두리 하단(bottom)에 색상을 넣습니다.
[CSS] [ text-overflow ] overflow를 적용한 상태에서 text-overflow를 사용 (텍스트 자체에 위치를 지정 …
[CSS] [ margin-bottom ] object 또는 문단 경계로 부터 아래쪽 여백을 설정 합니다.
[CSS] [ border-left ] 테두리에 관한 설정들을 left 부분에 적용 합니다.
[CSS] [ border-left-style ] 테두리 왼쪽(left)에 스타일을 지정 합니다.  
[CSS] [ border-collapse ] 표(TABLE)에 셀을 주거나 주지 않습니다.
[CSS] [ border-right-style ] 테두리 오른쪽(right)에 스타일을 지정 합니다.
[CSS] [ border-left ] 테두리에 관한 설정들을 left 부분에 적용 합니다.
[CSS] [ border-left-color ] 테두리 왼쪽(left)에 색상을 넣습니다. 
[CSS] [ font-family ] 글꼴체를 설정 합니다. 여러개 사용 가능 하며 구분자(,)를 사용 하며 우선 순위를 …
[CSS] [ border-right-color ] 테두리 오른쪽(right)에 색상을 넣습니다.
[CSS] [ font-variant ] 폰트에 대해서 작은 대문자로 적용 됩니다.
[CSS] [ text-align ] 객체 안에 텍스트의 정렬 상태를 설정 합니다.
[CSS] [ border-bottom-width ] 테두리(bottom)의 넓이를 적용 합니다.
[CSS] [ border-top-width ] 테두리(top)의 넓이를 적용 합니다.
[CSS] [ border-bottom-style ] 테두리 하단(bottom)에 스타일을 지정 합니다.
[CSS] [ font-size ] 글꼴에 크기를 설정 합니다.
[CSS] [ border-bottom ] 테두리에 관한 설정들을 bottom 부분에 적용 합니다.
[CSS] [ color ] 스타일이 적용된 객체내 텍스트에 색상을 설정 합니다.
[CSS] [ text-decoration ] 텍스트에 밑줄, 윗줄, 가운데 줄, 깜박이 효과등 장식을 합니다.(BLINK 넷츠케…
[CSS] [ background-repeat ] 배경 이미지의 반복 여부와 방향에 따른 배열을 적용 합니다.
[CSS] [ border-style ] 테두리의 스타일을 지정 합니다.
[CSS] [ border-width ] 테두리(top, right, bottom, left)의 넓이를 적용 합니다.
[CSS] [ text-transform ] 객체 내의 영문자에 대하여 소문자, 대문자, 또는 단어의 첫글자만 대문자로 설…
[CSS] [ layout-grid-line ] layout에 대하여 높이를 설정 합니다.
[CSS] [ writing-mode ] 텍스트의 방향을 설정 합니다.
[CSS] [ border-color ] 테두리에 색상을 넣습니다.
[CSS] [ font-weight ] 폰트에 대해서 굵기를 적용 합니다.
[CSS] [ background-attachment ] 배경 이미지를 문서나 object에 사용 했을때 내용이 길어서 스크롤될때 …
[CSS] [ display ] 스타일을 적용한 객체에 인라인 또는 블럭단위의 박스를 생성 합니다.
[CSS] [ border ] 객체 주위에 테두리를 만듭니다.
[CSS] [ border-right ] 테두리에 관한 설정들을 right 부분에 적용 합니다.
[CSS] [ font-style ] 폰트에 대해서 기울임 효과를 적용 합니다.
[CSS] [ border-top ] 테두리에 관한 설정들을 top 부분에 적용 합니다.
[CSS] [ bottom ] Position의 값에 따라서 브라우저나 상위 문단을 기준으로 바닥으로 부터의 위쪽 거리(문…
[CSS] [ left ] Position의 값에 따라서 브라우저나 상위 문단을 기준으로 왼쪽 에서의 거리(문서내 기준)
[CSS] [ word-wrap ] 정해진 영역을 내용이 초과시 줄바꿈의 상태를 설정 합니다.
[CSS] [ right ] Position의 값에 따라서 브라우저나 상위 문단을 기준으로 오른쪽에서의 거리(문서내 기준…
[CSS] [ overflow ] width 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어 합니다.
[CSS] [ line-height ] 텍스를 사용 하는데 있어서 줄사이(행간) 간격을 설정 합니다.
[CSS] [ top ] Position의 값에 따라서 브라우저 또는 상위 문단과 top이 쓰인 객체와의 거리(문서내 기준)
[CSS] [ height ] 문단이나 이미지의 높이를 설정 합니다.
[CSS] [ width ] 문단이나 이미지의 너비를 설정 합니다.   
[CSS] [ clip ] object의 일부만 보이게 하고 나머지는 잘라내어 보이지 않습니다.
[CSS] [ z-index ] Netscape의 <LAYER>와 같은 개념이며, 위치에 따라 중첩된 결과를 보일 수 있고 po…
[CSS] 사용자의 윈도우색상 사용하기
[CSS] [ position ] 객체의 위치를 화면에 설정 합니다.
[CSS] [ scrollbar-3dlight-color ] 스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색…
[CSS] [ overflow-y ] height 속성 의해서 내용에 따라 화면의 높이를 제어 합니다.(세로 Y축 기준: 가로 …
[CSS] [ :active ] <A> 태그의 링크 상태에 대한 스타일을 적용 합니다. (링크를 클릭 하는 순간)
[CSS] [ scrollbar-base-color ] 스크롤바의 arrow, shadow, darkshadow를 제외한 기본적인 곳에 적용 됩니… 
[CSS] [ visibility ] 객체를 보이지 않게 할때 사용 합니다.
[CSS] [ :hover ] 링크걸린 곳에 마우스를 올리는 순간
[CSS] CSS3 Previews
[CSS] [ scrollbar-track-color ] 스크롤바의 트랙에 적용 합니다.
[CSS] [ :visited ] <A> 태그의 링크 상태에 대한 스타일을 적용 합니다. (이미 방문한 곳의 링크)
[CSS] [ scrollbar-highlight-color ] 스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리의 …
[CSS] [ table-layout ] 테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능…
[CSS] [ :first-line ] 문단 시작 첫 줄에 스타일을 적용 합니다.
[CSS] [ clear ] float과는 반대 개념의 속성이며 좌측이나, 우측, 또는 양쪽 모두에 다른 문단이 오지 않…
[CSS] [ scrollbar-darkshadow-color ] 스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽 가장 자리…
[CSS] [ scrollbar-shadow-color ] 스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽의 그림자 부분…
[CSS] [ scrollbar-face-color ] 스크롤바의 스클롤 박스와 화살표 박스 그리고 트랙의 표면에만 적용 됩니…
[CSS] [ scrollbar-arrow-color ] 스크롤바의 화살표 박스의 화살표에 색상을 적용 합니다.
[CSS] [ page-break-before ] [page-break-after] 인쇄할 페이지 분할
[CSS] [ min-height ] table-layout에 fixed 되어 있어도 높이만큼 자르지 않고 높이를 설정 할 수 있습니…
[CSS] [ float ] 보통 이미지에 사용 하는데 이미지 태그 정렬에 관한 속성중 left와 right와 같은 비슷한 …
[CSS] [ :link ] <A> 태그의 링크 상태에 대한 스타일을 적용 합니다. (가본적이 없는 곳의 링크)
[CSS] 웹표준에 관한 타입 선언
[CSS] 양식과 관련있는 태그 <BUTTON> <FIELDSET> <FORM> <INPUT> <LABLE> &…
[CSS] [ :first-letter ] 문단 시작 첫 머리글에 스타일을 적용 합니다.   
[CSS] [ overflow-x ] width 속성 의해서 내용에 따라 화면의 너비를 제어 합니다.(가로 X축 기준: 세로 스…
[CSS] [ cursor ] 마우스 포인터의 모양을 설정 합니다.
[CSS] [Filter] - 문자나 이미지를 대상으로 색상을 반전시키고 또는 뒤집고,투명하게하고,흐리게
[CSS] [ zoom ] 객체의 크기를 확대/축소 합니다. (줌 효과)
[CSS] 속성 전체 리스트   

 

원본:  http://www.dumbung.com/main/bbs/board.php?bo_table=HTML_LIBRARY



'Development > CSS' 카테고리의 다른 글

CSS - 선택자  (0) 2012.05.23
CSS - 버튼  (0) 2012.05.14
CSS - em 단위  (0) 2012.05.13
CSS - 글자 레이아웃 속성  (0) 2012.05.12
CSS - background-repeat  (0) 2012.05.10
Posted by linuxism
,

CSS - em 단위

Development/CSS 2012. 5. 13. 00:01


CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. (pt, px, em, ex, %) 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만, 현재 표준은 단위를 항상 명시해주는 것입니다. (0 제외)

ex. DIV.test { padding:5px 0 5px 10px; font:normal 9pt 돋움; }


대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em 이라는 단위를 사용하자는 움직임도 있는 것 같습니다.

pt, px 가 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘레멘트에 대한 상대적인 크기를 나타냅니다.
em, ex 단위의 장점이라면 웹 브라우저 메뉴에서 글꼴 크기를 변화시켜 줄 수 있고, 그에 따라 레이아웃을 유동적으로 적용할 수 있기 때문에 접근성이 향상됩니다. 즉 작은 글자를 보기 어려운 분들도 글자 확대를 하여 쉽게 볼 수 있다는 점이죠. (IE6을 사용하신다면 콘트롤 키를 누르고 마우스 휠을 돌려보세요)
IE 기준으로 글꼴 크기를 "보통"으로 지정했을 경우(웹브라우저 디폴트) 최상엘리멘트 1em은 12pt, 16px 와 같습니다. 기준인 셈이죠. 보통 많이 사용하는 굴림체 9pt 의 경우는 12px 이므로 em 으로 환산하면 0.75em 이 됩니다. 참고할 만한 단위표는 다음을 참고!

PointsPixelsEmsPercent
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

단점이라면... 개발이 좀 어렵습니다. ㅡㅡ;; 디자인 등에서 사용하는 픽셀 단위를 환산하여 상대적인 크기를 계속 계산해나가야 하기 때문입니다.
또한 IE7이나 파이어폭스의 최신 웹브라우저는 글자 크기를 확대하는 개념과는 다른 "줌브라우징" 기능을 가지고 있습니다. 화면 자체를 확대하기 때문에 절대크기, 상대크기의 의미가 없어져서 em을 써서 접근성을 높이자는 목소리의 설득력이 조금씩 없어지고 있는 듯. 하지만 당분간은 IE6이 득세할 것 같으니 당장의 문제는 아니죠.

그나마 그 단점 중 한가지 정도는 보완해 줄 수 있는 웹 유틸리티를 링크합니다.

이른바 Em Calcurator. 사용 방법은 간단해요. 몇단계 하위 노드로 들어가든 기존의 px 단위를 완벽하게 em 단위로 계산해줍니다. 하던 작업(세션) 저장도 됩니다. -ㅂ-
예전에 픽셀 기준으로 작업 하던 것을 잘 활용하면 완벽하게 em단위로 제작해서 한층 높은 접근성을 확보할 수 있습니다. (물론 em단위로 완벽하게 활용하기 위해서는 디자인의 유연성도 필요하기 때문에 디자이너도 고심해야할 필요가 있습니다.)

Em Calcurator
 


출처 - http://kaludin.egloos.com/967864



'Development > CSS' 카테고리의 다른 글

CSS - 버튼  (0) 2012.05.14
CSS - 정리  (0) 2012.05.13
CSS - 글자 레이아웃 속성  (0) 2012.05.12
CSS - background-repeat  (0) 2012.05.10
CSS 개요  (0) 2012.04.30
Posted by linuxism
,