웹 표준과 검색로봇(웹봇)의 관계



효율적인 웹 검색을 위한 웹페이지 최적화


검색 엔진이 웹 페이지에 무슨 내용이 들어있는지 기계의 입장에서 잘 이해할 수 있도록 태그를 정리하는 작업이다.


1. 사이트를 등록할 때에는 검색 엔진의 능력에 맞게 등록해야 한다.

  예) 네이버의 경우 : 호스트 단위의 url만 인식한다.

      http://xxx.com  (o)

      http://xxx.com/sub (x)


  참고) 이름에는 _를 사용할 수 없다. (알파벳, 숫자, - 만 사용가능)

  예) my-story.com (o)

     my_story.com (x)


2. 사이트 소유주임을 증명해야 한다.

  예) 사이트에 검색 엔진이 인식할 수 있는 특정 meta 태그를 삽입하고,

   검색 엔진이 그 태그를 읽어들임으로서 소유주임을 확인한다.


  주의1) 자바스크립트나 meta refresh 로 리다이렉션 하면 안됨

       <meta http-equiv="refresh" content="0.0001; URL=http:..." /> (x)

  주의2) frame 태그등의 내부에 넣어 놓아도 안됨


  단, 불가피하게 리다이렉션이 필요한 경우, http 리다이렉션을 이용해야 한다.

    이 설정은 웹 호스트 서버에서 할 수 있다.

    영구적 리다이렉션 : http 301 리다이렉션을 이용한다. (검색엔진이 가지고 있는 이전 색인 정보가 갱신됨) -> "호스팅업체의 웹포워딩서비스"

    임시로 리다이렉션 (리뉴얼 같은 때) : http 302 리다이렉션을 이용한다. (검색엔진이 가지고 있는 색인 정보를 유지함-기존 검색순위, 링크 손실이 최소화됨)


  참고) 네이버의 웹마스터도구 페이지는 IE 10 이상에서만 지원됨



3. 웹사이트에 robots.txt라는 파일을 만들어 루트 디렉토리에 두는 게 좋다.

  이 파일은 모든 검색로봇이 참조하기로 되어 있다.

  즉, 로봇들이 http://www.mysite.com/robots.txt를 참조한다.

  이 파일이 없으면, 로봇들은 웹사이트내 모든 문서를 수집대상으로 간주한다.


  예) robots.txt 의 내용

     User-agent: *

     Allow: /


  참고) User-agent: Yeti 라고 하면 네이버의 검색로봇만 접근할 수 있게 된다.

       Yeti는 네이버 검색로봇의 이름임

       위의 예는 모든 로봇들의 접근을 허용한 것임


  참고) 또 다른 예 (네이버)

     User-agent:Yeti

     Disallow:private*/

        --> 네이버 크롤러에게 /private-inage, private-video 등의 수집을 금함

  

       User-agent:*

       Disallow:/

        -->모든 웹로봇들에게 모든 페이지의 수집을 금함


  참고) robots.txt에 사이트맵이 있는 위치를 명시할 수도 있다.

    예) Sitemap:http://www.mysite.com/sitemap.xml


  참고) 개별 웹페이지 내에서 meta 태그가 검색 로봇을 막을 수도 있다.

    <meta name="robots" content="noindex"> // noindex는 해당 페이지에 대해 검색 로봇의 인덱싱을 불허한다는 의미임

단, 예외적으로 공공 정보와 같은 공공재 성격의 사이트는 강제 접근하기도 함


   개별 웹페이지 내에서 meta 태그가 링크 정보 수집을 막을 수도 있다.

    <meta name="robots" content="nofollow"> // nofollow는 해당 페이지에서 링크로 연결된 정보를 수집하지 말라는 의미임

뿐만 아니라, HTML 태그가 아닌 자바스크립트로 링크를 지정하면 로봇이 인식하지 못함

  예) <a href="http://...">xxx</a>  (o)

     <span onClick="javascript:goto(xxx);">xxx</span>  (x)


  <meta name="robots" content="index, nofollow"> // 색인 허용, 단 페이지내 링크는 수집 불허

  <meta name="robots" content="index, follow">  // 색인, 링크 수집 모두 허용


  참고) 웹사이트 메인 페이지가 frame 태그로 싸여있을 경우, 로봇에게 혼란을 주기도 하고 서로 다른 웹서버간의 저작권 분쟁등이 발생하는 등의 문제가 생길 수 있으므로 frame 사용을 자제해야 한다.


  참고) 검색 로봇은 HTML 마크업만 읽으므로 자바스크립트로 로딩되는 내용은 무의미하다.


  참고) 사이트를 이전할 때, 신규 사이트의 robots.txt에서 로봇 접근을 차단함으로써 불완전한 정보가 수집되는 것을 막는 것이 좋다.


4. XML 형식으로 작성한 사이트맵 파일을 만들어 제출해야 한다.

  그리고 웹사이트의 최신 글(제목과 본문 포함)을 역시 XML 형태로 기술한 RSS 피드 파일도 만들어 제출해야 한다.

   예) 만들어진 사이트맵과 RSS 피드 파일 제출 방법 (네이버)

      사이트맵 : 웹마스터도구 화면 > 요청 > 사이트맵 제출

      RSS 피드 : 웹마스터도구 화면 > 요청 > RSS 제출



5. 웹페이지 제목

<head></head> 사이의 <title>태그에 웹사이트 성격을 잘 표현하는 설명과 브랜드명을 기입할 것을 권장한다. 상호명, 서비스명, 제품명등의 고유명사가 들어 있는 것이 좋다. 단, 검색 노출만을 위해 제목을 자주 변경하면 제목이 과도하게 길어져 불이익을 받을 수 있다. 개별 페이지에도 <title>을 작성할 수 있다. 단, 반복적인 키워드, 스팸성 키워드, 내용과 무관한 키워드는 불이익을 받을 수 있다.


6. 웹페이지 설명

<head></head> 사이의 <meta>태그에 웹페이지 내용을 설명하는 문구를 들어있는 것이 좋다. 1~2 문장. 반복적, 스팸성, 의미없는 키워드는 피할 것.


7. 소셜 미디어


<head>

... 오픈 그래프 태그

<meta property="og:type" content="website">

<meta property="og:title" content="페이지 제목">

<meta property="og:description" content="페이지 설명">

<meta property="og:image" content="http://www.mysite.com/article/article1_featured_image.jpg">

<meta property="og:url" content="http://www.mysite.com/article/article1.html">

... 소셜 미디어 부가정보

<meta name="twitter:card" content="summary">

<meta name="twitter:title" content="페이지 제목">

<meta name="twitter:description" content="페이지 설명">

<meta name="twitter:image" content="http://www.mysite.com/article/article1.html">

<meta name="twitter:domain" content="사이트 명">

...

</head>


오픈 그래프 태그 : 웹사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보다.

소셜 미디어 부가정보 : 공유될 콘텐츠의 정보를 직접 결정함으로써 사용자의 페이지 방문을 높일 수 있다.



참고해야 할 각 포털 업체의 검색 정책들

1. 검색 노출을 늘이기 위해 같은 내용의 사이트를 여러 개 만들면 불이익이 있음

2. 웹페이지들의 제목을 똑같이 하지 말 것


3. 검색로봇 방문 이후 검색된 내용이 반영될때까지의 시간

  네이버 : 최대 1주일 소요


  참고) 검색 로봇이 웹사이트의 내용을 제대로 읽어갔는지 확인 (네이버)

    네이버 검색창에 사이트명 입력 조회

    또는, 웹문서 검색에 site:www.mysite.com 조회


4. 웹사이트의 제목과 설명이 포털 업체의 정책에 부합해야 한다.


5. 웹페이지를 모바일 친화적으로 반응형 웹페이지 형태로 제작할 것을 권장한다.

   '반응형 웹'이란 웹브라우저가 웹문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절할 수 있게 해주는 기법을 말한다. 데스크탑용과 모바일용으로 따로따로 페이지를 만들면 내용이 중복될 뿐 아니라 불이익을 당할 수도 있다.

예) <head>

   <meta name="viewport" content="width=device-width">

   </head>


6. 이미지는 로봇이 인식하지 못하므로 웹페이지를 텍스트로 만들어야 자료 수집이 가능하다. 이미지를 쓸 수 밖에 없을 경우에는 "alt" 속성에 짧은 설명을 추가해줘야 한다.(단, alt에 많은 텍스트가 들어가면 스팸으로 오인될 수도 있음)


7. 타 사이트의 좋은 내용을 가져다가 내용을 채울 경우, 로봇이 중복 정보로 오인할 수도 있고 가치가 낮은 사이트라고 판단할 수도 있다. 내용이 개성적일 경우 검색 상위에 노출될 가능성이 더 커진다.




본 블로그를 찾은 분들에게 오늘도 축복 있으시길...

HTML 책 보면서 정리하는 - 

◈ 뉴서울(NewSeoul) HTML 5 강좌 3◈

- 노트입니다. 오늘은 CSS3 기본편 입니다. ~~~



CSS3의 기본 개념

; Cascading Style Sheet

 
강좌 1에서 이미 스타일을 HTML 문서에 적용하는 방법을 설명했습니다. 여기서 다시 한 번 정리해 보겠습니다. 뭐... 기억을 다시 한 번 상기해 보시거나, 건너뛰셔도 좋습니다.


HTML 문서에 스타일을 적용하는 방법


1. 인라인 스타일

예)
<a href="..." style="background-color:gray; color:white">


2. 내장 스타일

style 엘리먼트를 이용해서 내장 스타일을 생성하고 적용할 엘리먼트를 CSS 선택자로 지정할 수 있다.

예) 문서의 모든 a 엘리먼트에 스타일이 적용된다.
<head>
<style type="text/css">
  a {
    background-color: gray;
    color: white
  }
</style>
</head>

 


3. 외부 스타일시트
동일한 스타일을 여러 HTML페이지에 적용해야 할 때 유용하다.
여러개의 스타일 시트를 불러올 수도 있고, 스타일이 중복될 경우, 나중의 스타일이 적용된다.

예)
-- mystyle.css 파일
a {
...
}

-- HTML 페이지 파일
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css"></link>
</head>

스타일시트에서 다른 스타일시트에 선언된 스타일을 불러올 수도 있다.
하나의 스타일시트에서 @import문은 1회만 사용할 수 있고 제일 상단에 와야 한다.
@import문에서 여러개의 스타일시트를 불러올 수 있다.
@import는 브라우저의 실행속도를 느려지게 하는 경향이 있다

예)
@import "anotherstyle.css";

CSS 스타일시트 안에서 유일하게 @import문 전에 올 수 것은 @charset 구문이다.
@charset은 스타일시트가 사용할 문자의 인코딩을 정의한다.
@charset을 정의하지 않을 경우, 디폴트 HTML 인코딩(UTF-8)이 사용된다.

예)
@charset "UTF-8";
@import "anotherstyle.css";
...


4. 브라우저 스타일
스타일이 정의되지 않았을 때, 디폴트로 적용되는 스타일이다.

예) 링크는 의례 파란색에, 밑줄이 그어져 표시됨을 상기해 보면 알 수 있다.
    아마도 아래와 같은 브라우저 스타일이 적용되고 있음을 짐작할 수 있다.
    a {
      color: blue;
      text-decoration: underline;
    }


※ 스타일이 적용되는 우선 순위
인라인 > 내장 > 외부 > 브라우저 디폴트

!important로 마킹함으로써 스타일 우선 순위를 최상위로 강제 변경할 수도 있다.
예)
<style type="text/css">
a {
  color: black !important;
}

엘리먼트에 적용할 스타일 우선 순위가 같을 경우, 브라우저는 다음 기준으로 좀 더 구체적인 스타일을 우선하여 적용한다.

1st. 선택자가 가지고 있는 id 값의 개수
2nd. 선택자가 가지고 있는 다른 속성 및 가상 클래스의 개수
3rd. 선택자가 가지고 있는 엘리먼트 및 가상 엘리먼트의 개수

적용할 스타일이 없을 경우, CSS 프로퍼티 상속이 이뤄진다. (무조건 상속되는 것은 아님)
즉, 상위 엘리먼트에 정의된 스타일이 있다면 적용된다.
CSS 속성이 상속되는 경우는, 엘리먼트 외형과 관련된 속성(글자색, 폰트,...)인 경우로 한정된다.
 (페이지 레이아웃 관련 속성은 상속되지 않음)

예) 강제로 상속된 값 사용
<style type="text/css">
p {
  color: green;
}
span {
  color: inherit;
}



지정법


색상 지정법
1. 색상 이름으로 지정
2. 16진수로 색상의 RGB값을 지정 (#rrggbb)
3. 색상 함수로 지정
rgb(r, g, b)
rgba(r, g, b, a)
hsl(h, s, l)
hsla(h, s ,l, a)

길이 지정법
값과 단위를 붙여써야 한다.

※ 절대 길이 단위들
in  (인치)
cm
mm  (millimeters)
pt  (point, 1pt = 1/72 인치)
pc  (picas, 1pc = 12 포인트)

※ 상대 길이 단위들
em  (엘리먼트 폰트 크기에 따름. 엘리먼트 별로 독립적으로 크기가 계산됨)
rem  (root 엘리먼트 폰트 크기에 따름)
ex  (엘리먼트의 문자 'x'의 정도되는 높이에 따름)
px  (css 픽셀의 개수에 따름. CSS에서 모호하게 정의해놔서 실제로는 대략 1/96인치(절대단위)를 기준함)
%  (다른 속성 값에 대한 비율)

* 절대단위와 상대단위를 혼용할 수 있다.
  상대단위가 유지보수에 유리할 수 있다. em이 유용하다. 폰트크기를 변경하면 나머지 크기도 적당히 바뀐다.
  상대단위를 사뇽할 때는 기준이 되는 크기도 명확히 선언해놔야 함을 잊으면 안된다.

예)
width: 5cm;
font-size: 20pt;


※ 각도 단위들
deg  0~360도
grad  0~400 gradian
rad  0~2π radian
turn  회전수. 1 turn = 360도

※ 시간 단위들
s  초
ms  밀리초


※ 유용한 도구들
Modernizr : 브라우저에서 HTML과 CSS 기능 지원 여부를 확인할 수 있는 JS 라이브러리다.
SelectorGadget (www.selectorgadget.com) : 엘리먼트를 선택하면 selector를 생성해 준다.
LESS(lesscss.org) : CSS 편이성을 확장해주는 JS 라이브러리다. (변수, 함수, 상속 가능)
Blueprint (www.blueprintcss.org) : CSS 프레임워크로서 유연성 높은 그리드 레이아웃을 생성해준다.




본 블로그를 찾은 분들에게 오늘도 축복 있으시길...

HTML 책 보면서 정리하는 - 

◈ 뉴서울(NewSeoul) HTML 5 강좌 2◈

- 노트입니다. ~~~




HTML의 기본 개념


※ 엘리먼트 (Element)

형태

우리는 <code>HTML</code>을 이용하여 웹 문서를 작성한다.

위는 <code></code> 태그로 HTML이라는 텍스트를 마크업한 것이다.

'<code>HTML</code>' 부분이 하나의 엘리먼트다. 'code 엘리먼트'라고 부르면 된다.

<code>는 시작태그, </code>는 종료태그, 'HTML'은 엘리먼트의 컨텐츠다.


code 엘리먼트는 브라우저 상에서 고정폭(fixed-width) 글꼴로 출력된다.

주의) 브라우저에서 고정폭 글꼴로 보여지도록 엘리먼트를 사용하는 것이 아니다. 비록 일부 엘리먼트들이 특정한 모양으로 출력되는 특성이 있지만, 엘리먼트의 역할은 기계가 컨텐츠의 내용을 파악할 수 있도록 하는 것임을 잊으면 안된다. 모양을 조정할 목적이라면 CSS를 사용해야 한다.


컨텐츠없이 태그만 작성해도 유효하며 그런 경우는 의미를 명확하게 하기 위해 단일태그를 사용한다. 예를들어 다음과 같이 작성하면 비어있는 code 엘리먼트를 의미한다.


예) 우리는 <code/> HTML을 이용하여 웹 문서를 작성한다.


※ void 엘리먼트

엘리먼트들 중에는 일부러 내용을 비운게 아니라, 애초에 내용이 없는 void 엘리먼트들이 있다. 이들은 반드시 싱글태그로만 사용해야 한다. 그룹핑 엘리먼트 중 하나인 hr 엘리먼트는 void 엘리먼트로서 시작태그, 또는 종료태그 하나로만 작성한다.

  예) <hr> 또는 <hr/>



종류

엘리먼트 이름은 대소문자를 구별하지 않는다.



엘리먼트의 속성

시작태그나 단일태그에 엘리먼트의 속성을 추가할 수 있다.


우리는 <a href="newseoul.tistory.com">HTML</a>을 이용하여 웹 문서를 작성한다.

href 속성이름

"..." 속성값


※ 속성값에 ""를 써도 되고 ''를 써도 된다.

※ 여러 속성을 작성할 때 순서는 상관없다.

※ 특정 엘리먼트에만 사용할 수 있는 지역속성도 있고 모든 엘리먼트에 사용할 수 있는 전역속성도 있다.

   (class나 id 같은 것들이 전역속성이다)

