CSS는 HTML의 구조를 시각적으로 아름다움을 더해줌으로써 접근성 뿐만 아니라 사용자로 하여금 매력적인 웹을 만드는데 중요한 역할을 하는 문서이다.
HTML에 Style을 적용시키기위해 사용하는 CSS는 글자, 여백, 레이아웃 등 시각적으로 보여지는 모든 부분을 처리하기 위한 언어이다. W3C에서 공인한 표준으로써 운영체제나 프로그램에 관계없이 누구나 같은 형식으로 볼 수 있다는 장점이 있다.
CSS의 장점
- 기능확장성 : 단순한 HTML요소들의 기능에 다양한 기능을 추가할 수 있다.
- 양식의 모듈화 : HTML문서와 CSS문서를 따로 관리함으로써 유지보수가 간단하고 코드가 간결해진다.
- 기능성 : 효과적인 레이아웃에 의한 풍부한 디자인 설계가 가능
- 일관성 : 사용환경에 영향을 받지 않는다.
- 웹접근성 향상
CSS의 단점
웹브라우저마다 다른 방식으로 지원.(특히 Internet Explorer가 가장 표준을 잘 지키지 않았으나 지금은 표준을 지키려고 노력하고 있음)
그렇다면 어떻게 CSS를 HTML에 적용시킬까?
스타일 적용에는 4가지 방법이 있다.
1. Inline Style
해당 태그 속에 직접 스타일을 지정해주는 것인데 잘 안쓴다. 그러나 다른 스타일 적용방식보다 우선순위가 높기 때문에 적절히 잘 사용하면 좋다.
2. Embedded Style sheet
HTML문서 내에 <head>안에 <style>태그 안에서 스타일을 지정해준다.
3. Linked style sheet
<head>안에 <link>을 사용하여 외부 CSS파일과 연결
예) <link rel="stylesheet" type="text/css" href="CSS문서">
4. Imported style sheet
style sheet 안에서 다른 style sheet들을 가져오는 기법
실제 HTML에서는 하나의 style sheet만 <link>로 가져온다.
예) @import "CSS문서"; 또는 @import url("CSS문서");
선택자(Selector)
CSS에서 가장 중요한 개념이다. 잘 알아야 스타일을 적절히 원하는데로 지정할 수 있다.
선택자란 HTML의 태그를 선택하는 것을 말한다. 구조적인 문서의 태그를 적절히 선택하여 스타일을 지정해야하기 때문이다.
선택자의 종류에 대해 알아보자.
* : 모든 태그지정
A : 태그 A 지정
.A : 클래스 A태그 지정
#A : 아이디 A태그 지정
복합 선택자
A B : 태그 A로 감싸져 있는 태그 B지정
A>B : 태그 A로 감싸져 있는 태그 B중 한 단계 아래의 태그 지정(부모의 자식 지정)
A+B : 연속된 태그 A와 B를 지정
그외 선택자
E[attr] : attr속성을 지니는 태그 E를 지정
E[attr="attrVal"] : attr속성값이 attrVal인 태그 E를 지정
E[attr~="attrVal"] : attr속성값이 attrVal이고 뒤에 (공백 + 값)으로 지정된 E태그를 지정
E[attr^="attrVal"] : attr속성값이 attrVal로 시작하는 E태그를 지정
E[attr$="attrVal"] : attr속성값이 attrVal로 끝나는 E태그를 지정
E[attr*="attrVal"] " attr속성값이 attVal과 같은 내용이 있는 E태그를 지정
가상 클래스 선택자
A:first-child : A태그 중 첫 번재 자손태그 지정
A:lang(B) : A태그 중 언어가 B인 태그 지정
A:link : A태그 중 link가 걸려있는 태그 지정
A:visited : A태그 중 link가 걸려있고 이미 클릭한 태그 지정
A:active : A태그 중 마우스로 클리한 태그 지정
A:hover : A태그 중 마우스를 올려놓은 태그 지정
A:focus : A태그 중 키보드 입력을 받는 태그 지정
동적선택자
A:first-line : A태그의 문단 중 첫 번째 줄 지정
A:first-letter : A태그의 문단 중 첫 번째 글자 지정
A:before : A태그의 문단 앞을 지정
A:after : A태그의 문단 뒤를 지정
2013년 2월 14일 목요일
[WEB] XHTML 1.0과 HTML5
HTML 4.01에 XML의 문법을 적용시켜 만들어진 것이 XHTML이다.
현재까지 많은 웹이 XHTML 1.0으로 제작되었다.
HTML 4.01버전과 거의 비슷하나 HTML 4.01의 문법을 철저히 지키는 것이 특징이다.
XHTML의 목적은 OS나 Browser에 관계없이 모든 환경에서 호환되는 웹표준을 만들기 위함이다.
XHTML과 HTML의 차이점
1. XHTML은 반드시 Tag속에 Tag를 포함할 때 중첩을 금지한다.
2. XHTML은 반드시 XHTML문법을 지켜야한다.(HTML에서는 어느정도의 문법적 생략은 가능하였다.)
3. XHTML 요소는 반드시 소문자!
4. XHTML 요소는 반드시 End Tag로 닫아야 한다!
사실 많은 부분이 HTML과 동일하다. 문법을 잘 지키기만 한다면 HTML과 크게 다른 부분은 없다.
HTML5
XHTML 2.0이 실패로 돌아가고 이에따라 WHATWG(Web Hypertext Application Technology Working Group)에서 HTML5에 대한 표준초안을 내세운다.
목적은 과거 HTML과 호환성을 유지하면서 ActiveX, Flash, Silverlight 등과 같은 플러그인 기반 인터넷 어플리케이션을 줄이는 것이다.
현재 정식권고안만을 앞두고 있는 실정이며 곧 많은 개발자들을 필요로하게 될 듯하다.
HTML5의 특징
- HTML 4보다 확장된 문서구조를 지원와 태그를 지원하여 시멘틱 웹을 좀 더 발전시켰다.
- 편리한 웹폼 기능(특히 스마트폰에 유용한 기술 포함)
- 웹어플리케이션을 사용하는데 별다른 설치가 필요 없으며 웹어플리케이션 제작에 용이하다.
현재까지 많은 웹이 XHTML 1.0으로 제작되었다.
HTML 4.01버전과 거의 비슷하나 HTML 4.01의 문법을 철저히 지키는 것이 특징이다.
XHTML의 목적은 OS나 Browser에 관계없이 모든 환경에서 호환되는 웹표준을 만들기 위함이다.
XHTML과 HTML의 차이점
1. XHTML은 반드시 Tag속에 Tag를 포함할 때 중첩을 금지한다.
2. XHTML은 반드시 XHTML문법을 지켜야한다.(HTML에서는 어느정도의 문법적 생략은 가능하였다.)
3. XHTML 요소는 반드시 소문자!
4. XHTML 요소는 반드시 End Tag로 닫아야 한다!
사실 많은 부분이 HTML과 동일하다. 문법을 잘 지키기만 한다면 HTML과 크게 다른 부분은 없다.
HTML5
XHTML 2.0이 실패로 돌아가고 이에따라 WHATWG(Web Hypertext Application Technology Working Group)에서 HTML5에 대한 표준초안을 내세운다.
목적은 과거 HTML과 호환성을 유지하면서 ActiveX, Flash, Silverlight 등과 같은 플러그인 기반 인터넷 어플리케이션을 줄이는 것이다.
현재 정식권고안만을 앞두고 있는 실정이며 곧 많은 개발자들을 필요로하게 될 듯하다.
HTML5의 특징
- HTML 4보다 확장된 문서구조를 지원와 태그를 지원하여 시멘틱 웹을 좀 더 발전시켰다.
- 편리한 웹폼 기능(특히 스마트폰에 유용한 기술 포함)
- 웹어플리케이션을 사용하는데 별다른 설치가 필요 없으며 웹어플리케이션 제작에 용이하다.
[WEB] HTML두 번째
첫 번째 시간 내용을 다시한번 복습하고 진행하겠다.
많은 플랫폼과 디바이스에서 동일한 결과물을 보여주기 위해서 표준화가 필요하다. 표준화로 인해 개발시간과 비용이 줄어드는 장점이 있다.
웹표준을 잘 지키면 웹 접근성이 좋아진다. 웹 접근성이 좋아진다는 의미는 누구나 쉽게 웹을 이용할 수 있다는 것이다. 사회문화적인 환경을 고려해 볼 때 접근성을 높이기 위한 노력을 게을리하지 않아야하겠다.
HTML은 그 자체적으로 표면적이고 구조적인 문서일 뿐이다. 따라서 어떠한 의미를 지니고 있지는 않는다. 그렇기 때문에 시멘틱 웹, 즉 의미론적 웹이 등장하였다. 시멘틱 웹에서는 데이터가 의미를 지니고 있으므로 사용자 뿐만 아니라 컴퓨터가 그 의미를 인식할 수가 있다. 그러므로 원하는 데이터를 단순한 내용이 아니라 그 의미까지 알 수 있도록 확장시킨 웹이다.
이어서 HTML에 대해 더 알아보자.
링크요소
<a>
- 페이지내 링크(책갈피)
예)<a href="#section">소개</a> ... <a name="section">내용</a>
- URL연결
<a href="http://www.google.com">구글</a>
- 새창으로 열기
<a href="http://www.google.com" target="_blank">구글</a>
<link>
head부분에서 선언되며 여러번 선언될 수 있다.
오브젝트, 이미지요소
<img src="경로"/>
폼요소
사용자로부터 정보를 입력받아 처리하고자 하는 특정한 동작이나 요청, 데이터 값을 웹서버에 송신을 함
<form action="처리할 프로그램의 URL" method="get|post|put|delete" enctype="multipart/form-data(폼의 컨텐트 타입을 지정)">
get : 서버에 ?name/value값이 붙어서 전송.
post : URL에 포함되지 않음(비밀번호)
<input type="text|passward|checkbox|radio|reset|file|hidden|image|button" name="이름" value="값지정" size="너비" maxlenth="최대길이" 등등등 속성은 알아서 찾아보길>
iFrame
특정 HTML을 불러온다.
예)
<iframe src="Form_exam.html" frameborder="1" scrolling="auto" width="500" height="500" title="폼내용"></iframe>
HTML 4.0에 대해서는 이정도에서 마무리한다. 아직 언급하지 않은 많은 요소(elements)들이 있지만 꼭 알아야하기보다는 HTML을 만들 때 인터넷에서 참고하는 것으로 구조를 만들 수 있다. 그보다 중요한 것은 HTML의 특징이 무엇이며 어떠한 구조를 지니고 있는지 파악하는 것이 중요하다.
많은 플랫폼과 디바이스에서 동일한 결과물을 보여주기 위해서 표준화가 필요하다. 표준화로 인해 개발시간과 비용이 줄어드는 장점이 있다.
웹표준을 잘 지키면 웹 접근성이 좋아진다. 웹 접근성이 좋아진다는 의미는 누구나 쉽게 웹을 이용할 수 있다는 것이다. 사회문화적인 환경을 고려해 볼 때 접근성을 높이기 위한 노력을 게을리하지 않아야하겠다.
HTML은 그 자체적으로 표면적이고 구조적인 문서일 뿐이다. 따라서 어떠한 의미를 지니고 있지는 않는다. 그렇기 때문에 시멘틱 웹, 즉 의미론적 웹이 등장하였다. 시멘틱 웹에서는 데이터가 의미를 지니고 있으므로 사용자 뿐만 아니라 컴퓨터가 그 의미를 인식할 수가 있다. 그러므로 원하는 데이터를 단순한 내용이 아니라 그 의미까지 알 수 있도록 확장시킨 웹이다.
앞서서 시멘틱 웹을 표현하기 위한 2가지 방법을 언급하였다.
첫 번째는 <meta>작성이며 웹의 정보를 나타낸다.
두 번째는 <h1>,,,<h6>작성이다. HTML문서를 좀 더 구조적으로 만들어주기 때문에 시멘틱 웹을 잘 표현할 수 있다.
이어서 HTML에 대해 더 알아보자.
링크요소
<a>
- 페이지내 링크(책갈피)
예)<a href="#section">소개</a> ... <a name="section">내용</a>
- URL연결
<a href="http://www.google.com">구글</a>
- 새창으로 열기
<a href="http://www.google.com" target="_blank">구글</a>
<link>
head부분에서 선언되며 여러번 선언될 수 있다.
오브젝트, 이미지요소
<img src="경로"/>
폼요소
사용자로부터 정보를 입력받아 처리하고자 하는 특정한 동작이나 요청, 데이터 값을 웹서버에 송신을 함
<form action="처리할 프로그램의 URL" method="get|post|put|delete" enctype="multipart/form-data(폼의 컨텐트 타입을 지정)">
get : 서버에 ?name/value값이 붙어서 전송.
post : URL에 포함되지 않음(비밀번호)
<input type="text|passward|checkbox|radio|reset|file|hidden|image|button" name="이름" value="값지정" size="너비" maxlenth="최대길이" 등등등 속성은 알아서 찾아보길>
iFrame
특정 HTML을 불러온다.
예)
<iframe src="Form_exam.html" frameborder="1" scrolling="auto" width="500" height="500" title="폼내용"></iframe>
HTML 4.0에 대해서는 이정도에서 마무리한다. 아직 언급하지 않은 많은 요소(elements)들이 있지만 꼭 알아야하기보다는 HTML을 만들 때 인터넷에서 참고하는 것으로 구조를 만들 수 있다. 그보다 중요한 것은 HTML의 특징이 무엇이며 어떠한 구조를 지니고 있는지 파악하는 것이 중요하다.
2013년 2월 13일 수요일
[WEB] HTML 첫 번째
마크업 언어란?
문서에 포함된 문장이나 그림, 표, 소리 등과 같은 문서 내용에 대한 정보가 아니라 그 문장과 그림, 표는 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며, 들여쓰기와 줄 간격, 여백 등에 대한 정보를 의미한다.
HTML과 xHTML은 별개의 분리된 표준.
HTML5는 2014년에 W3C에서 Recommandation 예정이다.
HTML은 문서의 기본적인 구조만을 정의하고 실제로 사용자에게 보이는 형태는 웹 브라우저에 의해 동적으로 결정된다. 모든 웹 브라우저에 의해 모든 태그가 지원되지 않기 때문에 표준을 따르는 것이 중요해진다.(지원하지 않은 태그는 무시되어 화면에서 배제된다.)
WEB의 구동원리를 보면 클라이언트에서 인터넷을 접속하기 위한 URL을 입력하여 접속을 요청한다. 서버는 해당 결과를 클라이언트에 응답하면 웹 브라우저에 의해 HTML문서가 웹 브라우저에 적절하게 나타나게 된다.
태그란?
HTML문서의 구조와 의미를 브라우저에게 전달하는 문법이다.
태그의 형식은 일반적으로 <태그>내용</태그>의 형태이다.
HTML의 기본구조
크게 3부분으로 나누어진다.
1. 문서타입정의(DTD)
2. 문서머리글(HEAD)
3. 문서몸체(BODY)
문서타입정의부에서는 일반적으로 해당 HTML문서의 버전 및 형식을 지정
<HEAD>는 문서 자체에 대한 설명을 넣는 부분이다. <title><meta><style><script><link>등과 같은 태그가 존재한다. 여기서 meta라는 태그는 문서에 대한 일반 정보를 나타낼 때 사용한다.
예)
<meta http-equiv="Expires" content="Wed, 13 Jul 2013 21:00:00 GMT">
<meta name="Description" content="홈페이지의 정의">
<BODY>는 문서의 내용이 들어가는 부분이다. id속성과 class속성을 부여할 수 있다, id속성은 요소마다 유일한 하나의 이름을 부여할 수 있으며 하나의 문서에 동일한 이름의 id가 중복되지 않아야한다. class는 요소에 하나 이상의 class이름을 부여함으로써 해당하는 요소를 그룹으로 의미를 나눠줄 때 사용된다. 물론 하나의 문서에 동일한 이름의 class가 존재해도 무관하다.
블럭레벨과 인라인레벨
블럭레벨은 해당하는 요소의 라인 범위를 포함할 수 있다. 따라서 인라인요소와 다른 블럭라인을 포함한다.
인라인레벨은 요소 하나만을 포함한다.
블럭레벨과 인라인레벨 요소 둘다 화면을 구성하는데 필요한 요소이다.
블럭레벨의 종류 : <h1>...<h6>,<div>,(<ul><li>) 등
인라인레벨의 종류 : <span>,<a> 등
<p> : 문단을 나눌 때 사용함. 자신을 포함하여 블럭레벨 요소를 포함할 수 없다.
<br> : 줄바꿈
목록 요소
<ul> : 번호없는 목록
<ol> : 번호있는 목록
<dl> : 정의 목록
목록에서는 항상 <li>를 사용
<dt>와<dd> : 제목과 한줄 들여쓰기
예)
<h1>순서목록</h1>
<ul>
<li><a href = "http://www.naver.com">네이버</a></li>
<li><a href = "http://www.daum.net" target = "_blank" title = "다음으로 이동">다음</a></li>
</ul>
<h1>정의목록</h1>
<dl>
<dt>웹표준</dt>
<dd>웹표준은 W3C권고안에 따라 만든 문서
</dd>
</dl>
테이블 요소
- 테이블의 목적을 기술하는 제목<caption>과 요약<summary>정보를 제공할 수 있다.(필수는 아니지만 웹 접근성을 위하고 사용자 배려를 위해 잘 사용할 것)
- 테이블의 행그룹요소 : 머리글<THEAD>, 바닥글<TFOOT>, 본체<TBODY>
- 테이블의 셀은 머리글<TH>정보나 데이터<TD>를 가질 수 있다.
문서에 포함된 문장이나 그림, 표, 소리 등과 같은 문서 내용에 대한 정보가 아니라 그 문장과 그림, 표는 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며, 들여쓰기와 줄 간격, 여백 등에 대한 정보를 의미한다.
HTML과 xHTML은 별개의 분리된 표준.
HTML5는 2014년에 W3C에서 Recommandation 예정이다.
HTML은 문서의 기본적인 구조만을 정의하고 실제로 사용자에게 보이는 형태는 웹 브라우저에 의해 동적으로 결정된다. 모든 웹 브라우저에 의해 모든 태그가 지원되지 않기 때문에 표준을 따르는 것이 중요해진다.(지원하지 않은 태그는 무시되어 화면에서 배제된다.)
WEB의 구동원리를 보면 클라이언트에서 인터넷을 접속하기 위한 URL을 입력하여 접속을 요청한다. 서버는 해당 결과를 클라이언트에 응답하면 웹 브라우저에 의해 HTML문서가 웹 브라우저에 적절하게 나타나게 된다.
태그란?
HTML문서의 구조와 의미를 브라우저에게 전달하는 문법이다.
태그의 형식은 일반적으로 <태그>내용</태그>의 형태이다.
크게 3부분으로 나누어진다.
1. 문서타입정의(DTD)
2. 문서머리글(HEAD)
3. 문서몸체(BODY)
문서타입정의부에서는 일반적으로 해당 HTML문서의 버전 및 형식을 지정
<HEAD>는 문서 자체에 대한 설명을 넣는 부분이다. <title><meta><style><script><link>등과 같은 태그가 존재한다. 여기서 meta라는 태그는 문서에 대한 일반 정보를 나타낼 때 사용한다.
예)
<meta http-equiv="Expires" content="Wed, 13 Jul 2013 21:00:00 GMT">
<meta name="Description" content="홈페이지의 정의">
<BODY>는 문서의 내용이 들어가는 부분이다. id속성과 class속성을 부여할 수 있다, id속성은 요소마다 유일한 하나의 이름을 부여할 수 있으며 하나의 문서에 동일한 이름의 id가 중복되지 않아야한다. class는 요소에 하나 이상의 class이름을 부여함으로써 해당하는 요소를 그룹으로 의미를 나눠줄 때 사용된다. 물론 하나의 문서에 동일한 이름의 class가 존재해도 무관하다.
블럭레벨과 인라인레벨
블럭레벨은 해당하는 요소의 라인 범위를 포함할 수 있다. 따라서 인라인요소와 다른 블럭라인을 포함한다.
인라인레벨은 요소 하나만을 포함한다.
블럭레벨과 인라인레벨 요소 둘다 화면을 구성하는데 필요한 요소이다.
블럭레벨의 종류 : <h1>...<h6>,<div>,(<ul><li>) 등
인라인레벨의 종류 : <span>,<a> 등
<p> : 문단을 나눌 때 사용함. 자신을 포함하여 블럭레벨 요소를 포함할 수 없다.
<br> : 줄바꿈
목록 요소
<ul> : 번호없는 목록
<ol> : 번호있는 목록
<dl> : 정의 목록
목록에서는 항상 <li>를 사용
<dt>와<dd> : 제목과 한줄 들여쓰기
예)
<h1>순서목록</h1>
<ul>
<li><a href = "http://www.naver.com">네이버</a></li>
<li><a href = "http://www.daum.net" target = "_blank" title = "다음으로 이동">다음</a></li>
</ul>
<h1>정의목록</h1>
<dl>
<dt>웹표준</dt>
<dd>웹표준은 W3C권고안에 따라 만든 문서
</dd>
</dl>
테이블 요소
- 테이블의 행그룹요소 : 머리글<THEAD>, 바닥글<TFOOT>, 본체<TBODY>
- 테이블의 셀은 머리글<TH>정보나 데이터<TD>를 가질 수 있다.
[WEB] 웹과 표준
많은 개발자들이 웹을 기반으로한 개발에 많이 투입되어 종사하고 있다. 업무에 중요하고 필요한 데이터를 관리하기 위한 데이터베이스, 프로그램을 동작시키기 위한 모듈 개발 뿐만 아니라 웹이나 화면에 보여지는 화면 구성 또한 개발자의 몫이다. 따라서 하나만 알고 그것만 잘하는 것이 아니라 개발에 있어서 모든 흐름을 이해하고 잘 할 수 있는 개발자가 되어야 한다. 또한 웹의 표준을 잘 지키는 것도 중요하다. 웹의 보편성은 누구나 인정하는 것이여서 표준을 지키지 않으면 다양한 플랫폼이나 디바이스에서 문제, 즉 크로스 브라우징에 있어서 문제가 발생할 여지가 있다.
인터넷이란 전세계의 네트워크와 네트워크들이 모여 하나의 거대한 네트워크를 형성하는 것을 말한다.
URI(Universal Resource Identifier) : 정보의 위치를 가리킴
-웹상의 각 자원들을 URI로 인코드될 수 있는 주소
-URI의 구성
1. 자원에 접근하는 방법이름(Protocol)
2. 자원을 가지고 있는 호스트이름
3. 경로로 주어진 자원의 이름
-상대URI
위치정보를 저장하지 않음
HTML에서의 URI의 사용
다른 문서나 자원에 연결(Link) : <a>, <link>
외부스타일쉬트(StyleSheet)나 스크립스(Script)에 연결 : <link>, <script>, <style>
이미지, 오브젝트, 애플릿을 문서에 포함 : <img>, <object>, <applet>
이미지맵을 설정 : <map>, <area>
입력을 위한 폼, 프레임 형성 : <form>, <frame>, <iframe>
웹 1.0 : 단순히 화면에 문서를 보여지기만 하던 단계, 하지만 HTML이라는 문서의 장점인 어느 플랫폼에서도 잘 보여진다는 점 때문에 지금까지 발전할 수 있었다.
웹 2.0 : 상호작용단계, 시멘틱 웹(의미있는 웹으로써 단순한 데이터가 아닌 의미단위로 웹을 접근)
웹 3.0 : 웹인지 소프트웨어인지 구별하기 어려운 단계. 즉, 웹이 하나의 어플리케이션의 느낌을 띄기 시작.
현재 웹은 플랫폼을 따지지 않는다.(크로스 플랫폼) 또한 스크립트의 발전으로 웹에 화려한 기술을 접목시켜 다양하고 화려한 화면을 만들어 보여줄 수 있다. 이것이 스크립트의 강력한 힘이고 왜 스크립트가 중요한지 설명할 수 있는 대목이다.
웹 플랫폼의 구성요소
클라이언트 기술 - 동적인 기능과 화려한 UI를 웹으로 구현(Ajax, Flex, XUL, Widget 등)
RIA기술의 등장
표준기술 - 웹표준 준수(HTML, CSS, DOM, ECMA script)
웹표준을 지킨다는 의미는 W3C(World Wid Web Consortium)의 권고안을 지키는 것을 말한다.
웹표준 스펙
1. (X)HTML : 웹페이지를 구성하고 표현하는 기본언어
2. CSS : 웹페이지의 호환성 유지 및 다양한 액세스 기술을 사용
3. XML : HTML이나 CSS로서 표현되지 못하는 영역을 DTD를 이용하여 정의. 읽기 쉽고 검증하기 용의하며 데이터로 관리하기 때문에 데이터를 전달하기 위해 유용.
4. DOM : 문서 구조와 스타일을 프로그램과 스크립트가 동적으로 접근하고 수정할 수 있는 플랫폼.
5. Javascript : HTML의 동작을 정의
웹표준의 개념 : 구조, 표현, 동작을 분리시켜 구성하는 것.
HTML(구조), CSS(표현), JAVASCRIPT(동작) 이렇게 철저하게 분리시키면 성능면에서나 개발면에서 유지보수가 용의하다.
인터넷이란 전세계의 네트워크와 네트워크들이 모여 하나의 거대한 네트워크를 형성하는 것을 말한다.
URI(Universal Resource Identifier) : 정보의 위치를 가리킴
-웹상의 각 자원들을 URI로 인코드될 수 있는 주소
-URI의 구성
1. 자원에 접근하는 방법이름(Protocol)
2. 자원을 가지고 있는 호스트이름
3. 경로로 주어진 자원의 이름
-상대URI
위치정보를 저장하지 않음
HTML에서의 URI의 사용
다른 문서나 자원에 연결(Link) : <a>, <link>
외부스타일쉬트(StyleSheet)나 스크립스(Script)에 연결 : <link>, <script>, <style>
이미지, 오브젝트, 애플릿을 문서에 포함 : <img>, <object>, <applet>
이미지맵을 설정 : <map>, <area>
입력을 위한 폼, 프레임 형성 : <form>, <frame>, <iframe>
웹 1.0 : 단순히 화면에 문서를 보여지기만 하던 단계, 하지만 HTML이라는 문서의 장점인 어느 플랫폼에서도 잘 보여진다는 점 때문에 지금까지 발전할 수 있었다.
웹 2.0 : 상호작용단계, 시멘틱 웹(의미있는 웹으로써 단순한 데이터가 아닌 의미단위로 웹을 접근)
웹 3.0 : 웹인지 소프트웨어인지 구별하기 어려운 단계. 즉, 웹이 하나의 어플리케이션의 느낌을 띄기 시작.
현재 웹은 플랫폼을 따지지 않는다.(크로스 플랫폼) 또한 스크립트의 발전으로 웹에 화려한 기술을 접목시켜 다양하고 화려한 화면을 만들어 보여줄 수 있다. 이것이 스크립트의 강력한 힘이고 왜 스크립트가 중요한지 설명할 수 있는 대목이다.
웹 플랫폼의 구성요소
클라이언트 기술 - 동적인 기능과 화려한 UI를 웹으로 구현(Ajax, Flex, XUL, Widget 등)
RIA기술의 등장
표준기술 - 웹표준 준수(HTML, CSS, DOM, ECMA script)
웹표준을 지킨다는 의미는 W3C(World Wid Web Consortium)의 권고안을 지키는 것을 말한다.
웹표준 스펙
1. (X)HTML : 웹페이지를 구성하고 표현하는 기본언어
2. CSS : 웹페이지의 호환성 유지 및 다양한 액세스 기술을 사용
3. XML : HTML이나 CSS로서 표현되지 못하는 영역을 DTD를 이용하여 정의. 읽기 쉽고 검증하기 용의하며 데이터로 관리하기 때문에 데이터를 전달하기 위해 유용.
4. DOM : 문서 구조와 스타일을 프로그램과 스크립트가 동적으로 접근하고 수정할 수 있는 플랫폼.
5. Javascript : HTML의 동작을 정의
웹표준의 개념 : 구조, 표현, 동작을 분리시켜 구성하는 것.
HTML(구조), CSS(표현), JAVASCRIPT(동작) 이렇게 철저하게 분리시키면 성능면에서나 개발면에서 유지보수가 용의하다.
2013년 2월 11일 월요일
[DB] 도서 대여점 관리 프로그램
간단한 요구사항 분석자료를 통해 ER 다이어그램을 그려보았다.
요구사항 분석
1. 도서에 대해서 도서번호, 도서명, 출판사, 지은이, 장르, 가격, 대여유무,
등록일을 저장한다. 도서번호에는 장르와 위치를 넣어서 도서를 찾기 쉽게한다.
2. 도서는 코믹스, 순정, 애정판, 소설, 월간지 장르로 구분한다. 장르마다 대여료와
대여기간, 연체금이 정해져 있다. 도서는 한 장르에만 속해 있다. 대여 중인
책은 대여 될 수 없다.
3. 회원에 대해서 회원번호, 이름, 전화번호, 주소, 대여 중인 책, 마일리지를 저장한다.
회원은 도서를 대여 할 수 있다. 회원은 여러 권의 책을 동시에 빌릴 수 있다.
회원은 도서를 대여할 때마다 대여금액의 10%를 마일리지로 적립받을 수 있고,
도서를 대여할 때 현금처럼 사용할 수 있다.
4. 사원에 대해서 사원번호, 이름, 주소, 전화번호, 비밀번호를 저장한다.
사원은 고객등록, 도서등록, 도서대여, 도서반납, 고객조회를 할 수있다.
사원중에 사원을 관리하는 관리자가 있어서 사원을 추가/삭제를 할 수 있고,
일별, 월별, 연별 매출액을 조회할 수 있다.
사원, 회원, 도서 세 개의 기본테이블을 중심으로 회원관리, 대여, 도서관리라는 행위테이블이 만들어져 있다. 요구사항을 최대한 반영하기 위해 생각해 본 ER 다이어그램이다.
사실 SQL문으로 성능을 향상시키는 것도 중요하나 그것보다도 더욱 중요한 것은 데이터베이스의 설계라 생각한다. 설계시 요구사항을 최대한 반영할 수 있음은 물론이거니와 테이블의 관계 및 정규화 작업까지 단순하게 생각할 것이 아니다.
요구사항 분석
1. 도서에 대해서 도서번호, 도서명, 출판사, 지은이, 장르, 가격, 대여유무,
등록일을 저장한다. 도서번호에는 장르와 위치를 넣어서 도서를 찾기 쉽게한다.
2. 도서는 코믹스, 순정, 애정판, 소설, 월간지 장르로 구분한다. 장르마다 대여료와
대여기간, 연체금이 정해져 있다. 도서는 한 장르에만 속해 있다. 대여 중인
책은 대여 될 수 없다.
3. 회원에 대해서 회원번호, 이름, 전화번호, 주소, 대여 중인 책, 마일리지를 저장한다.
회원은 도서를 대여 할 수 있다. 회원은 여러 권의 책을 동시에 빌릴 수 있다.
회원은 도서를 대여할 때마다 대여금액의 10%를 마일리지로 적립받을 수 있고,
도서를 대여할 때 현금처럼 사용할 수 있다.
4. 사원에 대해서 사원번호, 이름, 주소, 전화번호, 비밀번호를 저장한다.
사원은 고객등록, 도서등록, 도서대여, 도서반납, 고객조회를 할 수있다.
사원중에 사원을 관리하는 관리자가 있어서 사원을 추가/삭제를 할 수 있고,
일별, 월별, 연별 매출액을 조회할 수 있다.
사원, 회원, 도서 세 개의 기본테이블을 중심으로 회원관리, 대여, 도서관리라는 행위테이블이 만들어져 있다. 요구사항을 최대한 반영하기 위해 생각해 본 ER 다이어그램이다.
사실 SQL문으로 성능을 향상시키는 것도 중요하나 그것보다도 더욱 중요한 것은 데이터베이스의 설계라 생각한다. 설계시 요구사항을 최대한 반영할 수 있음은 물론이거니와 테이블의 관계 및 정규화 작업까지 단순하게 생각할 것이 아니다.
[DB] TOP-N SQL, INDEX, VIEW, SEQUENCE
* TOP-N SQL
select alias.*, rownum from
(select employee_id, last_name, hire_date from employees order by hire_date) alias
where rownum <= 5
select * from
(select temp.*, rownum r from
(select * from board order by seq) temp)
where r between 3 and 6
### INDEX ###
DB안에 데이터를 매번 full scan하여 찾는 것은 성능과 비용이 좋지 못하다.
따라서 너무 잦은 full scan을 줄이고 일정한 검색 속도를 보장하기 위해
인덱스를 사용한다.
인덱스를 만들면 각각의 인덱스에 따른 ROWID(주소값)가 부여되고 자동적으로
B-TREE구조로 데이터가 정렬된다.
인덱스의 사용순서
1. 인덱스를 생성하면서 ROWID를 부여(한번의 full scan)
2. B-TREE 구조 정렬
3. 검색
4. B-TREE에서 인덱스에 해당하는 ROWID반환
5. ROWID로 검색
일정한 속도가 보장된다.
그러나 insert 및 update의 요청으로 인한 인덱스 데이터가 누적되기
때문에 성능면에서 좋지 못하다.
### VIEW ###
실제 데이터값은 없으나 뷰를 통해서 원하는 데이터를 테이블처럼 다룰 수
있다.
사용이유 : 조인 횟수를 줄일 수 있고 원하는 데이터만 추려놓거나
보일 필요가 없는 데이터를 숨기기 위한 용도로 사용된다.
create view emp30 as
select e.employee_id, e.last_name, d.department_name from employees e
join departments d on e.department_id = d.department_id
where d.department_id = 30
### SEQUENECE ###
- 자동증가
create sequence 테이블명_컬럼명_seq
start with 1 //시작
increment by 2 //2씩 증가
maxvalue = 10000 //최대값
cycle //최대값을 찍고 처음으로 돌아감
create sequence emp07_empno_seq;
insert into emp07 values(emp07_empno_seq.nextval, 'kim', 'IT', 1234);
시퀀스는 한번 증가하면 되돌릴 수 없다.
글번호 카운팅
1. 시퀀스
2. 기존의 글 번호 + 1
피드 구독하기:
글 (Atom)