글
CSS 시작하기
HTML의 본연의 목적인 구조화된 문서로써 제 역할을 수행하기 위해 디자인적인 요소는 HTML과 완전히 분리시켜
‘구조화된 HTML을 만들어보자‘ 라는 것이 주된 목적이었다.
거기에 따라 HTML에서 디자인에 관련된 요소들은 전부 사용을 지양할 것을 권고하고 있다.
구조화된 HTML?
그럼 구조화된 HTML이란 무엇인가? 구조화된 HTML은 HTML태그 본연의 용도에 맞게 사용한다는 것으로
예를 들면 최상위 제목을 뜻하는 <h1> 태그는 문서의 제목 수준으로 쓰이며, 본문 내용은 <p> 태그로 사용한다.
이렇게 역할을 나뉘게 되면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다.
분담 역할
이렇게 역할을 분담하게 되면 디자인에 필요한 부분은 CSS가 전담하기 때문에
웹 디자이너와 웹 개발자간의 협업이 훨씬 용이해진다.
게다가 CSS는 별도의 파일 형태로 다른 문서에서도 동일한 CSS를 호출할 수 있기 때문에
트래픽을 줄이는 효과도 있다.
좀 더 Stylish한 것을 원하나요?
이러한 문제들 때문에 등장한 것이 바로 css (Cascading Style Sheets)입니다.
css는 세밀하게 디자인할 수 있는 명령어 집단이라고 생각하시면 됩니다.
css는 실제로 HTML보다 스타일 정보를 명시하는데 있어 훨씬 잘 들어맞는다.
약간의 css를 사용하는 것만으로도, HTML의 스타일에 꽤 큰 효과를 줄 수 있습니다.
또한 여러 페이지들의 스타일을 한 번에 처리하는데 있어서도 css가 훨씬 더 나은 방법이라는 것을 알게 될 것이다.
HTML 구조
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>브라우저 타이틀바 제목</title>
<style type=“text/css”>
/* 태그명으로 찾기 */
h1 {
text-align: center; /* 글자 가운데 정렬 */
color: red; /* 글자 빨간색 */
}
/* 아이디로 찾기 */
#p1 {
border-style: dotted; /* 테두리선 스타일을 도트로 설정 */
border-width: 5px; /* 테두리선 상하 좌우 5px로 설정 */
/* 상 / 우 / 하 / 좌 / 로 시계방향으로 설정 */
border-color: blue; /* 테두리선 색상을 블루로 설정 */
}
/* 클래스(분류)로 찾기 */
.desc {
background-color: yellow; /* 배경색상을 노랑색으로 설정 */
}
/* 동일한 태그와 해당 아이디로 찾기 */
p#intro {
color: rgb(0,255,0); /* 글자색을 RGB로 설정 */
font-family: 궁서; /* 글씨체 궁서체로 설정 */
}
</style>
</head>
<body>
<h1 id=“header1” class=“desc”>이것은 태그명과 클래스로 만들어놓은 style 적용됨.</h1>
<p id=“intro”>이 문장은 p태그와 id 값이 intro이 같아야 스타일 설정이 됩니다.</p>
</body>
</html>
<BONUS> 디자인하는데 필요한 색상 RGB!
R | G | B | |||||||||||||||||||||
0 | 0 | f | f | 0 | 0 | ||||||||||||||||||
0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
<- 1byte -> | <- 1byte -> | <- 1byte -> | |||||||||||||||||||||
0 | 255 | 0 | |||||||||||||||||||||
시맨틱 웹이이란?
들어가기 앞서 시맨틱 웹과 현재 웹의 차이를 알아보자.
- 현재 웹상은 컴퓨터가 해석할 수 없는 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 가득 차 있다.
- 예를 들어 <em>원숭이</em> 엉덩이는 <em>빨갛다.</em> 라는 예에 볼 수 있듯 <em> 태그는 단지 원숭이 엉덩이는 빨갛다. 라는 단어를 강조하기 위해 사용된다.
- 이 HTML을 받아서 처리하는 컴퓨터는 원숭이라는 개념과 빨갛다. 라는 개념이 어떤 관계를 가지는지 해석할 수 없다.
- 단지 <em> 태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조할 뿐이다.
- 게다가 원숭이 엉덩이는 빨갛다. 라는 것을 서술하는 예의 문장은 자연어로 작성되었으며 기계는 단순한 문자열로 해석하여 화면에 출력한다.
- 시멘틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다.
- 하지만 XML로 정의한 태그는 사람이 이해하기 어렵지 않으나 기계가 자동적으로 그 의미를 이해하기는 어렵다.
- 특히 태그 사이의 의미 연관성을 추론하기란 매우 어렵다.
- 임의로 만든 태그의 사용법은 알 수 있어도 어떤 의미를 담고 있는 태그인지 파악하기는 어려운 것이 XML의 단점인 것이다.
- 이런 문제를 해결하기 위해 제시된 기술이 있는데 그것이 바로 RDF (Resource Description Framework)이다.
- RDF는 특정 자원에 대한 메타데이터를 설명하는 XML기반의 프레임워크이다.
- RDF는 자원, 속성, 속성값을 묶어서 하나의 단위로 취급하는 기술로 정보를 구성하는 자원에 대한 좀 더 세밀한 설명과 관계파악을 쉽게 해준다.
- 현재 시맨틱 웹의 구조는 RDF와 같은 기술에 크게 의지하고 있다.
시맨틱 웹을 좀 더 알아보자.
- 시맨틱 웹이란 단어를 풀어보자면 ‘의미를 가지는 웹’, 또는 ‘의미론적인 접근’. 좀 더 풀어보자면 ‘뜻을 살린 웹’을 뜻한다.
- 이는 컴퓨터가 사람을 대신하여 정보를 읽고 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 하는 차세대 지능형 웹을 의미한다.
- 시맨틱 웹의 궁극적인 목적은 웹에 있는 정보를 컴퓨터가 좀 더 이해할 수 있도록 표준 및 기술을 개발하여 의미적 검색, 데이터 통합, 네비게이션, 업무의 자동화 등을 지원하는 것이다.
- a.k.a. aking -
'학습정리 > by aking' 카테고리의 다른 글
| 사이트정리 (0) | 2013.07.21 |
|---|---|
| 안드로이드 NFC (0) | 2013.07.19 |
| Java Script (0) | 2013.07.09 |
| (수정중) GIT Server 구축 및 Log4J 설정 (0) | 2013.06.24 |
RECENT COMMENT