※ 부울값을 갖는 속성은 속성값 없이 속성 이름만 적어도 된다.

   예) 아래는 입력 차단. 모두 같은 결과. 속성에 값을 입력하면 true처럼 동작한다.

       이름을 입력하세요: <input disabled>

       이름을 입력하세요: <input disabled="true">

       이름을 입력하세요: <input disabled="">

       이름을 입력하세요: <input disabled="disabled">


※ 사용자 속성 (Custom Attributes)

   data- 라는 접두사를 붙임으로써 사용자 속성을 만들 수 있다.

   예) 이름을 입력하세요: <input disabled="true" data-creator="adam" data-purpose="collection">






엘리먼트의 전역 속성들


lang

accesskey, tabindex, title

style , class, id

contenteditable, spellcheck, hidden, dir, draggable, dropzone

contextmenu



lang

엘리먼트 컨텐츠의 언어를 명시한다.

(나라별 설정이 적용되도록 할 때 사용?)


예)

<p lang="en"> Hello </p>

<p lang="fr"> Bonjour </p>

<p lang="ko"> 안녕 </p>




accesskey

키보드 단축키로 특정 엘리먼트를 선택할 수 있게 해준다.


예) Alt+n 키로 입력란을 선택할 수 있다


<body>

    <form>

    Name: <input type="text" name="name" accesskey="n" />

    <p/>

    <p/>

    ...

    </form>

</body>


tabindex

Tab 키에 의한 포커싱 순서를 조정한다. (1~)


title

마우스 오버 때 팝업 설명으로 표시된다.


예)

<a href="..." title="세부정보입니다"> 세부 정보 보기 </a>




style

CSS를 정의한다.


예)

<a href="..." style="background: gray; color:white; padding:10px">


class

문서에 작성되어 있는 엘리먼트들을 클래스별로 분류해주는 역할을 한다.

엘리먼트가 복수의 클래스에 속하게 만들고 싶다면, 공백을 이용해 클래스명들을 나열하면 된다.

클래스는 사용자 임의대로 만들수 있고 각 클래스 별로 스타일을 적용할 수 있다.


예)

<a class="myclass1 myclass3" href="...">...</a>




※ 스타일의 적용은 JS를 이용해서 할 수도 있다.

<script type="text/javascript">

var elems = document.getElementsByClassName("class3");

for (i=0; i<elems.length; i++)

{

    var x = elems[i];

    x.style.border = "thin solid black";

    x.style.color = "green";

}

</script>


id

엘리먼트에 유일 식별자를 부여한다.

보통 특정 엘리먼트에만 스타일을 적용하거나, JS에서 특정 엘리먼트 선택용으로 사용한다.


예)

<style>

#w3clink {

  background: yellow;

  color: red;

  padding: 5px;

  border: thin solid blue;

}

</style>

<body>

  <a id="w3clink" href="http://w3c.org"> W3C </a>

</body>


 



예) 엘리먼트 접근 (test.html 문서에서 id가 myelement인 엘리먼트에 접근)

test.html#myelement




contenteditable

브라우저 상에서 클라이언트가 컨텐츠를 수정할 수 있게 해준다. (HTML5)


예)

나는 지금 <p contenteditable="true">바나나</p>를 먹고 싶어요!


spellcheck

철자를 체크한다.

(사용자가 편집할 수 있는 엘리먼트에 적용될 때에 유용)


hidden (boolean)

적절하지 않음을 표현할 때 사용하며 화면에 표시되지 않는다.

(브라우저가 렌더링을 하지 않는다)


예)

<script>

var toggleHidden = function() {

  var elem = document.getElementById("toggle");

  if (elem.hasAttribute("hidden")) {

    elem.removeAttribute("hidden");

  } else {

    elem.setAttribute("hidden", "hidden");

  }

}

</script>


<body>

<button onclick = "toggleHidden()">숨기기</button>

...

<p id="toggle hidden"> 컨텐츠 </p>

</body>


dir

텍스트 정렬을 명시한다.

ltr : 좌측정렬

rtl : 우측정렬


draggable, dropzone   (HTML5)

drag & drop을 가능케 한다.




contextmenu

엘리먼트에 컨텍스트 메뉴를 정의할 수 있게 해준다.





HTML 문서의 구조


<!DOCTYPE HTML>

DOCTYPE 엘리먼트. HTML이라는 부울 속성 사용.

브라우저에게 컨텐츠가 HTML임을 알림.

DOCTYPE에 HTML임을 굳이 밝히는 이유 : 초창기에 HTML 외에도 여러 마크업 언어들이 난무했었기 때문이다.

<html>

    <head>

        ...메타데이터...

     문서에 대한 정보를 브라우저에 알려주며 head 엘리먼트 안에 작성한다.

     예를 들어, title 엘리먼트는 제목을 나타내는 메타데이터이다.

       

        <title> 제목 </title>

    </head>

    <body>

        ... HTML 문서의 본문 ...

        우리는 <code>HTML</code>을 이용하여 웹 문서를 작성한다.

        ...

    </body>

</html>



※ 커멘트 (메모)

<!-- ...설명... -->

개발자의 메모.  이 설명부분은 브라우저가 해독하지 않고 건너뛴다.




HTML 독립체

브라우저가 HTML로 해석하지 않는 특수 부호를 표시한다.






본 블로그를 찾은 분들에게 오늘도 축복 있으시길...




HTML 책 보면서 정리하는 - 

◈ 뉴서울(NewSeoul) HTML 5 강좌 1 ◈

- 노트입니다. ~~~


정말 요점만 콕콕 집어 정리했습니다.

~~ 기존의 HTML 언어를 사용해 본 경험이 있는 분이라면 본 글만 대충 읽어보시것만으로 본인의 HTML 기술을 쉽게 업그레이드 하실 수 있습니다. ~~

~~ 그리고 요점 정리글이기는 하지만, 친근함과 좀 더 쏙쏙 이해가 될 수 있도록 이야기 서술 형태로 글을 작성했습니다. ~~

~~ 마치 소설 책을 읽는 기분으로 읽어 내려가시면 어느샌가 공부가 끝납니다. 우와! ~~


(짬이 날 때마다 정리를 하므로, 계속해서 내용이 추가될 예정입니다. 오타나 틀린 부분이 발견되면 댓글로 남겨주세요. 보는 즉시 수정하겠습니다.)



HTML5는 기존의 HTML에서 다양한 멀티미디어 컨텐츠를 쉽게 추가할 수 있고, 좀 더 구조화된 웹 페이지를 제작할 수 있도록 기능이 보강된 버전입니다. HTML5를 이용해서 웹 이라는 환경의 한계를 뛰어넘어 응용프로그램 수준의 프로그래밍을 할 수 있습니다.



웹의 역사


초창기에 정적인 HTML에 활력을 줄 수 있었던 최초의 시도가 JavaScript (JS) 언어였다.

JS는 최초의 브라우저 내장형 클라이언트 기반 스크립트 언어로서 Netscape사에서 개발했다.

JS가 본래 HTML 요소는 아니었지만, 이제는 웹페이지 작성에 필수가 되었다.



※ 브라우저 시장 선점 경쟁 (Navigator vs. InternetExplorer)

한때 MS사와 Netscape사 간에 브라우저 경쟁이 심했던 시절이 있었다.

서로 더 뛰어난 특수 기능으로 개발자들을 유인해 시장을 장악하려 했던 것이다.

그러나 그 기대와 달리, 웹 개발자들은 호환성있는 기능 위주로 프로그램을 했고, 유사기능을 위한 대안을 찾아갔다. 왜냐하면 개발자들은 모든 브라우저 사용자들에게 같은 기능을 제공해야 했기 때문이다. 이 과정은 꽤 힘들었고 아직까지도 브라우저 호환 문제가 존재하는 이유이기도 하다.


유료였던 Netscape의 네비게이터 브라우저를 잡기위해 MS는 자사의 IE 브라우저를 무료로 배포했었는데,

결국 대응이 허접했던 Netscape사는 망하고 MS는 독점금지법에 걸려 유죄 판결을 받으며 브라우저 전쟁이 끝났다.


최근에는 웹에 대한 표준이 정해져있고 오늘날의 브라우저들은 웹 표준을 얼마나 준수하는 지를 두고 경쟁중이다.


* 'HTML5 문서 규격을 준수하는' --> 'standards-compliant HTML5'로 표현함




※ Plug-in

플러그인은 웹 브라우저에 설치되는 보조 모듈로서 HTML로 구현할 수 없는 고급 특수 기능들을 제공할 수 있었기에 한 때 인기가 많았었다. 플러그인 설치가 가능한 웹 브라우저에 플러그인을 설치만 하면 온갖 고급 기능들을 사용할 수 있었는데, 이것이 점차 그 플러그인을 담은 브라우저와 HTML은 껍데기 신세로 전락하는 계기가 됐다. 급기야 플러그인으로만 웹 페이지를 작성하면서 플러그인 제작사들 마다의 방식들이 웹 환경에 난무하게 됐다. 결국 웹 표준의 취지를 흩뜨리게 되는 폐단이 생겨난 것이었다. 때문에 브라우저 제작사들은 플러그인을 멀리하려는 경향을 보이고 있는데, 그 대표적인 것이 플래시다. 이에 최신의 HTML5는 그간 플러그인들의 기능을 브라우저에 직접 내장하는 방향으로 진화하고 있다.


한편, 표준을 만드는 것은 대단히 힘들고 오랜 시간을 요한다. 많은 이해 당사자들이 있으므로 많은 협의가 이뤄져야 하고 또 바뀐 내용이 시장에 반영되기 까지는 적잖은 시간이 지나야 하기 때문에 표준을 만드는 활동은 혁신적인 내용을 창조하기보다는 플러그인 업체의 유용한 기술을 표준으로 추가하기에 급급해 온 측면도 있다.


HTML 표준화 위원회는 W3C다. (World Wid Web Consortium)




※ 의미적 HTML

웹 페이지 상에서 중요한 주제를 bold체로 표현하면 인간은 그것이 중요하다고 곧바로 인식하지만, 기계가 탐색을 할 때에는 구분하기가 어렵다. 그래서 최근에는 중요한 주제들을 HTML 엘리먼트로 구분해서 작성하도록 하는 의미적 HTML 작성을 유도하고 있고 그에맞는 HTML 요소들을 제공하고 있다.


그러나 과거 버전의 호환성을 위해 일부 과도기적 혼란은 감수해야 한다.

한 예로, <b>는 이전까지 디자인적 역할만 가지고 있었지만, HTML5에서는 컨텐츠의 어떤 범위를 나타내는 역할을 한다. 보여지는 모습은 호환성을 위해 과거와 같이 볼드체로 표시된다.




HTML5에서 확장된 기능들


Canvas 태그

포토샵이나 플래시는 이미지 처리 기등들을 갖추고 있습니다. 예를 들어, 이미지에 크기 변환, 회전, 효과 등을 가할 수 있습니다. 캔버스 태그를 이용해서 이런 그래픽 기능들을 사용할 수 있습니다.


Video 태그

Video 태그를 이용하면 별도의 플러그인 프로그램을 설치하지 않아도 동영상 파일을 재생할 수 있습니다. 아울러 재생, 일시정지, 재생속도 조정, 위치 변경등도 조작할 수 있습니다. Youtube 서비스는 HTML5 의 Video 기능을 이용하는 대표적인 서비스 입니다.


Audio 태그

Audio 태그를 이용하면 별도의 플러그인 프로그램을 설치하지 않아도 사운드 파일을 재생할 수 있습니다.



대표적으로 위에 나열한 Canvas, Video, Audio 태그가 있습니다. 그 밖에도 대용량 데이터 처리, 위치 검색 서비스 등 고급 기능들이 추가되어 있습니다. 이들을 바탕으로 PC와ㅏ 모바일 환경 모두에서 실행이 될 수 있는 웹페이지 제작할 수 있습니다. 페이스북, 웹용 앵그리 버드 게임등은 HTML5과 CSS3를 함께 사용하여 구현되어 있습니다. 앵그리 버드 게임이 요구하는 애니메이션까지 가능하다는 말입니다. (참고로 앵그리 버드는 구글 크롬 웹브라우저가 제대로 지원합니다. ~)



※ 참고) CSS3에서 확장된 기능들

HTML5와 함께 CSS3를 사용하면 예전의 HTML 문서에서의 디자인 작업을 아주 간편하게 전환할 수 있습니다. 예를 들어, 배경 이미지를 넣은 웹 페이지가 확대되거나 축소될 때 배경 이미지도 커졌다가 작아졌다가 해야 합니다. 그러나 이런 기능에 대해 예전 버전에서는 대응하기 어렵습니다. 또 다른 웹 언어인 자바스크립트등을 활용해야 가능했습니다. 그러나 CSS3에서는 이런 동작을 쉽게 구현할 수 있습니다. 그 밖에도 다음과 같은 기능들을 사용할 수 있습니다.


  ㆍ 박스나 글자에 그림자 효과 주기 (text-shadow, box-shadow)

  ㆍ 일반 테두리나 이미지 테두리를 둥글게 만들기 (border-radius)

  ㆍ 투명도 조절 (opacity)

  ㆍ 그래디언트 효과(gradient)

  ㆍ 도형의 회전, 변형, 애니메이션 효과

  ㆍ 더욱 다양한 폰트 지원

  ㆍ 다양한 크기의 화면을 갖는 각종 기기들을 지원(@media)




1. HTML 문서에 CSS 스타일 적용하기

HTML5 부터는 기존의 HTML 태그를 사용할 때에도 엄격한 규칙을 적용하고 있습니다. 단적인 예로서, 모든 태그에서의 스타일 속성을 태그 안에 정의할 수 없습니다. 가급적 모든 스타일은 CSS 문서에 별도로 작성할 것을 권장합니다. 즉, HTML 문서는 텍스트 위주로 문서의 구조만 담고, 디자인 정보는 모두 CSS 문서에 담도록 합니다. CSS 문서를 별도로 작성하면 웹 브라우저의 캐시 동작에 의해 클라이언트의 웹 페이지 로딩 속도가 더 개선되는 부수적인 효과도 얻을 수 있습니다.



방법 1) HTML 태그에 인라인 style 속성을 정의

<p style="color:blue;"> 텍스트 </p>



방법 2) <head>태그에 <style>을 정의

<head>

    <style type="text/css">

        p {color: blue;}        <-- 모든 p 태그의 '텍스트'들이 파란색으로 출력됩니다. -->

    </style>

</head>


<body>

    ...

    <p> 텍스트 </p>

</body>



방법 3) HTML문서와 별도의 CSS문서를 <link href="..."> 태그로 연결 (권장)

ㆍ HTML 문서

    <head>

        <link href="mystyle.css" ref="stylesheet" type="text/css" />

    </head>


    <body>

        <p> 텍스트 </p>

    </body>


ㆍ CSS 문서

     p {color: blue; }



잠깐!) <p>태그에 대한 디자인에 위에서 나열한 스타일 지정법을 모두 사용했다면, 어떤 방식이 우선할까요?

HTML 인라인 스타일, <head>에 정의한 스타일, <link href=...>로 정의한 스타일 순으로 우선합니다.



잠깐!)  <p>태그가 여러 개인 문서에서 <p>태그들을 분류해서 디자인을 다르게 적용하고 싶을 때는 어떻게 해야 할까요?

원하는 각각의 디자인을 정의한 다음 'id'나 'class'로 구분해 주면 됩니다.


 'id'는 중복되지 않는 이름을 사용해야 하고, 문서의 모든 영역에서 유효합니다. 때문에 모든 태그들이 독립적으로 이를 참조할 수 있습니다.

 'class'는 이름이 중복되어도 무방하고, 지정된 각 태그 영역에서만 유효합니다. 때문에 <p> 태그 영역용으로 정의한 class 스타일은

         비록 class 이름이 같더라도 <div> 태그 영역에서는 아무런 효과를 발휘하지 못합니다.

         class는 또 하나의 특수 기능도 갖는데, '중첩이 가능하다'는 것입니다. 즉, class가 유효한 영역내에서 하위 class를 정의할 수 있습니다.



 이들을 사용한 다음의 예들을 보면 이해하기 쉬울 것입니다.



  class 사용 예1)

    p.mytext{color: blue;}             /* <p>태그에 적용할 디자인~ */

    div.mytext {color: red;}           /* <div>태그에 적용할 디자인~ */


    <p class="mytext"> 텍스트 </p>         <!-- 파란색으로 출력됩니다. -->

    <div class="mytext"> 텍스트 </p>       <!-- 빨간색으로 출력됩니다. --> <!-- 클래스명이 같아도 <p>와 <div>의 디자인이 독립적입니다. -->


  class 사용 예2)

    .mytext{color: blue;}             /* 모든 태그에 적용할 디자인~ */

                                          /* 결과적으로 이것은 문서의 모든 영역에서 유효하며 'id'와 같은 효과를 냅니다 */

    

    <p class="mytext"> 텍스트 </p>         <!-- 파란색으로 출력됩니다. -->

    <div class="mytext"> 텍스트 </p>       <!-- 파란색으로 출력됩니다. -->



  중첩된 class 사용 예)

    .mystory .mytext {color: blue;}

    .mystory div {color: red;}


    <div class="mystory">

        <div> 텍스트 </div>                     <!-- 빨간색으로 출력됩니다. -->

        <p> 텍스트 </p>                         <!-- 적용되는 디자인이 없습니다. -->

        <p class = "mytext"> 텍스트 </p>   <!-- 파란색으로 출력됩니다. -->

    </div>




  id 사용 예)   id 이름 앞에는 #를 붙여주어 class과 구분합니다.

    #mytext {color: green;}


   <p id="mytext"> 텍스트 </p>

   <div id="mytext"> 텍스트 </div>    <!-- 같은 이름의 id를 사용하는 모든 태그 영역에 동일한 디자인 적용되어 모두 초록색으로 출력됩니다. -->




  ※ id와 class를 되새겨 보자면, class는 HTML 태그들과 협업도 자주 하는데에 비해, id는 독립적으로만 사용될 뿐, HTML 태그와 협업하지 않습니다!

     정말? 위 네 가지 예들을 잘 관찰해 보십시오.


이상으로 HTML5 강좌 1을 마칩니다. ^^











본 블로그를 찾은 분들에게 오늘도 축복 있으시길...

이글은 한글을 조립하거나 분해하는 방법을 다룹니다.

프로그램도 첨부했습니다.

가능한한 가독성이 좋도록 설계했습니다.


(아래 그림은 본 글에서 제작한 프로그램을 실행한 화면을 갈무리 한 것 입니다.)



오늘은 유니코드 한글 조립 및 분해 테스트를 해봤다.


유니코드 페이지 사이트 입니다.

 https://unicode-table.com/en/blocks/hangul-syllables/


위 사이트에서 유니코드 표를 보다보니,

일상 생활에서 거의 사용하지 않는 글자 수가 엄청나게 많다는 걸 알 수 있었다.

호기심에 그런 글자들을 대략 수 백 여개 읽어봤다.

지금까지 들어보지 못한 별의 별 발음이 내 입에서 마구 튀어나왔다.

생전 처음 발음해보는 글자들인데도 보는 순간 바로 발음이 됐다.

새삼 신기하고 정말 놀라웠다 !!


놀랍도록 정교하고 창조적인 한글 속에는 우리가 생각지도 못한 많은

응용 가능성이 있을 텐데, 이를 알아보고 활용하는 사람들이 과연 얼마나 될까?

대부분은 그저 전달할 글을 작성하는데 외에는 거의 활용할 줄 모른다.

더군다나, 단어를 사용 할 때에도 본래의 의미나 아름다움을 알아 보지 못하고

외래어만을 선호하거나 비속어나 약자들을 많이 사용한다.

(전문 분야는 어쩔 수 없겠지만, 공기관들의 각 종 행정 용어들이나 인터넷이나

 어린 애들이 사용하는 용어들, 그리고 맞춤법 다 무시하는 모습들을 보면

 좀 안타깝다는 생각마저 든다.)


말이 잠깐 엉뚱하게 샜었는데,

한글의 활용 방법을 하나 찾아낸 디자이너가 뉴스에 소개된 적이 있었다.

그는 한글을 디자인 소재로 활용한다. 나름 신선했다.


그렇다면 또 다른 응용들로도 충분히 넓혀 갈 수 있으리라고 생각한다. ...

예를 들면, 소리를 잘 표현할 수 있는 한글의 특성을 자연의 소리들이나 음악과

접목해서 '한글 사운드 오토마타(automata)'를 제작해 본다거나... 하는 것들 말이다.


한글의 입체적 요소를 3D 프린팅 기술과 접목해서 사람들의 표현을

눈에 보이는 입체 모형으로 만들어 활용하는 시도 같은 것도 재밌을 것 같다.


-- 한글 조립 및 분해하는 프로그램 제작 한 것 입니다. --

그런데, 쓸데 없이 만든 것 같다. 하지만, 나중에 쓰게 될지도 모르니까요.

(유니코드 표는 파일로 첨부했습니다.) 


<Form1.cs>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;


namespace Test3
{
   public partial class Form1 : Form
   {
      한글문자조립 한;


      public Form1()
      {
         InitializeComponent();
      }


      private void btn조립하기_Click(object sender, EventArgs e)
      {
         textBox3.Text = textBox2.Text = "";

         string input = textBox1.Text;
         string[] 글자목록 = input.Split(new string[] { "\"" }, StringSplitOptions.None);
         string[] 자소목록;
         char ch;
         short srt;
         List<byte> bytes = new List<byte>(); ;

         string output = "";
         int 자소개수, idx초성, idx중성, idx종성;
         
         foreach(string 글자 in 글자목록)
         {
            자소목록 = 글자.Split(new string[] { "," }, StringSplitOptions.None);
            자소개수 = 자소목록.Length;


            switch(자소개수)
            {
               case 2:
                  idx초성 = 한.Get초성인덱스(자소목록[0]);
                  idx중성 = 한.Get중성인덱스(자소목록[1]);
                  idx종성 = 0;
                  output += 한.Get완성된한글(idx초성, idx중성, idx종성);
                  break;
               case 3:
                  idx초성 = 한.Get초성인덱스(자소목록[0]);
                  idx중성 = 한.Get중성인덱스(자소목록[1]);
                  idx종성 = 한.Get종성인덱스(자소목록[2]);
                  output += 한.Get완성된한글(idx초성, idx중성, idx종성);
                  break;
            }
            textBox2.Text += output;

            textBox3.Text += output;
            ch = output[0];
            srt = (short)ch;
            textBox3.Text += " " + srt.ToString("X");
            textBox3.Text += "\r\n";

            output = "";
            bytes.Clear();
         }
      }


      private void btn분해하기_Click(object sender, EventArgs e)
      {
         textBox5.Text = "";
         string[] 분해된자소 = 한.Get분해된자소(tb분해할문자열.Text, chk무받침생략.Checked);
         foreach (string s in 분해된자소) textBox5.Text += s + ",";
      }


      private void Form1_Load(object sender, EventArgs e)
      {
         한 = new 한글문자조립();
      }
   }


   public class 한글문자조립
   {
      // 유니코드표에서의 기본 위치
      const int 한글코드시작점 = 0xAC00;  // 유니코드에서 '가'의 위치
      const int 자음시작점 = 0x1100;
      const int 모음시작점 = 0x1161;


      // 자소 목록
      List<string> 초성한글자소;
      List<string> 초성대응영문자;    // 키보드에서 초성 한글 자소에 대응하는 영문자
      List<string> 중성한글자소;
      List<string> 중성대응영문자;
      List<string> 종성한글자소;
      List<string> 종성대응영문자;


      // 임시 변수
      int 중종곱;


      public 한글문자조립()
      {
         초성한글자소 = (
            new string[] { "ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ"
                         , "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ" }
            ).ToList<string>();    // 총 19개 요소
         초성대응영문자 = (
            new string[] { "r", "R", "s", "e", "E", "f", "a", "q", "Q", "t", "T", "d"
                         , "w", "W", "c", "z", "x", "v", "g" }
            ).ToList<string>();    // 총 19개 요소

         중성한글자소 = (
            new string[] { "ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ"
                         , "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ"
                         , "ㅣ" }
            ).ToList<string>();    // 총 21개 요소
         중성대응영문자 = (
            new string[] { "k", "o", "i", "O", "j", "p", "u", "P", "h", "hk"
                         , "ho", "hl", "y", "n", "nj", "np", "nl", "b", "m", "ml"
                         , "l" }
            ).ToList<string>();    // 총 21개 요소

         종성한글자소 = (
            new string[] { string.Empty, "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ"
                         , "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ"
                         , "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ" }
            ).ToList<string>();    // 총 28개 요소
         종성대응영문자 = (
            new string[] { string.Empty, "r", "R", "rt", "s", "sw", "sg", "e", "f", "fr"
                         , "fa", "fq", "ft", "fx", "fv", "fg", "a", "q", "qt", "t"
                         , "T", "d", "w", "c", "z", "x", "v", "g" }
            ).ToList<string>();    // 총 28개 요소


         중종곱 = 중성한글자소.Count * 종성한글자소.Count;
      }


      public char Get완성된한글(int 초성, int 중성, int 종성)
      // 초성, 중성, 종성을 받아 완성된 글자 하나를 반환
      {
         if (초성 < 0 && 중성 < 0) return ' ';
         if (종성 < 0) 종성 = 0;    // 받침 없는 글자

         int i완성된한글 = (초성 * 중종곱)
                         + (중성 * 종성한글자소.Count)
                         + (종성)
                         + 한글코드시작점;
         byte[] b완성된한글 = BitConverter.GetBytes((short)i완성된한글);
         char c완성된한글 = char.Parse(Encoding.Unicode.GetString(b완성된한글));
         return c완성된한글;
      }


      public int Get초성인덱스(string 초성)
      {
         string s = 초성.ToString();
         return 초성한글자소.Contains(s) ? 초성한글자소.IndexOf(s) : 초성대응영문자.IndexOf(s);
      }


      public int Get중성인덱스(string 중성)
      {
         string s = 중성;
         return 중성한글자소.Contains(s) ? 중성한글자소.IndexOf(s) : 중성대응영문자.IndexOf(s);
      }


      public int Get종성인덱스(string 종성)
      {
         string s = 종성;
         return 종성한글자소.Contains(s) ? 종성한글자소.IndexOf(s) : 종성대응영문자.IndexOf(s);
      }


      public string[] Get분해된자소(string str, bool 무받침제거)
      {
         if (str == "") return null;

         List<string> list = new List<string>();
         int uniValue;   // 유니코드 상의 글자 위치
         int iTemp;
         string s;

         for (int n = 0; n < str.Length; n++)
         {
            uniValue = 0;
            s = str.Substring(n, 1);
            byte[] bytes = Encoding.Unicode.GetBytes(s);
            // 빅앤디안 방식이지만 아래 계산 편이를 위해 리틀앤디안으로 변환


            // 유니코드 상의 글자 위치 구하기
            for (int b = 0; b < bytes.Length; b++)
            {
               uniValue += (int)(bytes[b] * Math.Pow(256.0, b));
            }

            if (uniValue < 한글코드시작점) { list.Add(s); continue; }


            // 초성
            list.Add(초성한글자소[(uniValue - 한글코드시작점) / 중종곱]);


            // 중성
            list.Add(중성한글자소[(uniValue - 한글코드시작점) % 중종곱 / 종성한글자소.Count]);


            // 종성
            iTemp = (uniValue - 한글코드시작점) % 종성한글자소.Count;
            if (무받침제거 && iTemp == 0) continue;
            list.Add(종성한글자소[iTemp]);
         }

         return list.ToArray();
      }
   }
}
 




<Form1.Designer>

namespace Test3
{
   partial class Form1
   {
      /// <summary>
      /// 필수 디자이너 변수입니다.
      /// </summary>
      private System.ComponentModel.IContainer components = null;

      /// <summary>
      /// 사용 중인 모든 리소스를 정리합니다.
      /// </summary>
      /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>
      protected override void Dispose(bool disposing)
      {
         if (disposing && (components != null))
         {
            components.Dispose();
         }
         base.Dispose(disposing);
      }

      #region Windows Form 디자이너에서 생성한 코드

      /// <summary>
      /// 디자이너 지원에 필요한 메서드입니다. 
      /// 이 메서드의 내용을 코드 편집기로 수정하지 마세요.
      /// </summary>
      private void InitializeComponent()
      {
         System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Form1));
         this.textBox1 = new System.Windows.Forms.TextBox();
         this.label1 = new System.Windows.Forms.Label();
         this.label2 = new System.Windows.Forms.Label();
         this.textBox2 = new System.Windows.Forms.TextBox();
         this.btn조립하기 = new System.Windows.Forms.Button();
         this.textBox3 = new System.Windows.Forms.TextBox();
         this.label3 = new System.Windows.Forms.Label();
         this.label4 = new System.Windows.Forms.Label();
         this.tb분해할문자열 = new System.Windows.Forms.TextBox();
         this.label5 = new System.Windows.Forms.Label();
         this.textBox5 = new System.Windows.Forms.TextBox();
         this.btn분해하기 = new System.Windows.Forms.Button();
         this.chk무받침생략 = new System.Windows.Forms.CheckBox();
         this.SuspendLayout();
         // 
         // textBox1
         // 
         this.textBox1.Location = new System.Drawing.Point(12, 24);
         this.textBox1.Name = "textBox1";
         this.textBox1.Size = new System.Drawing.Size(376, 21);
         this.textBox1.TabIndex = 0;
         this.textBox1.Text = "ㅇ,ㅏ,ㄴ\"ㄴ,ㅕ,ㅇ\"ㅎ,ㅏ\"ㅅ,ㅔ\"ㅇ,ㅛ\" , \"ㅁ,ㅏ,fr\"ㄱ,ㅗ\"ㅂ,ㅏ,ㄺ\"r,p";
         // 
         // label1
         // 
         this.label1.AutoSize = true;
         this.label1.Location = new System.Drawing.Point(12, 9);
         this.label1.Name = "label1";
         this.label1.Size = new System.Drawing.Size(311, 12);
         this.label1.TabIndex = 1;
         this.label1.Text = "조립할 한글자소 입력  ( ,로 자소구분하고 \"로 글자분리 )";
         // 
         // label2
         // 
         this.label2.AutoSize = true;
         this.label2.Location = new System.Drawing.Point(103, 51);
         this.label2.Name = "label2";
         this.label2.Size = new System.Drawing.Size(69, 12);
         this.label2.TabIndex = 2;
         this.label2.Text = "조립된 한글";
         // 
         // textBox2
         // 
         this.textBox2.Location = new System.Drawing.Point(105, 66);
         this.textBox2.Name = "textBox2";
         this.textBox2.ScrollBars = System.Windows.Forms.ScrollBars.Vertical;
         this.textBox2.Size = new System.Drawing.Size(283, 21);
         this.textBox2.TabIndex = 3;
         // 
         // btn조립하기
         // 
         this.btn조립하기.Location = new System.Drawing.Point(12, 51);
         this.btn조립하기.Name = "btn조립하기";
         this.btn조립하기.Size = new System.Drawing.Size(85, 319);
         this.btn조립하기.TabIndex = 4;
         this.btn조립하기.Text = "조립하기";
         this.btn조립하기.UseVisualStyleBackColor = true;
         this.btn조립하기.Click += new System.EventHandler(this.btn조립하기_Click);
         // 
         // textBox3
         // 
         this.textBox3.Location = new System.Drawing.Point(105, 121);
         this.textBox3.Multiline = true;
         this.textBox3.Name = "textBox3";
         this.textBox3.ScrollBars = System.Windows.Forms.ScrollBars.Both;
         this.textBox3.Size = new System.Drawing.Size(283, 249);
         this.textBox3.TabIndex = 5;
         // 
         // label3
         // 
         this.label3.AutoSize = true;
         this.label3.Location = new System.Drawing.Point(103, 106);
         this.label3.Name = "label3";
         this.label3.Size = new System.Drawing.Size(53, 12);
         this.label3.TabIndex = 2;
         this.label3.Text = "유니코드";
         // 
         // label4
         // 
         this.label4.AutoSize = true;
         this.label4.Location = new System.Drawing.Point(410, 9);
         this.label4.Name = "label4";
         this.label4.Size = new System.Drawing.Size(109, 12);
         this.label4.TabIndex = 1;
         this.label4.Text = "분해할 문자열 입력";
         // 
         // tb분해할문자열
         // 
         this.tb분해할문자열.Location = new System.Drawing.Point(412, 24);
         this.tb분해할문자열.Multiline = true;
         this.tb분해할문자열.Name = "tb분해할문자열";
         this.tb분해할문자열.Size = new System.Drawing.Size(376, 63);
         this.tb분해할문자열.TabIndex = 0;
         this.tb분해할문자열.Text = "시간이 바람처럼 간다";
         // 
         // label5
         // 
         this.label5.AutoSize = true;
         this.label5.Location = new System.Drawing.Point(410, 106);
         this.label5.Name = "label5";
         this.label5.Size = new System.Drawing.Size(69, 12);
         this.label5.TabIndex = 2;
         this.label5.Text = "분해된 한글";
         // 
         // textBox5
         // 
         this.textBox5.Location = new System.Drawing.Point(412, 121);
         this.textBox5.Multiline = true;
         this.textBox5.Name = "textBox5";
         this.textBox5.ScrollBars = System.Windows.Forms.ScrollBars.Vertical;
         this.textBox5.Size = new System.Drawing.Size(276, 249);
         this.textBox5.TabIndex = 3;
         // 
         // btn분해하기
         // 
         this.btn분해하기.Location = new System.Drawing.Point(703, 93);
         this.btn분해하기.Name = "btn분해하기";
         this.btn분해하기.Size = new System.Drawing.Size(85, 277);
         this.btn분해하기.TabIndex = 4;
         this.btn분해하기.Text = "분해하기";
         this.btn분해하기.UseVisualStyleBackColor = true;
         this.btn분해하기.Click += new System.EventHandler(this.btn분해하기_Click);
         // 
         // chk무받침생략
         // 
         this.chk무받침생략.AutoSize = true;
         this.chk무받침생략.Location = new System.Drawing.Point(522, 102);
         this.chk무받침생략.Name = "chk무받침생략";
         this.chk무받침생략.Size = new System.Drawing.Size(156, 16);
         this.chk무받침생략.TabIndex = 6;
         this.chk무받침생략.Text = "받침없는 글자 종성 생략";
         this.chk무받침생략.UseVisualStyleBackColor = true;
         // 
         // Form1
         // 
         this.AutoScaleDimensions = new System.Drawing.SizeF(7F, 12F);
         this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
         this.ClientSize = new System.Drawing.Size(804, 382);
         this.Controls.Add(this.chk무받침생략);
         this.Controls.Add(this.textBox3);
         this.Controls.Add(this.btn분해하기);
         this.Controls.Add(this.btn조립하기);
         this.Controls.Add(this.textBox5);
         this.Controls.Add(this.textBox2);
         this.Controls.Add(this.label3);
         this.Controls.Add(this.label5);
         this.Controls.Add(this.label2);
         this.Controls.Add(this.label4);
         this.Controls.Add(this.label1);
         this.Controls.Add(this.tb분해할문자열);
         this.Controls.Add(this.textBox1);
         this.Name = "Form1";
         this.Text = "한글 조립";
         this.Load += new System.EventHandler(this.Form1_Load);
         this.ResumeLayout(false);
         this.PerformLayout();

      }

      #endregion

      private System.Windows.Forms.TextBox textBox1;
      private System.Windows.Forms.Label label1;
      private System.Windows.Forms.Label label2;
      private System.Windows.Forms.TextBox textBox2;
      private System.Windows.Forms.Button btn조립하기;
      private System.Windows.Forms.TextBox textBox3;
      private System.Windows.Forms.Label label3;
      private System.Windows.Forms.Label label4;
      private System.Windows.Forms.TextBox tb분해할문자열;
      private System.Windows.Forms.Label label5;
      private System.Windows.Forms.TextBox textBox5;
      private System.Windows.Forms.Button btn분해하기;
      private System.Windows.Forms.CheckBox chk무받침생략;
   }
}





-- 한글 유니코드 표 --

텍스트 파일로 첨부했습니다.








※ 참고 자료 (두벌식 자판 vs. 세벌식 자판) - 위-ㅋ 키


1. 두벌식 자판


두벌식 자판은 닿소리와 홀소리가 서로 다른 글쇠에 배치된 한글 입출력 방식들을 총칭한다.

현재 대한민국의 국가 표준은 모두 두벌식 자판 기반이다.

두벌식이라고만 하면 이 표준 두벌식 자판들을 가리키기도 한다.


대한민국의 표준 두벌식 자판은 1982년에 제정된 KS X 5002 “정보처리용 건반 배열”로 표준화되어 있다.


[1] 이 자판은 왼손에는 자음, 오른손에는 모음을 배치하여 자음-모음 또는 자음-모음-자음 순서대로 한글 한 글자를 입력하도록 한 것이다.

 흔히 쌍자음 5자(ㄲ, ㄸ, ㅃ, ㅆ, ㅉ)와 모음 2개(ㅒ, ㅖ)가 표준에 규정되어 있는 것으로 알고 있다.

 하지만, 엄격하게 규정된 것이 아니고 Shift 키와 글쇠를 함께 눌러서 입력할 수 있다고 권장사항처럼 규정되어 있다.

 또 KS의 규정에 쌍자음은 단자음을 거듭 쳐서 구현할 수 있고, 모음 ㅒ, ㅖ도 조합할 수 있다고 되다.

 하지만, 쌍자음은 받침과 초성의 관계 때문에 일반으로 거듭쳐서 구현할 수 없다.

 거듭쳐서 구현하기 위해서는 구분자가 필요하다.

 기타 ㄳ과 같은 겹받침 및 ㅘ와 같은 이중모음은 보이는 대로 두 글쇠를 연속해서 눌러 입력한다.

 다만 ㅐ,ㅔ,ㅒ,ㅖ는 실제로는 조합되지 않고 합자꼴 자체로 입력해야 한다.


 북한의 표준 자판은 두벌식으로서, 한국의 표준 자판의 영향을 많이 받았다.

 조선민주주의인민공화국의 국규 9256에 규정되어 있다.

 이 표준은 국제적으로 KPS 9256이라고 부른다.

 처음 1991년 26키에 치환방식(예, ㄱ+ㅏㅏ=까, ㄱ+ㅓㅓ=꺼)을 국제표준 시안으로 제출했었다.

 그러나 어문생활과의 정합성 결여로 사용될 수 없었고 결국 1993년 표준으로 결정되었다.

 한국과 자음, 모음 영역은 같으나 배열만 차이가 있다.

 모음 중 ㅠ 하나만 좌측에 있는 것도 한국의 표준 자판과 같다.

 입력 방식도 같다.



2. 세벌식 자판


 세벌식 자판은 첫소리(초성) 한 벌, 가운뎃소리(중성) 한 벌, 끝소리(종성) 한 벌을 다른 글쇠 자리에 나누어 놓은 한글 자판들을 일컫는다.

 좁은 뜻으로 공병우가 개발한 배열에 기초한 공병우 계열 자판들을 가리키기도 한다.

 하지만, 1990년대부터는 공병우 계열이 아닌 세벌식 자판들이 주로 속기를 목적으로 쓰이고 있으므로 계열을 구분할 필요가 생겼다.


 세벌식 자판은 컴퓨터의 정보처리 관점에서 첫소리, 가운뎃소리, 끝소리의 개념을 일관성 있게 유지할 수 있다.

 한글에서 닿소리를 첫소리와 끝소리로 가려 쓰는 것을 로마자와 견주면, 대문자 C와 소문자 c를 다르게 알아차리는 것처럼

 첫소리 ㄱ과 끝소리(받침) ㄱ은 위상이 다르다.

 세벌식 자판은 두벌식 자판보다 구현 오토마타가 단순하다.

 다양한 겹닿소리가 쓰이는 옛 한글을 넣을 때에는 치는 이가 낱내(음절)를 끊어 줄 필요가 없다.

 때문에 세벌식 자판이 두벌식 자판보다 편리하다.

 모아치기를 통하여 타자 속도를 높이기 좋다.


 처음으로 널리 쓰인 세벌식 자판은 공병우가 1949년에 수동 타자기를 개발하면서 만든 자판이다.

 이른바 공병우 자판은 수동 타자기/전신 타자기/전동 타자기 등 여러 기종에 맞추어 쓰였다.

 공병우는 여러 기기에 맞추면서 앞서 내놓은 자판 배열을 보완하는 작업을 거듭했다.

 그리하여 스스로 세운 사설 문화 단체인 한글 문화원을 통하여 1991년에 3-91 자판(공병우 최종 자판)을 발표할 때까지 자판 개량 작업을 이어 갔다.

 전자 기기인 셈틀에서도 타자기에서 이어진 공병우 자판이 쓰이고 있다.


 한글문화원에서 발표한 3-90 자판과 3-91 자판(공병우 최종 자판)은 1990년대부터 윈도나 리눅스 및 매킨토시의 OS X 등 주요 운영체제들의 기본 입력기들이 지원하여 널리 쓰이고 있는 세벌식 자판 배열이다.

 세벌식 자판은 두벌식 자판보다 쓰는 이가 적고, 아직 어느 배열도 국가 표준 규격으로 채택되지 않았다.

 세벌식의 적극적인 주장자들은 공병우 자판의 비판을 허용하지 않는 경향이 있다.

 그러나, 사실 타자기에서 출발한 설계이기 때문에 컴퓨터에는 적합하지 않은 요소, 예를 들어 글자의 과잉한 할당을 하였다.

 또 모바일 기기에서 4 줄이 사용되는 점이 단점으로 지적된다.

 하지만 공병우 자판 주장자들은 대개 이러한 단점을 인정하지 않으며, 위키백과와 같은 집단 지성의 편집에서도 이러한 비판적인 글은 삭제하곤 한다.

 공병우 자판의 철학, 즉 세벌식의 개념을 계승하되 컴퓨터 시대에 적합한 설계를 하는 것이 앞으로의 숙제라고 볼 수 있다.


 1990년대 이후에도 공병우 자판을 개선/응용하거나 다른 배열/입력 방식을 쓴 세벌식 자판들이 개발되고 있다.

 이들은 상용화되어있지 않고 운영체제에 반영되어 있지 않으므로 특정한 것을 설명하는 것은 무의미하다.

 전자식 입력 특성을 활용하여 특수한 세벌식으로서 1995년에 신광조는 공병우 자판과 비슷한 배열을 쓰면서 윗글쇠(⇧ Shift)를 쓰지 않고 한 글쇠로 두 한글 낱자를 넣게 한 신세벌식 자판을 내놓았다.

 2003년에는 안마태가 컴퓨터 자판에서 모아치기를 할 수 있게 만든 안마태 소리 글판을 발표하였다.

 2009년 김국은 한글 자모 24자에 받침 14자만으로 충분하다는 주장으로 38자판을 발표하였다.






본 블로그를 찾은 분들에게 오늘도 축복 있으시길...

이글에서는 '젤로몰드' 라는 페이지 폭 자동 조절 기법을 소개합니다.


브라우저 창 크기에 따라 문서의 크기가 적당히 조절됐으면 할 때, 


유용하게 활용할 수 있는 방법이 있다. 물론 스크립트로 세밀하게 조절할 수도


있겠지만, 굳이 인터프리터를 부르지 않고 브라우저 상에서 해결할 수 있는 방법이다.


낡은 노트북을 정리하다가 눈에 띄어, 나름대로 활용성 있는 좋은 기법이었기에


여기에 정리해 놓는다.


 


큰 화면에 대해서는 신경쓸 게 없지만, 나는 주로 작은 화면 때문에 겪는 문제가 많아


작은 화면에서 이 기법을 활용한다. 아래에 일부의 내용을 대충 요약해 봤는데,


관심이 있다면 제일 하단의 링크를 보면 된다.


 


-- 역마진 (Negative Margin) --


우리가 간격을 조절하는 대부분의 CSS 속성들은 엘리먼트를 더 작게 만든다.


Margins, Padding, Borders 들 모두 각 엘리먼트가 차지하는 내부 공간을 줄인다.


그러나 '역 마진'만은 엘리먼트를 부모 엘리먼트 보다 더 크게 만들어 준다.


 


일반 엘리먼트가 취할 수 있는 가장 좁은 폭은 0 px 인데 


만약 어떤 엘리먼트가 0 px 짜리 부모 엘리먼트보다 700 px 더 넓게 확장될 수 있다면, 


(부모 엘리먼트 안에 자리를 잡은) 자식 엘리먼트는 0 + 700 px , 


즉 700 px 의 너비를 가질 수 있게 될 것이다.


바꿔 말하자면, 부모 엘리먼트의 너비가 0 px 일 때, 자식 엘리먼트의 너비는


부모 엘리먼트의 너비보다 항상 700 px 더 넓고 700 px 이하로 좁아질 수는


없는 것이다. 이것으로써 작은 화면에서의 최소 폭이 보장된다. 


자식 엘리먼트의 양 측면에 역마진을 주면 자식 엘리먼트는 양 방향으로 넓어지고 


결과적으로 부모 엘리먼트보다도 넓어 진다. 


 


아래 코드에서, 보통 바깥 쪽 엘리머트는 'body' 엘리먼트이므로 


바깥쪽 div의 id='bodydiv'로 한다. 바로 안 쪽 div는 'expander',


expander에 역마진을 주고 표시되는 화면 너비를 확장할 것이다. 


 


<div id="bodydiv"> 

  <div id="expander"> 

    <p> Jello Mold : 웹 페이지 폭 자동 조절 기법이에요 </p> 

  </div> 

</div>


 

이제 css로 #expander를 #bodydiv보다 700 px 더 넓어지도록 역마진을 사용할 것인데, 


역마진을 #expander의 한쪽 측면에 줘도 되지만, 중앙 정렬을 쉽게 하기 위해 양쪽에 


350 px 씩 주도록 하자. 다음과 같이.


 


#bodydiv { padding: 0 350px 0 350px; } 


#expander { margin: 0 -350px 0 -350px; }


아참, IE에서 역마진이 제대로 동작하려면 몇 가지 보완해야 할 점들이 있다. 


1) #expander 는 position:relative 이어야 하고


2) 모든 div들은 IE hasLayout에 맞게 전체 배율을 보정해야 하며


3) 위 두 개로 구성된 div쌍 사이에 100%의 폭을 갖는 또 하나의 div가 있어야 한다.


 


이를 적용해서 코드를 추가 해보면,


 


<div id="bodydiv"> 

  <div id="sizer">     <!-- IE에 대한 보정용 div -->

     <div id="expander">

        <p> Jello Mold : 웹 페이지 폭 자동 조절 기법이에요</p>

     </div>

</div>


#bodydiv { padding: 0 350px 0 350px; } 

#sizer { width: 100%; }

#expander { margin: 0 -350px 0 -350px; position:relative;}


 


(조건 주석문에서 가져오는 IE 전용 스타일시트에 작성) 


#bodydiv,

#expander {

    zoom: 1;

}


배율을 보정하는 코드는 IE만의 CSS이므로 IE만 읽을 수 있는 조건 주석문 안에 넣어둔다. 


그리고, Safari는 측면 마진의 총 합보다 더 좁은 윈도우 창으로 젤로 몰드가 로드되면


#expander의 역마진을 놓쳐버릴 것이다. 때문에 이를 수정하기 위해서 #expander에


최소 너비를 넣어준다. 이는 단지 Safari에서 어떻게든 동작되도록 하기 위한 것이고


다른 브라우저에는 영향을 주지 않는다.


#expander { margin: 0 -350px 0 -350px; min-width: 700px; }





-- 젤로 몰드 --


위 스타일시트에서 #sizer에 있는 100%라는 값을 50%로 바꾸고 브라우저 창의 폭을 


좁혀보면서 변화를 관찰해 보면 expander 안쪽의 내용 부분은 최소한 700 px의 너비로


(윈도우 폭이 좁아질 때는 수평 스크롤바도 함께) 표시된다. 양쪽 측면의 여백이 점차


감소하면서 expander의 내용이,  좁아지는 윈도우 창보다 상대적으로 더 넓게 표시된다.


반대로 브라우저 창의 폭을 700px이상으로 넓혀보면 양측 여백이 증가하고 브라우저 창에서 


expander  안쪽 내용의 점유 비율이 조금씩 감소한다.


이론적으로 그 폭을 계산해 보면 아래와 같다.


 


1st)   (bodydiv의 padding) 윈도우 폭 - 700 


2nd)  (sizer의 width)    위 계산결과 * 50% 


3rd)  (expander의 역마진)  위 계산결과 + 700


브라우저 폭

계산

젤로 폭

백분율(%)

800px

(800-700) * 0.5 + 700

750

750/800 = 94%

1024px

(1024-700) * 0.5 + 700

862

84%

1280px

...

990

77%

1600px

...

1150

72%

2560px

...

1630

64%

 


결국, 브라우저 창에서 페이지의 내용이 차지하는 비율은,   창이 좁아질 때는 넓고, 


창이 넓어질 때는 좁아지게 되는데,  그 비율의 변화 정도가 전체적으로 브라우저 창의 변화보다 느리다.


젤로 폭의 변화 정도는 간단히 #sizer의 비율을 조정함으로써 정할 수 있다.


 


참고로 지금 다루고 있는 가변 레이아웃들은 브라우저 상에서 중앙 정렬을 해야 하는데, 


#sizer에 대해서는 측면 여백을 auto로 주면 된다. (단, IE의 경우 6.0 이후에서만 유효)


이렇게 완성된 젤로몰드 코드는 다음과 같다.


 


-- 완성된 코드 --



<div id="bodydiv"> 

   <div id="sizer">

      <div id="expander">

          <p> Jello Mold : 웹 페이지 폭 자동 조절 기법이에요 </p>

      </div>

  </div>

</div>



#bodydiv { 

    padding: 0 350px 0 350px;

    text-align: center; /* centering hack for IE5.x/Win */

}



#sizer { 

    width: 50%;

    margin: 0 auto 0 auto; /* standard centering method */

    text-align: left; /* resets centering hack to default */

}


 

#expander { 

    margin: 0 -350px 0 -350px;

    position: relative;

    text-align: left;

}


(조건 주석문에서 가져오는 IE 전용 스타일시트에 작성)


#bodydiv,

#expander {

    zoom: 1;


 


이렇게 만들어진 코드는 브라우저 창에서 내용물이 표시되는 영역의 폭을 


위에 예시한 표와 같이 자동으로 조절해 준다.  실제 위 코드의 동작 모습은


하단의 출처 링크에서 직접 확인해 볼 수 있다.


 


아래는 조금 수정한 테스트 코드지만 위에 표시한 세 가지 단계의 '젤로 폭' 


계산 과정을 그려놓은 것이다. 내가 접하는 화면이 작아서 위 700px은


150px 로 수정했음


 




 


※ 젤로 폭을 구하는 과정 (Jello Width)


 ① 전체 브라우저 폭 - (2 * padding 150px) 


 ② ① 의 결과값 * width 50 %


 ③ ② 의 결과값 + margin 150px



④  ③ 의 결과값 = 젤로 폭


 






더 궁금한 사항은 아래 링크 참조. 


출처 :  http://www.positioniseverything.net/articles/jello-expo.html 에서


          일부 필요한 내용을 발췌 정리한 것입니다.


 


 


 


 

(N20140219)

 


 


 


 

본 블로그를 찾은 분들에게 오늘도 축복 있으시길...





자바스크립트에는 사람을 끌리게 하는 수수한 매력이 있다. 


그 매력들 중 하나가 클로저인 것 같다.


이 글은 클로저에 대해 간단히 정리한 글이다.


알아두면 프로그래밍 할 때, 정말 유용하다. !!!



 


JS 함수 사용 상에는 아래 세 가지 특징이 있다.


① 함수를 변수에 대입가능 --> 때문에 함수의 리턴값이 임의의 함수일 수도 있다.


② 함수의 중첩 사용을 허용한다.


③ 모든 변수에 어휘적 유효범위 규칙을 적용한다.


 


특별히 위 세 가지 사항이 모두 적용되는 경우로서,


어떤 함수 f1이 그 안에 중첩되어 정의된 함수 f2를 리턴한다고 가정하자.


이럴 경우, 재밌는 현상이 발생한다. 


 


f2가 어휘적으로 정의될 때 f2가 갖는 유효범위는 함수 f1의 호출객체를 포함한다.


f1함수는 종료되면서 호출객체f1을 반납하고 소멸되어야 한다. 그러나 한편 f2를


생각해보면 f2는 결과값으로서 리턴되는 것이므로 f1호출자에 의해 사용되어야 한다.


f2가 사용되려면 f2가 참조하는 모든 변수들 즉, f1호출객체가 계속 유지되어야 한다.


이런 이유로 f2와 f1호출객체 사이의 참조가 사라지지 않으므로 가비지컬렉터가


f1 호출객체를 소멸시키지 못하는 것이다. !!!


억지스럽지만, 영화 메트릭스에서 오라클과 네오 간의 참조의 끈 때문에 네오는


시스템속에서 가비지컬렉터인 스미스에 의해 소멸될 수 없는 존재? 메트릭스를 좋아하다보니..ㅋㅋ



 


정리하면, 중첩된 함수 f2가 리턴 값으로 사용되면 f2내에서 참조하고 있는


모든 객체(코드)들이 소멸되지 않고 살아남는다. 더군다나 f1호출객체 속의


모든 변수들은 코드 상으로 직접 접근하는 것이 절대 불가능하며 오로지 f2를


통해서만 간접적으로만 접근할 수 있다. 이것은 매우 강력한 캡슐화 도구이다.


 


살아남은 f1 호출객체에는 f1에서 정의된 변수 뿐만아니라 전달받은 전달인자들도


모두 들어 있다.


한편, 더 나아가 만약 f1이 복수 개의 중첩함수를 반환할 경우, 그 복수개의


중첩함수들은 같은 f1호출객체를 공유하게 되고 한 중첩함수에 의해 초래된 변화는


다른 중첩함수들에게도 영향을 미친다.



 


C와 같은 저수준 언어등에서는 변수를 저장할 때 CPU 스택만을 사용하는데,


중첩함수라고 해도 선언 당시의 변수들을 저장할 수 없다. 왜냐하면 함수가


리턴할 때 CPU 스택에 존재하던 지역변수들을 무조건 삭제하기 때문이다.


하지만 JS의 유효범위체인은 바인딩 스택을 사용하는 것이 아니라, 변수가 저장되어


있는 호출객체를 유효범위 체인의 목록에 추가하는 방식이다. 그리고 가비지컬렉터는


이 호출 객체에 대한 참조가 더이상 없을 때에서야 이 호출 객체를 소멸시킨다.



   


 SHS:  테스트를 위해서 만들어 본 간단한 예)

var str = "전역변수 액세스 로그 -> ";

 

function f(arg1) {

var num1 = 0;  

 

num2 =0;

var functions = [

function g1() { document.write("str : "+str   +"<br> arg1 : "+arg1

+"<br> num1 : "+num1    +"<br> num2 : "+num2   +"<br><br>"); },

function g2() { str = str + num1.toString() ; arg1++; num1++; num2++; },

function g3(i) { functions[i](); } 

];

return functions;

}

 

var shs = f(10);

 

for (var idx =0; idx<3; idx++)  shs[1]() + shs[2](0);

 

num1 = num2 = 0;   // 초기화 해본것.

for (var idx =0; idx<3; idx++)  shs[1]() + shs[2](0);



결과)

str : 전역변수 액세스 로그 -> 0
arg1 : 11
num1 : 1
num2 : 1

str : 전역변수 액세스 로그 -> 01
arg1 : 12
num1 : 2
num2 : 2

str : 전역변수 액세스 로그 -> 012
arg1 : 13
num1 : 3
num2 : 3

str : 전역변수 액세스 로그 -> 0123
arg1 : 14
num1 : 4
num2 : 1

str : 전역변수 액세스 로그 -> 01234
arg1 : 15
num1 : 5
num2 : 2

str : 전역변수 액세스 로그 -> 012345
arg1 : 16
num1 : 6
num2 : 3


 


 


첨부) Steve Yen (스티브옌) breakpoint(중단점) 구현 (클로저의 좋은 활용 예)

function inspect(inspector, title) {

var expression, result;

if ("ignore" in arguments.callee) return;  

 

while(true) {

var message = "";  

if (title) message = title + " | ";   

if (expression) message += " | " + expression + " ===> " + result + " | ";

else expression = "";

message += "Enter an expression to evaluate:";

expression = prompt(message, expression);

    // expression: 사용자가 입력한 조사식

 

if (!expression) return;     

result = inspector(expression); 

}

}

 

// 실제로 팩토리얼 연산함수의 진입점, 루프내부, 이탈직전에 함수를 삽입해서 활용

function factorial(n) {

var inspector = function($) { return eval($); };

inspect(inspector, "Entering factorial()");

var rst = 1;

while(n>1) {

rst = rst * n;

n--;

inspect(inspector, "factorial() loop");

}

inspect(inspector, "Exiting factorial()");

return rst;

}


 



 


 


 


 (N20131226)


 


본 블로그를 찾은 분들에게 오늘도 축복 있으시길...

MS Windows XP상에서 VMWare로 리눅스를 사용중이다.

VMWare의 편리한 툴 중에는 가상 머신이 동작하는 (물리적인 실제) PC와 가상 머신 간의 파일 공유를 지원하는 도구가 있다.

 

목표: Windows XP와 VMWare 상의 리눅스 간의 파일 공유 폴더 생성

 

1) VMWare가 Power Off된 상태에서 다음 그림과 같이,

    VMWare 메인 메뉴중 VM>Settings>Options>Shared Folders에 공유를 원하는 디렉토리를 지정.





 

 

2) VMWare의 가상머신을 On 시켜 부팅한 후,

    VM>Install VMTools... 를 클릭한다.

    화면에 그림과 같은 Tool CD가 나타날 것이다.

    

 

 

3) VMWareTools 라는 압축파일을 /tmp로 가져와 압축을 푼다.

   

 

   tar -xvzf VMWareTools-8.4.4-301548.tar.gz

    (참고: 대소문자 구분함)

 

 

4) 압축이 모두 해제되면 폴더가 하나 생기는데, 아래와 같이 이동해서 .pl파일을 실행한다.

    물음이 나올 때마다 디폴트로 엔터키만 치면 된다.

    생각보다 시간이 조금 걸리는 작업이므로 쉘 프롬프트가 나올 때까지 꼼짝말고 기다리자^^

 


 

 

5) 위와 같이 설치가 끝나고 재부팅하면, 지정했던 공유 폴더가 /mnt/hgfs 에 나타난다.

    아래와 같이 파일 탐색기나 쉘 프롬프트 상에서 확인할 수 있다.

 

  

 


참고)

VMware Fault Tolerance

VMware Fault Tolerance (FT) provides continuous virtual machine availability in the event of a server failure.

Because FT uses HA, most HA best practices (described in “VMware vSphere High Availability” on page 76)

are relevant to FT as well.

When FT is enabled in a virtual machine, that virtual machine is called the FT primary virtual machine, or

primary. Each such FT primary virtual machine is paired with another virtual machine, called the FT

secondary virtual machine, or secondary. The roles of primary and secondary are dynamic: the virtual

machines can swap roles when there is a failover.

„ FT requires some additional resources. Before turning on FT for a virtual machine, make sure you have

the following resources available:

„ Storage: The secondary virtual machine consumes storage for its configuration file, as well as its

VMDK files, each of which are complete copies of the primary's VMDK files. Make sure you have

space for the secondary virtual machine; this space can be on the same datastore as the primary or a

different datastore. As long as a virtual machine is FT protected, changes to the primary’s VMDK files

will be mirrored to the secondary’s VMDK files.

„ Memory: The primary and secondary virtual machines automatically receive a full memory

reservation, ensuring ballooning or swapping are never necessary on either virtual machine. Make

sure that the hosts on which the primary and secondary virtual machines will run have enough

memory for this reservation.


VMware Fault Tolerance (FT)는 서버 장애 발생시 지속적인 가상 시스템 가용성을 제공합니다. FT는 HA를 사용하기 때문에 HA 베스트 프랙티스 (76 페이지 "VMware  vSphere 고 가용성"에서 설명 함) FT와 관련이 있습니다. 가상 컴퓨터에서 FT가 활성화되면 해당 가상 컴퓨터를 FT 기본 가상 컴퓨터라고합니다. 행성. 이러한 각 FT 주 가상 시스템은 FT라고하는 다른 가상 시스템과 쌍을 이룹니다.보조 가상 컴퓨터 또는 보조. 기본 및 보조의 역할은 동적입니다. 가상장애 조치가있을 때 시스템은 역할을 스왑 할 수 있습니다. "FT는 몇 가지 추가 자원이 필요합니다. 가상 컴퓨터의 FT를 켜기 전에 다음과 같은 리소스를 사용할 수 있습니다. "스토리지 : 보조 가상 시스템은 해당 구성 파일뿐만 아니라 VMDK 파일. 각 VMDK 파일은 기본 VMDK 파일의 전체 복사본입니다. 가지고 있는지 확인하십시오. 보조 가상 시스템을위한 공간; 이 공간은 기본 데이터 저장소와 동일한 데이터 스토어에있을 수 있습니다. 다른 데이터 저장소. 가상 컴퓨터가 FT로 보호되는 한 기본 VMDK 파일로 변경됩니다.

보조 VMDK 파일에 미러링됩니다. "메모리 : 기본 및 보조 가상 컴퓨터는 자동으로 전체 메모리를받습니다. 가상 시스템에서 벌룬 또는 스와핑을 보장 할 필요가 없습니다. 기본 및 보조 가상 시스템이 실행될 호스트에 충분한 공간이 있는지 확인하십시오.


When the primary virtual machine is powered on, both the primary and secondary virtual machines

consume additional overhead memory. The amount depends on virtual machine memory size, but

is typically in the range of 1GB-2GB each.

„ Network: Make sure the FT logging traffic is carried by at least a 10Gb/s NIC. While the amount of

network traffic depends on the workload, even one multi-vCPU virtual machine can require several

Gb/s.

„ CPU: The secondary virtual machine requires some additional CPU cycles to support the

synchronization between the primary and secondary. This is in proportion to how active the primary

VM is, and is generally low.

„ Before a virtual machine is FT protected, the primary and secondary must undergo an initial

synchronization of their memory and VMDK states. This is done through a live memory and disk

migration that occurs while the FT virtual machine is running. The disk synchronization, in particular,

can be a lengthy operation, so expect a delay before it completes and the virtual machine becomes FT

protected.

The initial synchronization happens in the following cases. Because this process can be resource intensive,

avoid performing these operations more often than necessary.

„ When FT is turned on for a running virtual machine.

„ When an FT virtual machine changes from powered-off to powered-on.

„ When the Resume Fault Tolerance operation is executed on a running FT virtual machine that has

had the Suspend Fault Tolerance operation performed on it.

„ When FT protection is reestablished following the failure of either the primary or secondary. This

could be caused by a hardware failure or intentionally triggered with the Test Failover or Test

Restart Secondary operations. In either case the initial synchronization will execute to re-establish FT

protection.



기본 가상 컴퓨터의 전원이 켜지면 기본 및 보조 가상 컴퓨터 추가적인 오버 헤드 메모리를 소비한다. 용량은 가상 시스템 메모리 크기에 따라 다르지만 일반적으로 1GB ~ 2GB 범위입니다. "네트워크 : FT 로깅 트래픽이 적어도 10Gb / s NIC로 전달되는지 확인하십시오. 금액은 네트워크 트래픽은 작업 부하에 따라 달라 지므로 하나의 다중 vCPU 가상 시스템조차도 여러 개의 Gb / s. "CPU : 보조 가상 시스템을 지원하려면 몇 가지 추가 CPU 사이클이 필요합니다. 1 차와 2 차 사이의 동기화. 이것은 1 차적으로 얼마나 활동적인지에 비례합니다. VM은 일반적으로 낮으며 일반적으로 낮습니다. "가상 컴퓨터가 FT로 보호되기 전에 기본 및 보조 컴퓨터는 초기

메모리 및 VMDK 상태의 동기화 이것은 라이브 메모리와 디스크를 통해 이루어집니다. FT 가상 시스템이 실행되는 동안 발생하는 마이그레이션. 디스크 동기화, 특히,

긴 작업이 될 수 있으므로 완료되기 전에 지연이 예상되고 가상 컴퓨터는 FT가됩니다. 


초기 동기화는 다음과 같은 경우에 발생합니다. 이 프로세스는 자원 집약적 일 수 있기 때문에, 필요 이상으로 자주 이러한 작업을 수행하지 마십시오. "실행중인 가상 컴퓨터에서 FT가 켜져있는 경우. "FT 가상 시스템이 전원 꺼짐에서 전원 켜기로 변경 될 때. "Resume Fault Tolerance 작업이 실행중인 FT 가상 컴퓨터에서 실행될 때

Fault Tolerance 작업을 수행했습니다. "FT 보호가 1 차 또는 2 차 실패 후에 다시 시작될 때. 이 하드웨어 장애로 인해 발생하거나 테스트 장애 조치 또는 테스트로 의도적으로 트리거 됩니다. 보조 작업을 다시 시작하십시오. 두 경우 모두 초기 동기화가 실행되어 FT를 다시 설정합니다.






(N20110627)



본 블로그를 찾은 분들에게 오늘도 축복 있으시길...









[MySql]is not allowed to connect to this MySQL server   프로그래밍  


mysql접속시 IP로 접속이 안되고 localhost등 이름으로만 접속되는 이유

 --> 접속가능한 IP로 등록이 되어 있지 않아 발생함

 

::Solution


mysql> grant all privileges on db이름.* to 사용자계정@'IP주소'

identified by '비밀번호' with grant option;

mysql> grant reload,process on *.* to admin@localhost;

mysql> FLUSH PRIVILEGES;



[출처] [MySql]is not allowed to connect to this MySQL server



(N20091213)


본 블로그를 찾은 분들에게 오늘도 축복 있으시길...








MDAC (Microsoft Data Access Component)이란?

Microsoft 관련 제품을 사용하다 보면, 간혹 MDAC이란 이름을 접하게 된다.
MDAC은 Windows NT4 Service Pack 4 또는 Internet Explorer 4.0 이후 출시된 대부분의 Microsoft 제품 (Windows, Office, Visual Studio, Internet Explorer 및 모든 서버 제품군)에 포함되어있으며, 사용자도 인지하지 못하는 사이에 (아니 자세히 관찰하면 제품설치 시 MDAC 설치 화면을 볼 수 있다.) 항상 상위 버전으로 자동 설치 될 뿐, 제거되거나 하위 버전으로 변경되는 경우는 거의 없다. 그럼 이 MDAC이란 무엇일까? 
Web 또는 LAN 이용하여 데이터를 주고받는 클라이언트/서버 형태의 응용프로그램에서 관계형(SQL) 또는 비관계형에 상관없이 다양한 데이터 소스로부터 쉽게 정보(Information)을 통합-공유할 수 있는 ADO, OLE DB, ODBC 등의 컴포넌트들을 제공하여 준다.


MDAC의 버전


그 동안 배포된 MDAC의 버전을 살펴보면, MDAC 1.5, 2.0, 2.1, 2.5, 2.6, 2.7, 2.8등 다양한 버전이 존재하며, 또한 각 버전별 Service Pack도 존재한다. 이 많은 버전들의 MDAC을 설치하는 원칙은 매우 단순하다. 데이터를 공급 받는 클라이언트(데이터 소비자)의 MDAC 버전은 데이터를 제공하는 서버(데이터 소스)의 MDAC 버전보다 높거나 최소한 같아야 한다. 이렇게 하여야지만 데이터 소스에서 제공하는 모든 기능 및 기존 문제점들을 수용할 수 있게 된다. 일례로 자신의 장비에 MDAC 버전을 최소 어느 버전 이상으로 설치하여야 하는가는 자신의 장비에서 연결하는 최신 SQL Server 버전 및 서버에 설치된 최신 SQL Server Service Pack 버전이 포함한 MDAC 보다 같거나 높으면 된다. 추가로 요즈음 제공되는 MDAC관련 Tool의 경우 설치된 MDAC 버전을 제거하거나, 하위 버전으로 회귀하는 기능들을 제공하기도하지만 절대적인 원칙은 항상 MDAC은 상위 버전으로 변경될 뿐 하위버전으로 변경하는 것을 권장하지 않는다. (일부 클러스터 환경에서는 서버 환경에 특정 버전 이상의 MDAC 설치를 권장하지 않는 경우도 있지만..) 

SQL Server의 제품 CD 및 SQL Server Service Pack CD를 살펴 보면 "x86\other\sqlredis.exe"라는 파일을 공통적으로 발견할 수 있다. 이 sqlredis.exe의 경우 최신 MDAC과 완전하게 동일하지는 않지만, 현재 설치된 SQL Server 버전에 문제없이 연결이 가능하도록 구성되었으며, 재배포 가능한 형태의 MDAC 대부분 컴포넌트를 포함하고, Remote에서 설치가 가능한 무인실행 설치 파일이다. 따라서 방화벽 클라이언트 응용프로그램들이 방화벽 또는 프락시 서버에서 공유되도록 하듯이, SQL Server 관리자들은 sqlredis.exe를 SQL Server 상에서 파일 공유하여 해당 SQL Server를 연결하고자 하는 모든 클라이언트는 이 파일(sqlredis.exe) 설치에 의해 SQL Server연결에 관련된 기본 요건을 쉽게 구성할 수 있도록 하는 것도 하나의 유용한 팁이 될 수 있다. 

SQL Server를 사용하는 웹서버 및 기타 응용프로그램 서버 관리자의 경우, 잊지 말고 SQL Server Service Pack 적용 시 항상 각각의 웹서버에 이 sqlredis.exe를 수행하여 클라이언트의 MDAC 버전을 서버와 일치 시켜준다면, 향후 겪게 될 많은 문제점들을 피해 갈 수 있을 것이다. 


MS MDAC(MS Data Access Components) Heap 오버플로 취약점 

-- 해당 시스템 -------- 
MDAC 2.7 이전버전 
Internet Explorer 버전 6 
Internet Explorer 버전 5.5 
Internet Explorer 버전 5.1 

--영향----------------- 
원격공격자가 Request에 대한 실행권한으로 임의의 명령어를 실행할 수 있다. 
웹서버인 경우 권한은 SYSTEM 권한일 수 있으며, 클라이언트 프로그램인 경우 웹페이지를 볼 수 있는 사용자계정의 권한일 수 있다. 

-- 설명--------------- 
MDAC는 데이터베이스와 네트웍 어플리케이션간의 프로세스 상호연동에 필요한 유틸리티의 집합체이다. 그런데, MDAC의 Remote Data Service(RDS) 콤포넌트에 버퍼오버플로 취약점이 존재한다. RDS는 클라이언트가 웹상에서 데이터 베이스에 연동하는데 필요한 프로세스의 한 단계 역할을 한다. 

이 취약점을 이용한 공격법은 두가지 경우를 생각할 수 있다. 

첫째, 공격자는 취약한 서비스에 마치 자신의 시스템이 IIS 서버인 것처럼 악성의 HTTP Request를 보내는 방법이 있다. 만약 RDS가 enable된 상태라면 공격자는 IIS 서버인 것처럼 임의의 명령어를 실행할 수 있다. RDS는 윈도우 2000과 XP 시스템에서는 기본적으로 설정되어 있지 않다. 다른 윈도우 시스템은 마이크로 소프트 보안 권고문에 따라 RDS를 disable시킬 수 있다. 

둘째, 클라이언트 프로그램(예: 인터넷 익스플로러)을 통해 MDAC RDS의 버퍼오버플로를 웹페이지를 이용하여 공격하는 방법이 있다. 윈도우 XP를 제외한 대부분의 인터넷 익스플로러를 실행하고 있는 운영체제는 이 공격에 취약하다고 볼 수 있다. 

-- 해결책--------------- 
MS사의 패치적용(MS사 권고문 MS02-065의 Q329414 패치) 
패치다운로드 위치: 
http://www.microsoft.com/security/security_bulletins/ms02- 
065.asp. 

MS사의 권고문에 따르면, 패치가 적용되었다 할 지라도 취약한 버전에 대한 공격 시나리오는 존재한다고 밝혔다. 이는 취약한 ActiveX 컨트롤이 MS사에 의해 사인이 되어 있기 때문에 패치가 MDAC 컨트롤 프로세스를 Kill할 수 없는 것이다. 

------- 참조 사이트 -------------------------- 
http://www.cert.org/advisories/CA-2002-33.html 
http://www.microsoft.com/security/security_bulletins/ms02- 
065.asp. 
--------------------------------------------


출처 : Tong - sunkencity님의 어라 뭐였더라???통


(N20091202)



본 블로그를 찾은 분들에게 오늘도 축복 있으시길...








< C#에서의 MySql 서버 연결 및 사용 방법 >

1. .NET용 MySql 드라이버를 설치 한다.
   - 경우에 따라 다르겠지만 본인의 경우에는 MySql 홈페이지에서 만든 드라이버를 설치 후 연결을 하니
     euckr 문자셋이 없다는 에러를 내면서 도저히 연결이 되지 않았다.
     그래서 데브피아에서 검색한 결과 ‘MySQLDriverCS’ 라는 드라이버를 알게 되어 이것을 설치 했다..
     물론 연결이 아주 잘 되었다.

    - 설치 및 사용 방법 
     여기에서 받는다. http://sourceforge.net/projects/mysqldrivercs
     그런 후 설치를 한 후 프로젝트에서 참조 시킨다. 만약 참조 화면에 나타나지 않으면 수동으로
     설치된 폴더에 가서 찾아서 참조 시킨다.

2. 서버 연결
- using MySQLDriverCS;
………..
  MySQLConnection conn =  new MySQLConnection( new MySQLConnectionString("localhost","mysql","root","").AsString );
MessageBox.Show("Connecting to database");
try
{
        conn.Open();
}
catch(Exception ex)
{
     MessageBox.Show(ex.Message);
        return;
}


3. MySQLSelectCommand 를 사용한 쿼리
- 지정된 테이블의 모든 필드를 쿼리
  DataTable dt = new MySQLSelectCommand(Connection, new string[]{"*"}, new string[] {"MoneyResult"}, null, null, null).Table;
foreach(DataRow row in dt.Rows)
{
           int i = 0;
           string AreaCode = row["AreaCode"].ToString();
++i;
    }

- 특정 필드 쿼리




…………….




DataTable dt = new MySQLSelectCommand(DBConn,
                new string[] {"SettingID","SettingValue"},
               new string[] {"Settings"},
               new object[,] {{"SettingID","=",SettingID}},
               null,
               null
            ).Table;
    string Value = null;
    if(dt.Rows.Count!=0)
    {
        Value = dt.Rows[0]["SettingValue] as string;
     }
     else
     {
        // Value not found
      }
      ...

- WHERE 사용 방법
   ………………………………………………..
string StartDt = "2005-12-01 00:00:00";                     // WHERE에서 값으로 사용한다.
string EndDt = "2005-12-01 23:59:59";

DataTable dt = new MySQLSelectCommand( Connection, new string[]{"*"}, new string[] {"ItemResult"},
                                              new object[,]{ {"Dt",">=",StartDt},{"Dt","<=",EndDt} },
                                                    null, null).Table;
foreach(DataRow row in dt.Rows)
{
            ……………………
}
……………………………………………………..


- 원래는 쿼리는 MySQLCommand 와 MySQLDataReader를 이용하는 것이 보통 이지만 본인이
자세히는 모르지만 MySQLDataReader가 ADO.NET에 있는 비슷한 클래스와 같은 역할을 한다면
쿼리 후 페치를 할 때 마다 서버에 연결된 상태에서 값을 가져와야 되기 때문에 데이터가 작은
경우가 아니라면 성능에 좀 문제가 되지 않을까 해서 사용하지 않고 MySQLSelectCommand를
사용하고 있음.

  ………………………………………..
  MySQLCommand cmd = new MySQLCommand("select host,user from mysql.user",conn);
MySQLDataReader reader = cmd.ExecuteReaderEx();
while(reader.Read())
{
            ListViewItem lvi = new ListViewItem("Low Level - Host:"+reader.GetString(0)+" , User:"+reader.GetString(1));
            lvData.Items.Add(lvi);
}
reader.Close();
cmd.Dispose();
   ……………………………………………………………

- DataAdapter 를 사용하여 쿼리 하는 방법
예)
  ………………………………………………..
  string strQuery = "SELECT Dt, ItemCode, Cnt FROM ItemResult”;
  MySQLDataAdapter DataAdapter = new MySQLDataAdapter();
MySQLCommand cmd = new MySQLCommand();
cmd.Connection = Connection;
cmd.CommandText = strQuery;
DataAdapter.SelectCommand =  cmd;
                               
DataSet ResultDataSet = new DataSet();
DataAdapter.Fill( ResultDataSet , "ItemResult" );
…………………………………………….



(N20091112)


본 블로그를 찾은 분들에게 오늘도 축복 있으시길...








자바스크립트 배우면서 정리했던 내용 ~



● Java Script의 정의


Nescape에서 개발된 객체지향 스크립트 언어를 의미합니다.



● Java Script의 종류


1. CSJS(Client Side JavaScript) : 간단히 말하자면 우리가 일반적으로 알고 있는 자바스크립트입니다.

HTML문장안에 포함되어 Client로 전송되고, 웹 브라우저안에서 실행되는 언어를 말합니다.

인터프리트 방식으로 실행됩니다. 자바의 문법을 빌어왔기 때문에 JavaScript라는 명칭을 사용하지만, 실제로 자바언어와는 크게 상관이 없다고 볼 수 있습니다.

Client Side JavaScript 는 <SCRIPT>..</SCRIPT>라는 태그안에 기술됩니다.


2. SSJS(Server Side JavaScript,LiveWire) : CGI(Common Gateway Interface)와 같은 기능을 할 수 있도록 자바스크립트의 기능을 서버쪽으로 옮긴 것으로 볼 수 있습니다.

Server Side JavaScript는 <SERVER>..</SERVER>라는 태그안에 기술하면 됩니다.


최초에 LiveWire란 명칭으로 개발하였으나, 중간에 Server-Side JavaScript로 명칭을 변경하 였습니다. 아직까지는 두 명칭을 서로 혼용하고 있는 상태입니다.


- Java Script 강좌 -



● Java Script의 개요


1. Java Script의 소개


기존의 정적인 HTML은 사용자와 상호작용할 수 있는 기능이나 즉각적인 응답을 받는 기능을 해결할 수 없다. 이런 문제와 제약을 해결하기 위한 시도중의 하나로 자바스크립트가 개발되었다.

자바스크립트는 자바를 기반으로 한 객체 지향 스크립트 언어로서 스크립트 코드가 HTML 문서 사이에 직접 삽입되어 번역(compile) 과정을 거치지 않고 브라우저에서 직접 실행 되어 자바스크립트를 지원하는 브라우저만 있으면 서로 다른 플랫폼(platform)에서도 실행되는 특징을 가지고 있다.

자바스크립트는 자바의 기본적인 문법구조를 그대로 사용하고 있어 자바와 유사하지만 동일한 언어는 아니다.

Java Script는 인터프리터 언어로서 클래스나 상속 개념이 없는 객체 기반 언어(Object Based Language) 개념을 가지고 이벤트를 처리 할 수 있도록 되어 있다.

Java Script는 넷스케이프사에 의해 라이브스크립트(LiveScript)라는 이름으로 처음 개발되었다. 이 스크립트 언어는 HTML을 확장하고 CGI를 대체하기 위한 목적을 갖고 있었다. 넷스케이프사가 선(SUN)에서 개발한 자바(Java)를 지원하기 시작하면서 자바스크립트(넷스케이프 2.0에서 지원)로 바뀌었다.

또 MS에서는 JScript(익스플로러 3.0에서 지원)라는 이름으로 지원하는데 Java Script와 대부분 호환을 가지고 있다. 그러나 웹상에서 스크립트 언어를 표준화하기 위해서 ECMA라는 단체가 있지만 완전한 표준은 되어 있지 못하다.

자바스크립트를 위한 도구로서 넷스케이프의 라이브와이어(LiveWire)와 볼런드사의 인트라빌더(intra Builder)가 있다. 라이브와이어는 자바스크립트를 기본 스크립트 언어로 사용하고 파일과 데이터베이스 제어를 위한 언어 확장 기능을 제공한다. 또 인트라 빌더는 자바스크립트를 프로그래밍 언어로 사용하는 웹 데이터베이스 개발 도구이다.

또 넷스케이프 엔터프라이즈 서버와 LiveWire, 마이크로소프트사의 ActiveX 서버 환경경하에서는 서버측에서도 사용된다.


2. Java Script의 기능과 실행


Java Script는 HTML과 사용자 사이의 상호작용이나 응답을 지원하고 멀티미디어와 에니메이션을 웹(Web) 상에 표현한다.

Event Handler로서 Mouse click, Form에 입력, page간의 이동 등 웹 페이지상에서 일어나는 event를 처리할 수 있다.

문서 객체 모형 기능으로 HTML로 정의된 Form, Frame, Layer 등의 객체 제어가 가능하다.

HTML에 속하지 않는 객체를 지원함으로서 HTML과 관련되지 않은 객체를 사용하여 별도의 정보, 예를들면, 사용자의 Browser 종류, Browser가 실행되고 있는 운영체제 등을 알수 있다.


요약하면 다음과 같다.


• 동적인 HTML 문서 작성 지원

• 

• 클라이언트측의 응용프로그램 개발에 사용

• 

• 복수개의 프레임을 지원

• 

• 데이터의 유효성 검사 수단

• 

• 대화식 폼의 생성

• 

• CGI없이 데이터베이스 제어

• 

• 클라이언트의 참조 테이블 생성

• 

• 클라이언트와 서버 간의 데이터 교환과 같은 상태 관리 기능

• 

• HTML 객체, 자바 애플릿, Active-X Control, Plug-in과 같은 클라이언트의 확장 기능 제공

• 

• 웹 서버의 확장

• 

• 자바스크립의 버전은 Java Script 1.0, 1.1, 1.2와 Jscript 1.0, 2.0이다.

• 자바스크립는 오직 클라이언트 쪽에서만 실행되기 때문에 망을 통한 데이터 전송 없이 모든 작업을 처리할 수 있다.

• 특정 플랫폼(Platform)에 관계없이 자바스크립트를 지원하는 브라우저만 있으면 실행이 가능하다.

• 현재 자바스크립트는 넷스케이프 2.0 이상, MS의 익스플로러 3.0 이상에서 지원한다.

• 

• 

• ● 기본형식과 개발도구

• 

• 1. Java Script의 기본형식

• 

• Java Script는 <Script> 태그로 시작해서 본문은 <!--로 시작하고 -->로 끝나는 HTML 설명문으로 묶어 있다.

• 그래서 Java Script를 지원하는 브라우저는 <Script> 태그 다음 "<!--"와 "-->"안의 내용을 script로 인식하고 그렇지 못한 브라우저는 HTML 설명문으로 처리한다.

• 하나의 HTML문서는 여러 쌍의 <Script> 태그로 존재할 수 있다.

• 또 Java Script는 대소문자의 구별이 있다.

• 

• a) 언어의 속성

• 

• <SCRIPT LANGUAGE="JavaScript"> 자바스크립트 1.0(네비게이터용 자바스크립트 2.0) 지원

• <SCRIPT LANGUAGE="JavaScript1.1"> 자바스크립트 1.1(네비게이터용 자바스크립트 3.0) 지원

• <SCRIPT LANGUAGE="JavaScript1.2"> 자바스크립트 1.2(네비게이터용 자바스크립트 4.0) 지원

• 

• b) 소스(Source)의 속성

• 

• -. HTML 문서내에 <script> 태그를 이용하는 방법

• 

• <HEAD>

• <TITLE> Java Script의 형식(1)</TITLE>

• <SCRIPT LANGUAGE="JavaScript">

• <!--

• . . . -->

• </SCRIPT>

• 

• -. HTML 태그의 이벤트에 응답하는 부분을 삽입하는 방법

• 

• <HEAD>

• <TITLE> Java Script의 형식(2)</TITLE>

• 

• <BODY>

• <form>

<INPUT type="SUBMIT" name="button1" value="버튼" onClick="alert("클릭")">

</form>

</BODY>


2. Java Script의 개발도구


Java Script의 입력은 일반 HTML 편집기로 가능하다.

그리고 특별한 자바스크립트를 위한 도구로서 Acadia Infise가 있다.

Java Script의 실행은 브라우저에서 인터프리터로 실행한다.

즉, HTML 문서가 브라우저에 의해 다운로드할 때마다 자바스크립트는 브라우저에 의해 해독되고 실행된다.

자바 스크립트의 내용은 사용자의 입력 및 여러 이벤트의 발생에 의해 적절한 부분이 수행되게 된다.

Java Script 소스의 위치는 HTML 태그내에 어디든 상관없으나 보통 함수는 <HEAD> 부분에 정의하고, 함수를 호출하는 것은 <BODY> 부분에 기술하는 것이 편리하다.


<HEAD>

<TITLE> Java Script의 형식(2)</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function pushbutton() {

alert("클릭")

}

// -->

</SCRIPT>


<BODY>

<form>

<INPUT type="SUBMIT" name="button1" value="버튼" onClick="pushbutton">

</form>

<a href="doc1.html" target=b>Previous</a>

<a href="doc2.html" target=b>Home</a>

<a href="doc3.html" target=b>Next</a>

</BODY>

</HTML>



● 기본 문법


1. 토큰(Token)



• 자바스크립트가 이해할 수 있는 각각의 단어 혹은 구, 문자를 의미하는 단어.

• 

• 식별자(Identifier), 키워드(Keyword), 리터럴(Literal), 연산자(Operator), 구분자(Seperator)

• 

• 2. 식별자(Identifier)

• 

• 

• 변수, 메소드, 속성,객체의 이름을 의미.

• [예] 옳은 식별자 : current_webSite, NumberofHits, n, N

• [예] 잘못된 식별자 : current website, #ofHits, 2n, return

• 3. 키워드(Keyword)

• 

• 

• 프로그램 내부에서 미리 사용하는 식별자

• 

• [자바스크립트1.0]

• break, function, null, while, continue, if, return, with, else, in, this, false, int, true, for, new, var

• [자바스크립트1.1]

• typeof, void

• [자바스크립트1.2]

• do, switch, labeled, while

• 

• 

• 예약어 : 변수명, 함수명, 객체명, 메소드 이름으로 사용할 수 없는 식별자

• abstract, boolean, break, byte, case, catch, char, class,const,continue, default, delete, do,double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, intanceof int, interface, labeled, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, while, with

• 

• 4. 리터럴

• 

• 

• 숫자형 : 정수나 실수 구분없다.

• [예] 57, -12.45, 3.141592, 1.1e10, 8.2456E112, O12(8진수 12), OX1ff(16진수 1ff)

• 

• 논리형 : 참(true : 1)이나 거짓(false : 0)중의 하나

• 

• 스트링 : "문자열", '문자열' 둘다 사용

• [예] "Kumi College", 'This is "substring" and others', "#16-4"

• [참고] 특수문자

• \b : 백스페이스

• \f : formfeed

• \n : LineFeed

• \r : Carriage Return

• \t : Tab

• \\ : 역슬래쉬

• \' : 작은 따옴표

• \" : 큰 따옴표

• 

• 널(null) : 값이 없는 것을 의미

• 

• 5. 변수

• 

• 

• 변수(Variable)는 특정 자료형의 값을 가지고 있는 저장 장소를 가리키는 것이다.

• 

• 변수는 반드시 알파벳 문자나 "_" 문자를 시작해야 하며, 키워드(keyword)라는 자바스크립트에서 명령으로 정해놓은 단어는 변수로 사용해서는 안된다는 제약이 있다.

• 

• 변수의 선언은 자바스크립트는 자바나 C/C++ 언어와는 다르게 변수의 타입을 엄격하게 검사하지 않는다.

• 

• 변수가 필요할 때마다 그 즉시 사용하게 되면 바로 변수의 선언이 되며, 자바 언어는 경우 변수는 변수의 타입과 변수의 이름을 함께 사용함으로써 변수의 선언이 이루어진다.

• 

• 자바스크립트는 특별히 변수의 타입을 지정할 필요가 없고, 단지 변수값을 할당하게 되면 입력된 값에 해당하는 타입의 변수가 선언된다.

• [예] Number_1, v1030, _name

• 

• 6. 연산자

• 

• 

• 표현식의 조합을 평가하는 방법

• 

• 기본 산술 연산자를 비롯하여 약 30개의 연산자 지원

• 

• 7. 주석

• 

• 

• 주석은 스크립트가 무엇을 하는 것인지 설명하기 위해 저자가 표시한다.

• 

• 주석은 자바스크립트 해석기에 의해 무시된다.

• 

• 자바스크립트는 자바 형식의 주석을 지원한다.

• 

• Java는 C++ 언어를 기본으로 하고, Java Script는 Java를 기본으로 하기 때문에 //로 시작하는 1줄짜리 설명문을 표현할 수 있다. 또 여러줄의 설명문은 /*로 시작해서 */로 끝난다.

• 

• 형식

• // 설명문

• /* 설명문 */

• 

• 

• ● 연산자(Operator)

• 

• 4.1 산술 연산

• 

• 

• 사칙연산(+,-,*,/) 외에 나머지 연산(%)과 음수(-) 기능을 제공한다.

• 

• [예] x=9+4 (뎃셈)

• x=9-4 (뺄셈)

• x=9*4 (곱셈)

• x=9/4 (나눗셈)

• x=9%4 (나머지)

• x=-9 (음수)

• 

• 4.2 비트 연산

• 

• 

• 변수의 값을 비트단위로 계산한다.

• 

• [예] x=23<<2 (왼쪽으로 2비트 쉬프트하고 0으로 채우기)

• x=23>>2 (오른쪽으로 2비트 쉬프트하고 0으로 채우기)

• x=23>>>2 (왼쪽으로 2비트 쉬프트하고 sign으로 채우기)

• x=23&0x00000001 (비트 AND)

• x=23.0x00000001 (비트 OR)

• x=23|0x00000001 (비트 XOR)

• 

• 4.3 논리 연산

• 

• 

• 변수의 값을 0(거짓)과 1(참)으로 나누어서 and, or 등 논리식으로 계산한다.

• 

• [예] expr1 && expr2 (두 값을 AND 하기)

• expr1||expr2 (두 값을 하기)

• !expr1 (거짓은 참으로 참은 거짓으로)

• 

• 4.4 비교 연산

• 

• 

• 두개의 값이 같은지를 비교한다.

• 

• [예] 11==2 (같은지?)

• 1!=2 (다른지?)

• 1<2 (작은지?)

• 1>2 (큰지?)

• 1<=2 (작거나 같은지?)

• 1>=2 (크거나 같은지?)

• 

• 4.5 스트링 연산

• 

• 

• 두 개의 문자열을 합치는 경우에 이용한다.

• 

• [예] str1+str2 ("kumi"+"college"인 경우 "kumi college"

• 4.6 대입 연산

• 

• 

• 변수에 계산된 수식의 값을 넣는데 이용한다.

• 

• [예] x=24 (24를 대입)

• x+=3 (변수에 3를 더하기)

• x-=2 (변수에 2를 빼기)

• x*=2 (변수에 2를 곱하기)

• x/=3 (변수에 3를 나누기)

• x<<=2 (변수에 왼쪽으로 2번 쉬프트하고 0으로 채우기)

• x>>=2 (변수에 오른쪽으로 2번 쉬프트하고 0으로 채우기)

• x>>>=2 (변수에 오른쪽으로 2번 쉬프트하고 sign으로 채우기)

• x&=OX00000001 (변수에 오른쪽 값을 AND 하기)

• x.=OX00000001 (변수에 오른쪽 값을 OR 하기)

• x|=OX00000001 (변수에 오른쪽 값을 XOR 하기)

• 

• (6) 연산자 우선순위

• 

• 

• 연산자의 우선순위는 식을 평가할 때 연산자가 적용되는 순서를 결정한다.

• 

• 괄호를 사용해서 연산자의 우선순위를 변경할 수 있다.

• 

• 그 우선순위가 높은 순으로 열거하면 다음과 같다.

• 

우선순위

연산자

1

. () []

2

! ~ - ++ --

3

* / %

4

+ -

5

<<>>>>>

6

<<= >>=

7

== !=

8

&

9

^

10

|

11

&&

12

||

13

? :

14

= += -= *= /= %= <<= >>= >>>= &= ^= |=

15

,

• 

• 

• ● 제어문과 반복문

• 

• 1. 조건문

• 

• if 문



• 논리적인 조건에 따라 특정한 동작을 수행

• 

• 조건이 참인 경우와 거짓인 경우 수행할 명령을 지정할 수 있음

• 

• 지정된 조건이 참이면 자바스크립트는 참에 해당하는 문장을 수행

• 

• 조건이 거짓이라면 자바스크립트는 거짓에 해당하는 문장을 수행

• 

• 

• 형식

• 

• if (condition) {

• statement_1; 

• }

• [else {

• statement_2;

• }] 

• 

• 2. 반복문

• 

• for 문


for 반복문은 계수기(counter)가 지정된 조건에서 거짓으로 평가될 때까지 반복



• 형식

• 

• for ([initializing_expr]; [condition_expr]; [loop_expr]) {

• statements;

• 

• 

• 

• for 문의 수행 순서

• 초기치가 결정 -> 조건이 평가 -> 조건이 참이라면 반복문이 수행 -> 조건이 거짓이라면 반복문은 종료 -> 증가분이 수행 -> 문장이 수행되고 2 단계로 수행

• 

• while 문



• while 문은 지정한 조건이 참인 동안 반복해서 수행한다.

• 

• 만약 조건이 거짓이면 반복문 내의 문장은 실행을 중지하며 제어권은 반복문 다음의 문장으로 넘어간다.

• 

• 조건의 판단은 반복의 시작점에서 수행되며, 문장내의 마지막 문장이 이어지자마자 바로 다시 수행한다.

• 

• 

• 형식

• 

• while (condition_expr) {

• statements;

• }

• 

• do ... while 문



• while 문과 비슷하게 동작하지만 조건문을 첫 번째 수행 이후에 실행.

• 

• 자바스크립트 1.2에서 추가

• 

• 

• 형식 

• 

• do {

• statements;

• } while (condition_expr)

• 

• break 문



• break 문은 현재의 while이나 for 반복문을 종료하고 프로그램의 제어권을 반복문 바로 다음의 문장에 전달한다.

• 

• continue 문



• continue 문은 while이나 for 반복문 내의 문장들의 실행을 종료하고 계속해서 다음 루프를 실행한다.

• 

• break 문과는 반대로 continue 문은 반복문 전체의 수행을 종료하지는 않는다.

• 

• while문 내에 있을 경우 조건으로 되돌아가고, for문 내에 있을 경우 증가분으로 건너뛴다.

• 

• Labeled



• break와 continue에서의 종료할 Label을 정의

• 

• 자바스크립트 1.2에서 정의

• 

• 3. 객체 제어문

• 

• for...in 문



• for...in 문은 객체의 모든 특성을 변수에 할당한다.

• 

• 각각의 특성에 대해 자바스크립트는 지정된 문장을 수행한다.

• 

• 넷스케이프 3.0 이상에서 동작, 익스플로러에서 동작 안함.

• 

• 

• 형식 

• 

• for (property in object) {

• statements

• 

• 

• new 연산자



• new 연산자로 사용자가 정의한 객체형을 생성한다.

• 

• 

• 형식

• 

• objectName = new objectType ( param1 [,param2] ... [,paramN] )

• 

• this 키워드



• 현재 객체를 참조하기 위해 this를 사용한다.

• 

• 일반적으로 this는 메쏘드내에서 호출하는 객체를 참조한다.

• 

• 

• 형식

• 

• this[.propertyName]

• 

• with 문



• with 문은 여러 문장에 대한 기본객체를 설정한다.

• 

• 여러 문장 내에서 객체를 지정하지 않는 참조는 기본객체를 참조하는 것으로 가정한다.

• 

• 

• 형식 

• 

• with (object) {

• statement

• 

• 

• switch 문



• 하나의 값을 다른 여러개의 값과 비교할 때 사용

• 

• 

• 형식

• 

• switch (variable) {

• case "var1" :

• statement_1

• break

• case "var2" :

• statement_2

• break

• :

• default :

• statement_n

• break

• 

• 

• 

• ● 함수(function)

• 

• 처리할 내용이 중복으로 쓰일 경우 매번 기술하면 프로그램이 길어진다. 이때 함수를 만들어 호출하면 간단해진다.

• 자바 스크립트에서 매개변수(parameter)는 Call by Value로 작동한다.

• 

• 1. 함수의 정의와 호출

• 

• 

• 프로그램에서 특정 작업을 하기 위해 독립적으로 만들어진 하나의 단위를 의미

• 

• 함수는 일반적으로 특정한 일을 하도록 모아 놓은 코드의 집합체

• 

• 객체를 만드는 목적에도 이 함수란 것이 이용

• 

• 

• Function 정의 형식

• 

• function 함수 이름 (인수1, 인수2, ...) {

• 실행될 코드들

• }

• 

• [예]

• 

• function func_name(para1, para2) {

• result = result + to_char;

• }

• 

• 

• 함수는 스크립트 태그안에서 직접 호출되거나, 문서내의 이벤트에 의해 호출

• 

• 2. 자바스크립트의 내장 함수

• 

• 자바 스크립트는 언어 자체에 내장된 최상위 수준 함수를 가지고 있다.

• 이들은 다음과 같다.

• 

• a) alert()

• ()안의 문자열을 다이얼로그박스로 보여주기

• [예] alert("stop");

• 

• b) prompt()

• 사용자에게서 입력받기

• [예] prompt("Enter Number", "0")인 경우에는 "Enter Number"로 제목주고, 0을 임시값으로 보여주고, 사용자 입력을 기다린다.

• 

• c) confilm()

• "OK"와"Cancel"의 두가지 중 하나를 선택하게 하고, "OK"를 누르면 true, "cancel"을 고르면 false를 돌려준다.

• [예] confilm("Are You OK?")

• 

• d) Eval()

• eval 함수는 인수로 전달된 수식을 계산하여 주는 내장 함수

• 

• 다음 예는 x와 y의 변수가 문자열이므로 eval 함수는 두 문자열을 결합시켜 "12.3"의 문자열을 출력

• 예1) x = "1"

• y = "2.3"

• z = eval(a+b)

• 

• 다음 예는 x와 y의 변수가 산술값을 가지므로 eval 함수의 연산을 통해 3.3을 출력

• 예2) x = 1

• y = 2.3

• z = eval(x+y)

• 

• eval 함수는 자바스크립트의 표현식(expression)을 수행시킨다.

• 

• e) parseInt()와 parseFloat()

• parseInt는 인수로 들어온 문자열을 정수로 바꾸어주는 내장 함수

• parseFloat는 parseInt와 동일한 구조를 된 것으로 문자열을 부동소수점으로 바꾸어주는 내장함수

• 

• f) escape()와 unescape()

• escape는 ISO Latin-1 문자 세트를 ASCII 형태로 바꾸어 주는 함수

• (예: escape("&")는 %26을 리턴)

• unescape 함수는 ASCII 형태를 ISO Latin-1 문자 세트로 바꾸어 주는 함수

• (예 : unescape("%26")은 "&"를 리턴)

• 

• 

• ● 이벤트와 이벤트 처리기

• 

• 1. 이벤트

• 

• 

• Web Browser에 의한 JavaScript는 주로 이벤트(Event)에 의해 실행한다.

• 

• 이벤트는 사용자가 특정한 행위를 발생했다는 신호를 가리킨다. 예를 들어 버튼을 눌렀다든가, 하이퍼텍스트 링크위로 마우스가 지나갔다든가, Form 내의 text 영역에서 커서를 이동시키는 것들이 일종의 이벤트라고 한다.

• 

• 자바스크립트는 이러한 이벤트가 발생하는지를 계속해서 체크한다.

• 

• 2. 이벤트 처리기

• 

• 

• 이벤트를 받아서 처리하는 일종의 함수 혹은 메쏘드라고 할 수 있다. 예를 들어 버튼을 눌려졌다는 이벤트에 따라 실행되는 함수가 이벤트 처리기(Event Handler)가 되는 것이다.

• 

• 이벤트에 따라 자바스크립트에 정의된 이벤트 처리기가 있다.

• 

• 

• 사용 형식 :

• TAG : HTML 태그

• EventHandler : Event Handler의 이름

• 

• 3. 이벤트의 종류

• 

• 

• 자바스크립트가 지원하는 이벤트와 발생시점은 다음과 같다.

• 

이벤트

발생 시점

이벤트 처리기

abort

이미지를 읽다가 중단시켰을 때

onAbort

blur

사용자가 Tab 같은 것을 이용해서 Form 요소로부터 커서를 이동시킬 때

onBlur 

click

From 요소나 Link를 Click할 때

onClick

change

text, textarea나 select의 값을 변경하고 이동하기위해 Tab을 눌렀을 때

onChange

dragdrop

브라우저 윈도우에 개체를 떨어뜨렸을 때

onDragDrop

error

문서나 이미지를 읽다가 오류가 발생했을 때

onError

focus

사용자가 Text나 Textarea로 cursor를 이동했을 때

onFocus

keydown

이미지, 링크, textarea에 키를 눌렀을 때

onKeyDown

keypress

이미지, 링크, textarea에 키를 누르거나 누르고 있을 때

onKeyPress

keyup

이미지, 링크, textarea에 키를 눌렀다가 놓을 때

onKeyUp

load

사용자가 Browser에서 page를 읽었을 때

onLoad

mousedown

버튼이나 링크위에서 마우스 버튼을 누를 때

onMouseDown

mousemove

커서를 옮겨 다닐 때

onMouseMove

mouseout

마우스가 링크나 특정한 영역안에 있다가 나갔을 때

onMouseOut

mouseover

사용자가 link나 anchor위로 mouse를 옮겼을 때

onMouseOver

mouseup

버튼이나 링크위에서 마우스 버튼을 띨 때

onMouseUp

move

새로운 윈도우로 옮겨갈 때

onMove

reset

입력 양식에서 리셋시켰을 때

onReset

resize

윈도우의 크기가 변경되었을 때

onResize

select

사용자가 Form 요소의 입력 필드를 선택했을 때

onSelect

submit

사용자가 Submit Button을 Click함으로서 Form을 제출할 때

onSubmit

unload

사용자가 현재 Page에서 벗어날 때

onUnload

• 

• 

• ● 객체(Object)

• 

• 1. 객체의 개념

• 

• 

• 자바스크립트는 객체개념에 기반을 두기는 하지만 완전한 객체지향언어는 아니다.

• 

• 객체(Object)란 데이터와 그 데이터를 가공하는 함수라고 정의할 수 있다.

• 

• 객체는 속성과 메쏘드라는 것을 포함한다.

• 

• < -. 메쏘드(Method)

• 

• 데이터를 가공하는 함수 즉, 객체와 객체의 외부 세계를 연결해주는 것을 메쏘드라고 하고, 객체의 속성값을 변경시키거나, 사용하기 위해선 이를 관리하는 인터페이스가 필요하다.

• 

• [예] 윈도우를 열거나 닫는 것, document나 frame에 문자를 쓰는 것 등

• 

• -. 속성(Property)

• 

• 각 객체는 속성을 가지며, 속성값을 변경하여 원하는 일을 할 수 있다.

• 

• 속성 참조 형식 : [객체명].[속성]

• 

• [예] document.bgColor -> Web Page의 배경색)

• window.status -> 브라우저 윈도우의 상태바에 나타날 문자열

• 

• 자바스크립트는 웹 페이지(Web Page)의 구조에 기반을 둔 객체들을 가지고 있다.

• 

• [예] Web Page는 "document"라는 객체, Browser Window도 "window"라는 객체

• 

• 2. 객체의 종류

• 

• a) 내장 객체

• 

• 

• 내장 객체는 Document, Browser 등에서 많이 사용되는 부분을 script에서 자체적으로 객체로 정의한 것을 말한다. [예] document, window, frame, form 등

• 

• 

• 자바스크립트의 내장객체

• 

• -. Array 객체

• -. Date 객체

• -. Math 객체

• -. String 객체

• -. Boolean 객체

• -. Function 객체

• -. Number 객체

• -. RegExp 객체

• 

• 

• 브라우저의 내장객체

• 

• -. Window 객체

• -. document 객체

• -. history 객체

• -. location 객체

• -. link 객체

• -. image 객체

• -. form 객체

• -. navigator 객체

• 

• b) 사용자 정의 객체 :

• 

• 

• 이미 있던 객체의 클래스를 이용해서 새로운 객체의 클래스를 만드는 대신 전문적인 용어로 "Property List"라는 구조를 이용하여 객체를 쉽게 만들수 있도록 지원한다.

• 

• 

• ● 자바스크립트의 내장객체

• 

• 1. Date 객체

• 

• 

• 날짜와 시간에 관련해서는 Date 객체를 사용

• 

• 현재의 날짜와 시간을 표시하려면 다음과 같이 새로운 객체를 생성한다.

• 

• today = new Date()

• 

• 

• Date 객체의 생성방법

• 

• new Date()

• new Date(miliseconds)

• new Date(datestring)

• new Date(year, month, day)

• new Date(year, month, day, hours, minute, seconds)

• 

• 

• miliseconds는 1970년 1월1일 0시를 기준으로 해서 현재까지 몇 milisecond가 지났는 가를 가지고 날짜를 만든다.

• 

• 

• datestring의 형태는 "month day, year hours:minutes:seconds"로 표시된다.

• (month의 경우는 영문명을 사용)

• 

• 

• Date 객체의 함수들

• 

객체

속성

메쏘드

Date

 

getDate, getDay, getHours, getMinutes, getMonth, getSeconds, getTime, getTimeZoneOffset, getYear, parse, setDate, setHours, setMinutes, setMonth, setSeconds, setTime, setYear, toString,toGMTString, toLocaleString

• 

• 

• 

• Date 객체의 함수 사용 방법

• 

• today.getHours()

• today.getMinutes()

• today.getMonths()

• today.getDate()

• 

• 

• Date 객체의 함수

• 

getDate

1 ~ 31

getDay

0: Sundaay, 1: Monday, ... ,7: Saturday

getHours

0 ~ 23

getMinutes

0 ~ 59

getMonth

0: January,... ,11: Decenber

getSeconds

0 ~ 59

getTime

1970년 1월 1일 0시 부터 ms 반환

getTimeZOneOffset

한국 시간과 GMT 시간의 분차

getYear

예, 1999는 99로 반환

parse

문자열 해석해서, get Time 해 줌

setDate

1 ~ 31로 해석

setHours

0 ~ 23

setMinutes

0 ~ 59

setMonth

0: Sundaay, 1: Monday, ... ,7: Saturday

setSeconds

0 ~59

setTime

1970년 1월 1일 0시 부터 ms 설정

setYear

예, 1999는 99로 설정

toString

Date 객체를 받아서 String으로

toGMTString

Date 객체를 받아서 "Mon,5 Feb 1999 17:16:34 GMT" 같이 변환

toLocalString

Date 객체 받아서 "MM/DD/YY HH:MM:SS"로 변환

• 

• 

• 2. Array 객체

• 

• 

• Array 객체는 프로그래밍 언어에서 동일한 타입을 가지는 데이터를 저장하고 다루는데 편리하다.

• 

• Array 객체를 new 연산자를 사용해서 만들 수 있다.

• 

• array_val = new Array("가", "나", "다", "라")

• array_val = new Array(100)

• 

• 

• Array 객체의 함수들

• 

객체

속성

메쏘드

Array

length, prototype

join, reverse, sort

• 

• 

• 3. Math 객체

• 

• 

• 수학식이나 상수들에 관련된 사항들을 가지고 있는 객체로 따로 생성해서 사용하지 않고 Math.constant나 Math.function()과 같은 형태로 사용

• 

• 

• "with" 문장과 사용하면 "Math."을 생략하고 사용할 수 있어 편리

• 

• with (Math) {

• x = cos(i)

• y = abs(x)

• i = PI * y

• }

• 

• 

• Math 객체의 함수들

• 

객체

속성

메쏘드

Math

E, PI, LN2, LN10, LOG2E, LOG10E, SQRT1_2, SQRT2

abs, acos, asin, atan, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tan

• 

• 

• 

• Math 객체의 함수

• 

E

Euler's Constant(2.778...)

LN10

10의 자연로그값

LN2

2의 자연로그값

PI

3.141592.....

SQRT1_2

1/2 의 제곱근

SQRT2

2의 제곱근

abs()

절대치 구함

acos()

arc cosine - radian으로 변환

asin()

arc sine - radian으로 변환

atan()

arc tangent - radian

ceil()

2.4의 ceil은 3

floor()

2.4의 floor은 2

cos()

cosine - radian으로 변환

sin()

sin - radian으로 변환

tan()

tangent - radian으로 변환

exp()

exponential - radian으로 변환

log()

log - radian으로 변환

max()

최대치 - radian으로 변환

min()

최소값 - radian으로변환

pow()

pow(2,3)의 2의 3승

random()

0과 1사이의 난수

round()

round(2.1)은 2, round(2.8)은 3

sqrt()

제곱근

• 

• 

• 4. String 객체

• 

• 

• "message"와 같은 문자열 리터럴이거나 thePhrase와 같은 문자열 변수로 표현.

• 

• var str="My name is koo"

• alert(str.length)

• 

• 

• String 객체의 함수들

• 

객체

속성

메쏘드

String

length

anchor, big, blink, bold, charAt, fixed, fontcolor, fontsize, indexOf, italics, lastIndexOf, link, small, strike, sub, substring, sup, toLowerCase, toUpperCase

• 

• 

• 

• String 객체의 함수

• 

anchor()

문자열을 <A></A>로 감싸준다.

big()

문자열을 <BIG></BIG>로 감싸준다.

blink()

문자열을 <BLINK></BLINK>로 감싸준다.

bold()

문자열을 <B></B>로 감싸준다.

charAt()

charAt(2) 2번째(0,1,2) 문자를 변환

fixed()

문자열을 <TT></TT>로 감싸준다.

fontcolor()

문자열을 <FONT COLOR=color></font>로 감싸준다.

fontsize()

문자열을 <FONT SIZE=size></FONT>로 감싸준다.

indexOf()

문자열과 시작 index를 받아서, index 다음부터 문자열이 있는 곳을 찾는다.

italics()

문자열을 <I></I>로 감싸준다.

lastindexOf()

문자열과 시작 index를 받아서, index 앞부터 거꾸로 문자열이 있는 곳을 찾는다.

Link()

문자열을 <A></A>로 감싸준다.

small()

문자열을 <SMALL></SMALL>로 감싸준다.

strike()

문자열을 <STRIKE></STRIKE>로 감싸준다.

sub()

문자열을 <SUB></SUB>로 감싸준다.

substring()

index1에서 index2 전까지의 부분 문자열

sup()

문자열을 <SUP></SUP>로 감싸준다.

toLowerString()

문자열을 소문자열로 바꾼다.

min()

문자열을 대문자열로 바꾼다.

• 

• 

• 

• ● 브라우저의 내장객체

• 

• 1. 브라우저의 내장객체란?

• 

• 

• 브라우저의 내장객체는 현재 브라우저가 보여주고 있는 문서에 관한 여러 가지 정보 즉 Window 정보, History 정보, 문서가 존재하고 있는 위치에 관한 정보 등을 포함한다.

• 

• 브라우저는 자신이 현재 가지고 있는 모든 정보들을 객체로서 제공한다.

• 

• 2. 브라우저의 내장객체의 계층구조

• 

• 

• 브라우저 내장객체들은 계층 구조로 이루어져 있는데 다음과 같다.

• 

• 

• 

• 

• 3. Window 객체

• 

• 

• 브라우저 내장 객체들의 구조 중에서 가장 상위에 있는 객체

• 

• 

• window 객체의 Property와 Method

• 

window 객체

Property

status

Browser의 status bar에 나타날 문자열

defaultStatus

status에 지정된 문자열이 없을 때 나타날 문자열

self

자기 자신 객체

parent

window 객체 간의 계층 구조가 생길 때 상위 객체

top

window 객체 간의 계층 구조가 생길 때 최상위 객체

opener

open() method로 window를 연 문서가 있는 window

length

현재 윈도우의 프레임의 개수

frames[]

현재 윈도우에서 여러개의 프레임 즉, frames[0], frame[1], ...

location

현재 위치

history

현재까지 지나온 곳

document

현재 페이지에 대한 객체

Method

open()

window 열기

close()

window 닫기

alert()

간단한 메시지를 전달하기 위한 Dialog Box

confirm()

사용자로부터 확인을 받기 위한 Dialog Box

prompt()

사용자로부터 문자열을 입력받기 위한 Dialog Box

setTimeout()

지정된 시간동안 기다린 후 지정된 명령 실행

clearTimeout()

setTimeout 해제

Event Handler

onLoad

Browser가 문서를 모두 읽은 후 실행할 명령 지정

onUnload

Browser에 현재 문서를 모두 지운 후 실행할 명령 지정

onError

Browser가 문서를 읽던 중 에러가 발생했을때

onBlur

Browser가 focus를 잃었을때

onFocus

Browser가 focus를 얻었을때

• 

• 

• 4. Document 객체

• 

• 

• 문서의 <body> 나 <title> 태그 안에 있는 내용들과 직접적으로 연결되어 있다.

• 

• document 객체는 툴바, 상태바, 문서 위치 정보 등에는 접근할 수 없다.

• 

• 

• document 객체의 Property와 Method

• 

document 객체

Property

title

문서의 제목

location

문서의 URL 위치

lastModified

문서를 마지막으로 수정한 날짜

referrer

Link로 현재 문서에 왔을 때 이전 문서의 URL 위치

bgColor

문서의 배경색

fgColor

문서의 전경색

linkColor

문서에서 링크를 표시하는 색

alinkColor

링크를 클릭했을 때 나타나는 색

vlinkColor

이전에 방문했던 링크를 표시하는 색

anchors[]

문서에 있는 표식들의 배열

elements[]

현재 웹 페이지의 요소

forms[]

문서에 있는 입력 양식들의 배열

links[]

문서에 있는 링크들의 배열

cookies

클라이언트쪽의 PC에 저장한 정보

images

문서에 있는 이미지들의 배열

applets

문서에 있는 Java Applet들의 배열

embeds

문서에 있는 Plug-in들의 배열

Method

open()

문서에 데이터를 출력하기 위해 준비시키는 것

close()

문서에 데이터를 출력하는 것을 마무리

clear()

브라우저에서 문서 지우기

write()

문서에 데이터 출력

writeln()

문서에 데이터 출력(줄 바꾸기 자동 포함)

Event Handler

onBlur

문서가 focus를 잃었을 때

onFocus

문서가 focus를 얻었을 때

• 

• 

• 5. History 객체

• 

• 

• history 정보라는 것은 브라우저가 가장 최근에 방문하였던 URL 주소들을 의미한다.

• 

• history 객체에서 제공하는 여러 메소드들을 이용하여 방금 지나왔던 페이지로 이동할 수 있게 된다.

• 

• 단, history list속에 있는 URL 주소를 알아낼 수는 없다.

• 

• 

• history 객체의 Property와 Method

• 

history 객체

Property

length

history list에 포함되어 있는 URL 주소의 개수

Method

back()

history list에서 한단계 앞으로 이동

forward()

history list에서 한단계 뒤로 이동

go()

history list에서 임의의 위치로 이동

Event Handler

없음

 

• 

• 

• 6. Location 객체

• 

• 

• 현재 브라우저에 보이고 있는 문서 위치에 관한 여러 가지 정보를 제공

• 

• 

• location Property와 Method

• 

location 객체

Property

href

문서의 URL 주소

host

URL 주소의 호스트명과 포트번호

hostname

URL 주소의 호스트명

protocol

프로토콜 종류

pathname

디렉토리 위치

port

포트번호

hash

표식 이름

search

검색 엔진을 호출할 때 사용되는 형식

Method

reload()

브라우저의 현재 문서를 다시 읽도록 만드는 메소드

replace()

현재 문서를 특정 URL에 있는 문서로 바꿔치는 메소드

assign()

location.href를 설정

toString()

location.href를 String으로 치환

Event Handler

 

 

• 

• 

• 7. Link 객체

• 

• 

• HTML 문서에 들어있는 모든 Link에 대한 정보를 제공하는 객체로서, document 객체로부터 파생되었다.

• 

• links는 문서에 포함된 Link 객체들을 배열로 모아 놓은 변수로서, document.links[0]는 문서의 첫번째에 나오는 Link를 의미한다.

• 

• 

• Link 객체의 Property와 Method

• 

Link 객체

Property

target

지정된 URL에 연결된 후 정보를 보여줄 Window나 Frame

href

Link에 연결된 문서의 URL 주소

host

Link에 연결된 URL 주소의 호스트명과 포트번호

hostname

Link에 연결된 URL 주소의 호스트명

protocol

프로토콜 종류

pathname

디렉토리 위치

port

포트번호

hash

표식 이름

search

검색 엔진을 호출할 때 사용되는 형식

Method

없음

 

Event Handler

onClick

마우스로 링크를 클릭했을 때 발생하는 Event Handler

onMouseOver

마우스로 링크 위를 지나갔을 때 발생하는 Event Handler

onMouseOut

마우스가 링크 밖으로 나갔을 때 발생하는 Event Handler

• 

• 

• 8. Image 객체

• 

• 

• HTML 문서는 <IMG> 태그에 사용해 이미지를 삽입

• 

• 자바스크립트는 image 객체를 통해 이러한 이미지에 관한 정보를 나타낸다.

• 

• 이미지에 대한 접근은 document 객체에 있는 images 속성을 이용하거나, image 객체의 name 속성을 통해 할 수 있다.

• (예를 들어 첫 번째 이미지의 name 속성이 first_img라고 한다면, document.images[0] 또는 document.first_img 로 접근 할 수 있다.)

• 

• 

• Image 객체의 property와 method

• 

Image 객체

Property

name

이미지 객체의 이름

src

이미지 파일의 URL 주소

height

이미지의 세로 길이

width

이미지의 가로 길이

hspace

이미지와 주변 글자들간의 가로 여백

vspace

이미지와 주변 글자들간의 세로 여백

border

이미지 테두리선의 굵기

align

이미지와 주변 글자들간의 배치 방법 지정

ismap

이미지를 서버쪽 이미지 맵으로 사용

usemap

이미지를 클라이언트쪽 이미지 맵으로 사용

Event Handler

onAbort

이미지 전송을 중단시켰을 때

onError

이미지 전송중 에러가 발생했을 때

onLoad

이미지가 브라우저에 나타날 때

• 

• 

• 9. Form 객체

• 

• 

• form 객체는 여러개의 객체들로 구성되어 있는데, 그 객체들은 textarea, text, password, hidden, submit, reset, radio, checkbox, button, select이다.

• 

• 

• form 객체의 특성과 메소드

• 

Form 객체

Property

Method

Event Handler

text

defaultValue, name, value

focus(), blur(), select()

onBlur, onChange, onFocus, onSelect

textarea

defaultValue, name, value

focus(), blur(), select()

onBlur, onChange, onFocus, onSelect

checkbox

checked, name, value, defaultChecked

click()

onClick

radio

checked, name, value, index, defaultChecked, length

click()

onClick

button

name, value

click()

onClick

submit

name, value

click()

onClick

reset

name, value

click()

onClick

password

name, value, defaultValue

focus(), blur(), select()

onFocus, onBlur, onSelect

select

name, value, selectedIndex, options

 

onBlur, onFocus, onChange

hidden

name, value

 

 

options

name, value, selectedIndex

 

 

• 

• 

• 10. Navigator 객체

• 

• 현재 사용하고 있는 Browser에 관한 일반적인 정보를 제공하는 객체

• 현재 사용되는 브라우저의 버전 및 제공되는 mimeType, Plugin을 알수 있다.

• 

• navigator 객체의 특성과 메소드

• 

navigator 객체

Property

appName

Application 이름

appVersion

브라우저의 현재 버전

appCodeName

브라우저의 현재 코드명

userAgent

브라우저의 현재 User Agent

mimeTypes

현재 브라우저에서 지원하고 있는 MIME 타입들

plugins

현재 브라우저에 설치된 Plug-in들의 종류

Method

javaEnabled()

현재 브라우저가 Java를 지원하고 있는지를 검사

Event Handler

없음

 






(N20090711)



본 블로그를 찾은 분들에게 오늘도 축복 있으시길...

+ Recent posts